小学校の教科書はその時点で習っていない漢字にはルビ（ふりがな）が振ってありました。HTMLでもルビを振るタグがあることは知っていたのですが、今まで作ったコンテンツで「ふりがなを振らないと」という機会がありませんでした。しかし、今やっているお仕事で「難読漢字にルビを振る」という必要性が出てきたようなので、ルビに関してHTMLではどのようにするのかを調べました。
また、簡単にルビが振れるようにWordPressのショートコードも作ってみました。
ルビを振るHTMLの書き方
ルビ HTML で検索してこちらのページを見つけました。
このページにあるコードを参考にしてHTMLでルビを振るものを書いてみました。
<h1>rubyだけで書く</h1> 私の名前は <ruby> 兎本<rt>うもと</rt> </ruby>美佳です。 <h1>rubyとrpとrtで書く</h1> 私の名前は <ruby> 兎本 <rp>(</rp><rt>うもと</rt><rp>)</rp> </ruby>美佳です。
こういうコードを書くと、
こんな感じに、ルビが振られました！
２つの書き方があってHTML5以降は、
<ruby> 兎本<rt>うもと</rt> </ruby>
<ruby>ルビを振りたい漢字
<rt>ふりがな</rt>
</ruby>
のように書けば、ルビを振ることができます。
古いブラウザの場合はHTML4のものがあるようで、その場合は
<ruby> 兎本 <rp>(</rp><rt>うもと</rt><rp>)</rp> </ruby>
この書き方、
<ruby>
ルビを振りたい漢字
<rp>(</rp><rt>ふりがな</rt><rp>)</rp>
</ruby>
このように書くということです。今、私が確認できるブラウザはすべてHTML5対応のもので確認ができなかったのですが、HTML5未対応のブラウザだとこの書き方をすれば
私の名前は兎本（うもと）美佳です。
のように表示されるようです。この書き方でもHTML5対応のブラウザなら
とふりがなが振られるので、最大公倍数ということでこちらの書き方をしておくと良さそうです。
WordPressでルビを振るショートコードを書きました
HTMLでちょっと試そうと思って書いてみたのですが、特にHTML4にも対応する書き方をすると なんともめんどくさい(>_<) と思いました。もしblogでルビを振るとすると テキストタブ で
こんな風に書かないといけません。…ということでショートコードにしてみました。
使っている子テーマのfunctions.phpに
// ふりがな（ルビ）を振る k=漢字 f=ふりがな
// 使用例） [add_ruby k='鬼灯' f='ほおずき']
// <ruby>鬼灯<rp>(</rp><rt>ほおずき</rt><rp>)</rp></ruby>
function add_ruby($atts) {
/* 引数を展開する */
extract(
shortcode_atts(
array(
'k' => '',
'f' => '',
),
$atts
)
);
if (($k == '') OR ($f=='')) {
return '';
}
$ruby = '<ruby>%s<rp>(</rp><rt>%s</rt><rp>)</rp></ruby>';
return sprintf($ruby, $k, $f);
}
add_shortcode('add_ruby', 'add_ruby');
add_rubyというショートコード関数を追加します。これで先ほどと同じ表示をするには
このように書けば良いだけなのでだいぶすっきりします(^^)/。
また、ショートコードなのでビジュアルタブでも書くことができます。
例で書いておいた
[add_ruby k='鬼灯' f='ほおずき']
を
ビジュアルタブに書いて表示させると、
このようにちゃんとルビが振られました(^^)/
ふりがなの部分が漢字より長かったらどうなるのか？
ふりがなは小さな文字で表示されるので、大概の場合はみ出ることはないと思うのですが、もし漢字よりふりがなの方が長かったらどうなるのか見てみました。
ふりがなが長い漢字を調べてみました。[add_ruby k='承' f='うけたまわ']る とか[add_ruby k='慮' f='おもんばか']る とかが見つかりました。
承る とか 慮る という漢字にルビを振ると、
こんな風に表示されました。なるほど前後に空白があくのですね。まぁ、、、読めない漢字が読めるようになるからこれでいいのかなぁと思います(^_^;。
おまけ：ルビの語源はルビー
ルビの語源は 昔、印刷業界でルビー… といううっすらした情報を知ってはいたのですがせっかくなのでちゃんと調べてみました。
いつものWikipediaによると
明治時代からの日本の活版印刷用語であり、「ルビ活字」を使用し振り仮名（日本語の場合）やピン音（中国語の場合）などを表示したもの。日本で通常使用された5号活字にルビを振る際7号活字（5.25ポイント相当）を用いたが、一方、イギリスから輸入された5.5ポイント活字の呼び名がruby（ルビー）であったことから、この活字を「ルビ活字」とよび、それによってつけられた（振られた）文字を「ルビ」とよぶようになった。明治期つまり19世紀後半のイギリスでは活字の大きさを宝石の名前をつけてよんでいた[1]。
うっすらした情報がだいたい合っていたようです。活字の大きさを宝石の名前をつけてよんでいた、っていうのはなかなかすてきですねー。ダイヤとか呼ばれる大きさの文字もあったのかなぁとさらに調べたくなって、
こちらで発見しました。ダイヤモンド 4.5ポイント、パール 5.0ポイント、ルビー 5.5ポイント、エメラルド 6.5ポイント だったんですね！ダイヤモンドの方が大きいモノを表してるとばっかり思ってましたが一番小さいものがダイヤモンドでした。
[amazon_searchlink search=”html css”]
コメント