WordPress 、HTMLのWeb画面で、文字にルビを振るには…。

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>をまとめました。