はてなブログで本文のテキストにルビ(ふりがな)を振る方法

スポンサーリンク

はてなブログ 本文のテキストにルビ(ふりがな)を振る方法

ブログを始めて数か月。最近「HTML」とか「CSS」に興味が湧いてきて、この本を購入しました。

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>

非対応ブラウザでもふりがなテキストを表示させたい方は、こちらのコードを使用してください。

 

最後に

ブログの本文テキストに、ルビを振る方法をご紹介させていただきました。

僕自身はこの先、使いどころがあるかどうかは分かりません。

もし興味がある方がいらっしゃれば、一度試してみてください。

ここまで読んでいただき、ありがとうございました。

 

コメント

タイトルとURLをコピーしました