Aqlier/ 6月 29, 2017/ tech

WowdPress(ワードプレス)文章(ぶんしょう)ルビ(るび)()方法(ほうほう)をまとめました。

難読文字、読み間違えしやすい名前・地名などでルビを振る際に使用する設定方法です。

難読漢字(なんどくかんじ)

のルビは、以下のように定義しています。
見やすいように改行していますが、実際は途中の改行は不要です。

<ruby>WowdPress<rp>(</rp><rt><span style="color: #003366;">ワードプレス</span></rt><rp><span style="color: #003366;">)</span></rp></ruby></span><span style="color: #003366;"><span style="font-size: 12pt;"> の<ruby>文章<rp>(</rp><rt>ぶんしょう</rt><rp>)</rp></ruby>に</span>、<span style="font-size: 12pt;"><span style="color: #993300;"><ruby>ルビ<rp>(</rp><rt>るび</rt><rp>)</rp></ruby>を<ruby>振<rp>(</rp><rt>ふ</rt><rp>)</rp></ruby>る</span><ruby><span style="color: #993300;">方法</span><rp>(</rp><rt><span style="color: #993300;">ほうほう</span></rt><rp>)</rp></ruby>

・ルビを振る対象文字に対して文法上では、<rb>難読漢字</rb>の定義は必要ですが、 WordPress で登録すると省略されてしまいます。これで問題なく対応できています。

<rp>(</rp>…<rp>)</rp>は、ルビ対応していないブラウザ用の設定です。

・(使用環境に依存しますが)今回、CSSの設定は不要でした。

以下は、「 WordPress の文書に、ルビを振方法をまとめました。(先頭行)」の定義です。
ただし、文字色の設定は外しています。

<ruby>WowdPress<rp>(</rp><rt><span style="color: #003366;">ワードプレス</span></rt><rp><span style="color: #003366;">)</span></rp></ruby></span><span style="color: #003366;"><span style="font-size: 12pt;"> の<ruby>文章<rp>(</rp><rt>ぶんしょう</rt><rp>)</rp></ruby>に</span>、<span style="font-size: 12pt;"><span style="color: #993300;"><ruby>ルビ<rp>(</rp><rt>るび</rt><rp>)</rp></ruby>を<ruby>振<rp>(</rp><rt>ふ</rt><rp>)</rp></ruby>る</span><ruby><span style="color: #993300;">方法</span><rp>(</rp><rt><span style="color: #993300;">ほうほう</span></rt><rp>)</rp></ruby>をまとめました。