はてなダイアリーでルビをふる

はてなダイアリーで紅玉(ルビ)をふってみました。

サンプル


また天國(てんこく)は良(よ)き眞珠(しんじゅ)を求(もと)むる商人(あきうど)のごとし。
價(あたひ)たかき眞珠(しんじゅ)一(ひと)つを見出(みいだ)さば、往(ゆ)きて有(も)てる物(もの)をことごとく賣(う)りて、之(これ)を買(か)ふなり。


新約聖書 マタイ傳(でん)福音書(ふくいんしょ)13章45節-46節 (文語訳 大正改訳)
http://www.amazon.co.jp/dp/4820232185/
マタイ傳福音書(文語訳) - Wikisource *1
新約聖書 - 近代デジタルライブラリー

HTMLタグ

はてなダイアリーで使用できるルビ関連のタグは４つ。

rbcとrtcは未対応でした。 ( はてなダイアリー利用可能タグ - はてなダイアリーのヘルプ )

例
<ruby>
 <rb>紅玉</rb>
 <rp>(</rp>
 <rt>ルビ</rt>
 <rp>)</rp>
</ruby>

CSS

管理画面からスタイルシートを設定します。 ( スタイルシートを編集する - はてなダイアリーのヘルプ )

ruby{
  display:inline-table;
  text-align:center;
  white-space:nowrap;
  text-indent:0;
  margin:0;
  vertical-align:text-bottom;
  line-height:1;
}
rb{
  display:table-row-group;
  line-height:1;
}
rt{
  display:table-header-group;
  font-size:71%;
  line-height:1;
  letter-spacing:0;
}
rp{
  display:none;
}


スタイルシートの内容は、「404 Blog Not Found:CSS - ルビ再び」を参考にしました。
ありがとうございます。

*1:現時点ではリンク先の Wikisource にルビはありません。書籍にはあります。