はてなブログで本文のテキストにルビ（ふりがな）を振る方法
スポンサーリンク
ブログを始めて数か月。最近「HTML」とか「CSS」に興味が湧いてきて、この本を購入しました。
数日前から、入浴中にこの本を読んでいます。
しかしほとんど知識のない僕にとっては、内容の80％以上が理解できません。ある程度知識がある人向けの本のような気がします。「初心者向けの本を買えばよかったな」と、若干後悔しているところです。
でも中には理解できる内容もあり、「これは面白そうだな」と思う機能も意外とたくさん載っています。
その中で、どうしても試してみたいHTMLがあったので試してみました。
それが「テキストにルビを振る」
いわゆる本文の漢字などに、ふりがなを付けることができる機能です。
この記事以外で、本文中でルビを振る機会があるかどうかは分かりません。ただ単純に試してみたかっただけです。
そして試してみたらできました。
聖闘士星矢
僕自身の備忘録的な記事になるので、これを読んでいただいた方のお役に立つかどうかは分かりません。
テキストにルビを振る方法をご紹介させていただきますので、もし興味がある方は、よろしければ読んでみてください。
ルビとは
ルビ（英語: ruby）は、文章内の任意の文字に対しふりがな／説明／異なる読み方といった役割の文字をより小さな文字で、通常縦書きの際は文字の右側／横書きの際は文字の上側に記されるものである。
出典：Wikipedia
いわゆる「ふりがな」のことです。余談ですが、「ルビ」は宝石の「ルビー」が語源らしいです。
テキストにルビ（ふりがな）を振る方法
ルビを振るHTMLです。はてなブログの見たままモードの場合は、「HTML編集」画面で入力します。
<ruby>テキスト<rt>ふりがな</rt></ruby>
- <ruby>と<rt>の間に本文のテキスト（漢字など）を入力
- <rt>と</rt></ruby>の間に、ふりがなを入力します。
HTML編集画面で、下のように記述した場合
<p>抱きしめた心の<ruby>小宇宙<rt>コスモ</rt></ruby></p>
抱きしめた心の小宇宙
このように表示されます。
ただし、上のHTMLの場合、対応していないブラウザではふりがな（上の例では『コスモ』）が表示されないようです。
ふりがな表示に非対応のブラウザでも、『小宇宙(コスモ)』のようにふりがなテキストを表示させたい場合は、下のように記述します。
<ruby>テキスト<rp>(</rp><rt>ふりがな</rt><rp>)</rp></ruby>
非対応ブラウザでもふりがなテキストを表示させたい方は、こちらのコードを使用してください。
最後に
ブログの本文テキストに、ルビを振る方法をご紹介させていただきました。
僕自身はこの先、使いどころがあるかどうかは分かりません。
もし興味がある方がいらっしゃれば、一度試してみてください。
ここまで読んでいただき、ありがとうございました。
