HTMLとWordPressのショートコードで漢字に簡単にルビを振る

小学校の教科書はその時点で習っていない漢字にはルビ(ふりがな)が振ってありました。HTMLでもルビを振るタグがあることは知っていたのですが、今まで作ったコンテンツで「ふりがなを振らないと」という機会がありませんでした。しかし、今やっているお仕事で「難読漢字にルビを振る」という必要性が出てきたようなので、ルビに関してHTMLではどのようにするのかを調べました。
また、簡単にルビが振れるようにWordPressのショートコードも作ってみました。

ルビを振るHTMLの書き方

ルビ HTML で検索してこちらのページを見つけました。

<ruby> ルビを振る

このページにあるコードを参考にしてHTMLでルビを振るものを書いてみました。

こういうコードを書くと、

こんな感じに、ルビが振られました

2つの書き方があってHTML5以降は、

<ruby>ルビを振りたい漢字
<rt>ふりがな</rt>
</ruby>

のように書けば、ルビを振ることができます。

古いブラウザの場合はHTML4のものがあるようで、その場合は

この書き方、

<ruby>
ルビを振りたい漢字
<rp>(</rp><rt>ふりがな</rt><rp>)</rp>
</ruby>

このように書くということです。今、私が確認できるブラウザはすべてHTML5対応のもので確認ができなかったのですが、HTML5未対応のブラウザだとこの書き方をすれば

私の名前は兎本(うもと)美佳です。

のように表示されるようです。この書き方でもHTML5対応のブラウザなら

とふりがなが振られるので、最大公倍数ということでこちらの書き方をしておくと良さそうです。

WordPressでルビを振るショートコードを書きました

HTMLでちょっと試そうと思って書いてみたのですが、特にHTML4にも対応する書き方をすると なんともめんどくさい(>_<) と思いました。もしblogでルビを振るとすると テキストタブ 

こんな風に書かないといけません。…ということでショートコードにしてみました。

使っている子テーマのfunctions.php

add_rubyというショートコード関数を追加します。これで先ほどと同じ表示をするには

このように書けば良いだけなのでだいぶすっきりします(^^)/。

また、ショートコードなのでビジュアルタブでも書くことができます。

例で書いておいた

ビジュアルタブに書いて表示させると、

このようにちゃんとルビが振られました(^^)/

ふりがなの部分が漢字より長かったらどうなるのか?

ふりがなは小さな文字で表示されるので、大概の場合はみ出ることはないと思うのですが、もし漢字よりふりがなの方が長かったらどうなるのか見てみました。

承る とか 慮る という漢字にルビを振ると、

こんな風に表示されました。なるほど前後に空白があくのですね。まぁ、、、読めない漢字が読めるようになるからこれでいいのかなぁと思います(^_^;。

おまけ:ルビの語源はルビー

ルビの語源は 昔、印刷業界でルビー… といううっすらした情報を知ってはいたのですがせっかくなのでちゃんと調べてみました。

Wikipedia ルビ

いつものWikipediaによると

明治時代からの日本の活版印刷用語であり、「ルビ活字」を使用し振り仮名(日本語の場合)やピン音(中国語の場合)などを表示したもの。日本で通常使用された5号活字にルビを振る際7号活字(5.25ポイント相当)を用いたが、一方、イギリスから輸入された5.5ポイント活字の呼び名がruby(ルビー)であったことから、この活字を「ルビ活字」とよび、それによってつけられた(振られた)文字を「ルビ」とよぶようになった。明治期つまり19世紀後半のイギリスでは活字の大きさを宝石の名前をつけてよんでいた[1]。

うっすらした情報がだいたい合っていたようです。活字の大きさを宝石の名前をつけてよんでいた、っていうのはなかなかすてきですねー。ダイヤとか呼ばれる大きさの文字もあったのかなぁとさらに調べたくなって、

CyberLibrarian 文字サイズ

こちらで発見しました。ダイヤモンド 4.5ポイント、パール 5.0ポイント、ルビー 5.5ポイント、エメラルド 6.5ポイント だったんですね!ダイヤモンドの方が大きいモノを表してるとばっかり思ってましたが一番小さいものがダイヤモンドでした。

[Amazon sponsored link] html css 関連本
兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る