ワードプレスでルビを振るには？HTMLタグを使った“ふりがな”の入れ方

※当サイトにはプロモーションが含まれています。

ワードプレスなどで記事を書いていると、難しい漢字や英語に“ふりがな”や“カタカナ”の読み仮名を付けたい場面があると思います。

たとえば、下記のような文章です。

成算も無く猪突猛進ちょとつもうしんするは、これ匹夫ひっぷの勇ゆうにあらずして何ぞや！

にゃのらいと

片倉小十郎景綱の名言だにゃ（独眼竜政宗より）

今回は、プラグインなどを使用せずに、ルビをふる方法について説明します。

“ルビ”を表示させるHTML

HTMLでは、漢字や英語などに“ふりがな”を付けたいときは、<ruby>と<rt>というタグを使います。

<ruby>で“漢字など”と“ふりがな”全体を囲み、“ふりがな”部分を<rt>で指定します。

<ruby>Ny@Tech<rt>にゃテック</rt></ruby>

これを実際に反映させると、以下の様に表示されます。

Ny@Techにゃテック

にゃのらいと

読み仮名が小さくて読みにくいにゃ

英語や韓国語（ハングル）、中国語など、読み仮名を付けたい場面は様々あると思いますが、言語によって文字サイズや形が微妙に異なります。

そのため、同じようにルビを振っても見えづらくなることがあります。

その場合は、HTMLとCSSで調整します。

HTML

<ruby>Ny@Tech<rt class="furigana">にゃテック</rt></ruby>

<rt>タグに、クラスfuriganaを付けて、後からCSSで読み仮名の見た目を調整できるようにします。

CSS

rt.furigana {
font-size: 75%; /* 数値を変更 */
color: #f40000; /* 文字色変更 */
}

上記のCSSで、“文字の大きさ”と“文字の色”を変更しています。

すると、下記のように表示されました。

Ny@Techにゃテック

なお、ワードプレスの場合、追加CSSに上記のCSSを記述する必要があります。

にゃテック

追加CSSへの記述方法はこちらで説明しているにゃ

ワードプレスの編集画面で入力するには？

ワードプレスには、ルビ機能があったと記憶していたのですが、SWELLやGOLD BLOGなど複数のテーマで確認したところ、ビジュアルエディターに“ルビ”の機能が見当たりませんでした。

※すべて、WordPress 6.8.3で確認

そのため、今回は、メニューから「HTMLとして編集」を選ぶ方法を紹介します。

まず、ルビを入れたいブロックの右側にある「︙（縦三点リーダー）」を選択、その中にあるHTMLとして編集を選択します。

HTMLが表示されるので、<ruby>と<rt>というタグを使って記述します。

入力が完了したら、ビジュアル編集に戻ることでルビが入ったことが確認できると思います。

補足：ワードプレスの「追加CSS」の編集箇所について

現在のワードプレステーマにCSSを追加したい場合、左メニューにある、

外観 > カスタマイズ

を選択します。

「追加CSS」を選択します。

追加したいCSSを記述します（コピペして貼り付けます）。

「公開」ボタンを押して保存すれば完了です。

なお、追加CSSに記載する際に、ブラウザ上で全角から半角に変換すると、エンコーディング（文字コード）の関係で、不具合が発生することがあります。

その為、編集する時は、メモ帳などに貼り付けたものを編集をしてからペーストするようにしましょう。

なお、ブラウザにキャッシュが残っていると、前のデザイン（CSS）が表示されたり、デザインが崩れて表示される事があります。

その際は、強制リロード（ハードリフレッシュ）をしてみてください。

各ブラウザごとの、強制リロードの方法は次の通りです。

強制リロードをすることで、ブラウザがキャッシュを無視し、最新のコンテンツを再読み込みします。