WordPressでルビを振る方法｜HTML・プラグイン・ブロックエディター対応を初心者向けに解説
はじめに
WordPressで記事を書いていると、「この漢字にふりがなを付けたい」「専門用語の読み方を補足したい」と感じることがあります。特に人名、地名、難読語、専門用語を扱うブログでは、ルビを振ることで読者が内容を理解しやすくなります。
WordPressでルビを振る方法には、HTMLタグを使う方法、プラグインを使う方法、ブロックエディターやテーマの機能を活用する方法があります。HTMLに慣れていない初心者でも、基本の書き方を覚えれば難しくありません。
この記事では、WordPressでルビを振る方法を初心者向けにわかりやすく解説します。HTMLでの入力方法、プラグインの使い方、ブロックエディターでの注意点、表示が崩れたときの対処法、SEOやアクセシビリティ面での考え方までまとめて紹介します。
1. WordPressでルビを振る方法は主に3つ
WordPressでルビを振る方法は、大きく分けて次の3つです。
1つ目は、HTMLのrubyタグを使う方法です。WordPressの記事内に直接HTMLを入力し、漢字や単語にふりがなを付けます。追加のプラグインが不要で、もっともシンプルな方法です。
2つ目は、ルビ対応プラグインを使う方法です。HTMLを毎回入力するのが面倒な場合や、編集画面から簡単にルビを設定したい場合に向いています。
3つ目は、テーマやブロックエディターの機能を使う方法です。使用しているテーマやブロック拡張プラグインによっては、装飾機能の一部としてルビ入力に対応していることがあります。
1-1. HTMLのrubyタグを使ってルビを振る方法
もっとも基本的な方法は、HTMLのrubyタグを使うやり方です。ルビを振りたい文字を<ruby>で囲み、読み方を<rt>タグの中に入力します。
たとえば「漢字」に「かんじ」というルビを振りたい場合は、次のように書きます。
HTML<ruby>漢字<rt>かんじ</rt></ruby>
WordPressでは、ブロックエディターの「HTMLとして編集」や「カスタムHTML」ブロックを使うことで、このコードを記事内に入力できます。
HTMLを使う方法は、プラグインに依存しないため、長期的に管理しやすい点がメリットです。ワードプレスでルビを最小限使いたい場合は、まずこの方法を覚えておくと便利です。
1-2. ルビ対応プラグインを使う方法
HTMLを直接書くのが不安な場合は、ルビ対応プラグインを使う方法があります。プラグインによっては、ショートコードや専用ボタンを使って簡単にルビを入力できます。
たとえば、編集画面で対象の文字と読み方を指定するだけで、記事上ではルビ付きの文字として表示できるものがあります。HTMLの知識が少ない初心者でも扱いやすいのがメリットです。
ただし、プラグインを使う場合は、WordPress本体やテーマとの相性、更新頻度、表示速度への影響なども確認しておく必要があります。
1-3. テーマやブロックエディターの機能を使う方法
使用しているWordPressテーマやブロック拡張機能によっては、ルビを入力できる装飾機能が用意されている場合があります。
たとえば、高機能なテーマでは、文字装飾メニューの中にルビ設定が含まれていることがあります。また、ブロックエディターを拡張するプラグインによって、ルビ入力用のボタンが追加される場合もあります。
この方法は、普段の編集画面から直感的に操作できるため便利です。ただし、テーマを変更したときに同じように表示されるとは限らないため、長期運用するブログでは注意が必要です。
1-4. 初心者におすすめの方法はどれか
初心者におすすめなのは、まずHTMLのrubyタグを使う方法です。理由は、仕組みがシンプルで、WordPressのテーマやプラグインに依存しにくいからです。
少量のルビであれば、HTMLタグをコピーして使うだけで十分対応できます。難しい設定も不要で、表示確認もしやすいです。
一方で、記事内で頻繁にルビを使う場合や、毎回HTMLを書くのが面倒な場合は、プラグインやテーマ機能を検討するとよいでしょう。ブログの運営スタイルに合わせて選ぶことが大切です。
2. ルビとは？WordPressでふりがなを付けるメリット
ルビとは、漢字や専門用語などの上または横に小さく表示される読み方のことです。日本語では「ふりがな」と呼ばれることもあります。
WordPressの記事にルビを付けると、読者が読み方で迷わずに本文を読み進められます。特に、子ども向けの記事、教育系ブログ、歴史や文学の記事、専門分野の解説記事では役立ちます。
2-1. ルビは漢字や専門用語の読み方を補足する表示
ルビは、読み方を補足するための表示です。たとえば「為替」に「かわせ」、「約款」に「やっかん」、「汎用」に「はんよう」といった読み方を付けることで、読者が迷わず理解できます。
WordPressでルビを使うと、本文の流れを大きく崩さずに読み方を補足できます。括弧書きで「為替（かわせ）」と書く方法もありますが、ルビを使うと見た目がすっきりします。
2-2. 難読語・人名・地名・専門用語を読みやすくできる
ルビが特に役立つのは、難読語、人名、地名、専門用語を扱う場面です。
たとえば、歴史上の人物名、地域特有の地名、医療や法律に関する言葉、ITや金融の専門用語などは、読者によって読めるかどうかが分かれます。
読み方がわからない言葉が続くと、読者は内容を理解しづらくなります。必要な箇所にルビを振ることで、初心者やその分野に詳しくない人にもやさしい記事になります。
2-3. 読者の離脱防止やユーザビリティ向上につながる
読めない言葉が多い記事は、読者にストレスを与えます。意味がわからないだけでなく、読み方がわからないことで文章の流れが止まってしまうためです。
適切にルビを振ると、読者はスムーズに読み進められます。結果として、記事の理解度が上がり、ページからの離脱を防ぎやすくなります。
ワードプレスでルビを使う目的は、単に見た目を装飾することではありません。読者にとって読みやすい記事にすることが大きな目的です。
2-4. ルビを使いすぎると読みにくくなる点に注意
ルビは便利ですが、使いすぎると逆に読みにくくなります。すべての漢字にルビを振ると、画面上の情報量が増え、本文がごちゃついて見えることがあります。
特にスマホでは画面幅が狭いため、ルビが多いと行間が詰まったり、文字が小さく見えたりする場合があります。
ルビを振るのは、読者が読み間違えやすい言葉、初めて登場する専門用語、重要な固有名詞などに絞るのがおすすめです。
3. HTMLでWordPressにルビを振る方法
WordPressでルビを振る基本は、HTMLのrubyタグを使う方法です。HTMLと聞くと難しく感じるかもしれませんが、ルビの書き方はとてもシンプルです。
一度基本の形を覚えておけば、コピーして単語と読み方を変えるだけで使えます。
3-1. rubyタグ・rtタグ・rpタグの基本構造
ルビを表示するHTMLでは、主に次のタグを使います。
rubyタグは、ルビを振る対象全体を囲むタグです。rtタグは、実際に表示する読み方を指定するタグです。rpタグは、ルビに対応していない環境で括弧を表示するために使われます。
基本形は次のとおりです。
HTML<ruby>対象の文字<rt>読み方</rt></ruby>
より丁寧に書く場合は、rpタグも含めます。
HTML<ruby>対象の文字<rp>（</rp><rt>読み方</rt><rp>）</rp></ruby>
たとえば「WordPress」に「ワードプレス」とルビを振る場合は、次のように書きます。
HTML<ruby>WordPress<rp>（</rp><rt>ワードプレス</rt><rp>）</rp></ruby>
現在の多くのブラウザではrubyタグに対応していますが、古い環境への配慮としてrpタグを入れておくと安心です。
3-2. ブロックエディターでHTMLとして入力する手順
ブロックエディターでルビを振る場合は、段落ブロックをHTMLとして編集します。
まず、WordPressの投稿編集画面を開きます。次に、ルビを振りたい文章を入力します。対象のブロックのメニューを開き、「HTMLとして編集」を選択します。
その状態で、ルビを振りたい文字にrubyタグを追加します。
HTMLこれは<ruby>漢字<rt>かんじ</rt></ruby>の読み方を説明する文章です。
入力後、通常の表示に戻すと、本文内にルビが表示されます。公開前には必ずプレビューで確認しましょう。
3-3. クラシックエディターでHTMLを入力する手順
クラシックエディターを使っている場合は、編集画面の「テキスト」タブに切り替えてHTMLを入力します。
「ビジュアル」タブのまま入力すると、HTMLタグが文字として表示されたり、自動的に変換されたりすることがあります。そのため、ルビを入力するときは「テキスト」タブで作業するのが基本です。
たとえば、次のように入力します。
HTML<ruby>難読語<rt>なんどくご</rt></ruby>には、必要に応じてふりがなを付けましょう。
入力後に「ビジュアル」タブへ戻し、表示が崩れていないか確認してください。
3-4. ルビ表示のサンプルコード
WordPressで使えるルビのサンプルコードをいくつか紹介します。
漢字にふりがなを付ける場合は、次のように書きます。
HTML<ruby>為替<rt>かわせ</rt></ruby>
人名にルビを振る場合は、次のように書きます。
HTML<ruby>夏目漱石<rt>なつめそうせき</rt></ruby>
地名にルビを振る場合は、次のように書きます。
HTML<ruby>難波<rt>なんば</rt></ruby>
英語やカタカナ語の読み方を補足したい場合にも使えます。
HTML<ruby>WordPress<rt>ワードプレス</rt></ruby>
古いブラウザへの配慮を入れる場合は、次のようにrpタグを加えます。
HTML<ruby>約款<rp>（</rp><rt>やっかん</rt><rp>）</rp></ruby>
3-5. HTMLでルビを振るときの注意点
HTMLでルビを振るときは、タグの閉じ忘れに注意しましょう。<ruby>を開いたら</ruby>で閉じる、<rt>を開いたら</rt>で閉じる必要があります。
また、ルビを振る範囲が長すぎると読みにくくなることがあります。文章全体にルビを振るのではなく、単語単位で指定するのが基本です。
さらに、WordPressの編集画面でビジュアル編集とHTML編集を切り替えると、環境によってはタグが意図せず変更される場合があります。公開前には必ずプレビューで表示を確認しましょう。
4. プラグインでWordPressにルビを振る方法
HTMLを直接入力するのが面倒な場合は、ルビ用プラグインを使う方法があります。プラグインを使うと、ショートコードや専用ボタンによって、より簡単にルビを入力できる場合があります。
特に、記事内で頻繁にふりがなを使うサイトでは、プラグインの導入によって作業効率が上がります。
4-1. ルビ用プラグインを使うメリット
ルビ用プラグインを使うメリットは、HTMLの入力ミスを減らせることです。毎回rubyタグやrtタグを書く必要がないため、初心者でも扱いやすくなります。
また、プラグインによっては、ボタン操作でルビを設定できたり、ショートコードで読み方を指定できたりします。複数人でブログを運営している場合も、ルールを統一しやすくなります。
記事数が多いサイトや、教育系・学習系のコンテンツを扱うサイトでは、プラグインを活用するメリットが大きいでしょう。
4-2. プラグイン導入前に確認すべきポイント
プラグインを導入する前に、いくつか確認しておきたいポイントがあります。
まず、使用中のWordPressバージョンに対応しているかを確認しましょう。長期間更新されていないプラグインは、不具合やセキュリティ面で不安が残る場合があります。
次に、使っているテーマや他のプラグインとの相性も重要です。特にブロックエディターを拡張するプラグインを複数使っている場合、編集画面で競合が起きる可能性があります。
さらに、プラグインを停止または削除したときに、ルビの表示がどうなるかも確認しておきましょう。ショートコード型のプラグインでは、削除後にショートコードだけが本文に残る場合があります。
4-3. プラグインのインストール手順
WordPressでプラグインをインストールする基本手順は次のとおりです。
管理画面にログインし、左メニューから「プラグイン」へ進みます。「新規追加」をクリックし、検索窓に「ルビ」「ruby」「ふりがな」などのキーワードを入力します。
目的に合うプラグインが見つかったら、「今すぐインストール」をクリックします。インストール後、「有効化」をクリックすると使用できるようになります。
有効化したあとは、設定画面や投稿編集画面にルビ入力用の機能が追加されているか確認しましょう。
4-4. プラグインを使ってルビを入力する手順
プラグインによって操作方法は異なりますが、一般的には次のような流れでルビを入力します。
まず、投稿編集画面でルビを振りたい文字を選択します。次に、プラグインが追加したボタンや入力欄を使って、読み方を入力します。保存または挿入を行うと、本文にルビ用のコードやショートコードが追加されます。
たとえば、ショートコード形式の場合は次のような形になることがあります。
HTML[ruby text="漢字" yomi="かんじ"]
実際の書き方はプラグインによって異なるため、導入したプラグインの説明を確認してください。
4-5. プラグインを使う場合のデメリットと注意点
プラグインは便利ですが、デメリットもあります。
まず、プラグインに依存するため、将来的に更新が止まった場合やWordPress本体の仕様変更があった場合に、正常に使えなくなる可能性があります。
また、ショートコードでルビを表示するタイプの場合、プラグインを削除するとルビが表示されず、ショートコードだけが残ることがあります。長期的に記事を管理するなら、プラグイン停止時の表示も事前に確認しておくことが大切です。
さらに、プラグインを増やしすぎると、サイトの表示速度や管理のしやすさに影響する場合があります。ルビ機能だけのために導入する必要があるか、HTMLで対応できないかを検討しましょう。
5. ブロックエディターでルビを振る方法
WordPressのブロックエディターでも、HTMLを使えばルビを振ることができます。標準の装飾ボタンとしてルビ専用機能が用意されていない場合でも、HTML編集やカスタムHTMLブロックを使えば対応可能です。
ここでは、ブロックエディターでルビを使う具体的な方法を解説します。
5-1. ブロックエディターでHTML編集に切り替える方法
ブロックエディターで段落内にルビを入れるには、対象のブロックをHTML編集に切り替えます。
投稿編集画面でルビを入れたい段落ブロックを選択し、ブロックのオプションメニューを開きます。そこから「HTMLとして編集」を選択します。
HTML編集画面に切り替わったら、ルビを振りたい文字にrubyタグを追加します。
HTML<ruby>東京<rt>とうきょう</rt></ruby>の観光情報を紹介します。
入力が終わったら、通常のビジュアル表示に戻し、正しく表示されているか確認します。
5-2. カスタムHTMLブロックを使ってルビを表示する方法
カスタムHTMLブロックを使う方法もあります。これは、HTMLコードをそのまま入力したい場合に便利です。
ブロック追加メニューから「カスタムHTML」を選択し、次のように入力します。
HTML<p><ruby>初心者<rt>しょしんしゃ</rt></ruby>にもわかりやすく解説します。</p>
カスタムHTMLブロックでは、HTMLコードをそのまま管理しやすいのがメリットです。ただし、通常の段落ブロックと比べると、ビジュアル編集がしにくくなる場合があります。
短い文章や一部の装飾だけであれば段落ブロックのHTML編集、HTMLをまとめて管理したい場合はカスタムHTMLブロックを使うとよいでしょう。
5-3. 段落ブロック内でルビを使う場合の注意点
段落ブロック内でルビを使う場合は、ブロック全体のHTML構造を崩さないように注意しましょう。
たとえば、ルビを振りたい単語だけをrubyタグで囲み、段落全体を不必要にHTMLタグで囲みすぎないようにします。
HTMLこれは<ruby>専門用語<rt>せんもんようご</rt></ruby>を解説する記事です。
また、ビジュアル編集に戻したあとに再編集すると、環境によってはHTMLが変更されることがあります。編集後はプレビューで確認する習慣をつけましょう。
5-4. テーマ側にルビ機能がある場合の使い方
使用しているテーマによっては、文字装飾機能の一部としてルビ入力に対応していることがあります。
この場合は、投稿編集画面で文字を選択し、テーマ独自の装飾メニューからルビを設定します。HTMLを直接書かなくても入力できるため、初心者には使いやすい方法です。
ただし、テーマ独自機能を使っている場合、別のテーマに変更すると同じ表示が維持されない可能性があります。テーマ変更の予定がある場合は、ルビの保存形式を確認しておくと安心です。
5-5. 表示崩れがないかプレビューで確認する方法
ルビを入力したら、必ず公開前にプレビューで確認しましょう。
確認すべきポイントは、ルビが正しく対象の文字の上に表示されているか、文字サイズが小さすぎないか、行間が詰まりすぎていないか、スマホ表示でも読みやすいかです。
WordPressの編集画面では問題なく見えても、実際の公開ページではテーマのCSSが影響して表示が変わることがあります。パソコンとスマホの両方で確認するのがおすすめです。
6. WordPressでルビが表示されない・崩れるときの対処法
WordPressでルビを入力したのに表示されない、または表示が崩れる場合は、いくつかの原因が考えられます。
多くの場合、HTMLタグの入力ミス、編集画面でのタグの変換、テーマやCSSの影響、プラグインの競合などが原因です。順番に確認していきましょう。
6-1. HTMLタグの入力ミスを確認する
まず確認したいのは、HTMLタグの入力ミスです。
<ruby>、<rt>、</rt>、</ruby>の閉じ忘れがあると、正しく表示されないことがあります。
正しい例は次のとおりです。
HTML<ruby>漢字<rt>かんじ</rt></ruby>
間違った例として、閉じタグが不足しているケースがあります。
HTML<ruby>漢字<rt>かんじ</ruby>
このようなミスがあると、ルビだけでなく周囲の文章の表示にも影響する場合があります。表示がおかしいときは、まずコードを見直しましょう。
6-2. ビジュアル編集でタグが消えていないか確認する
WordPressの編集画面でビジュアル編集とHTML編集を切り替えると、入力したタグが変更されたり、意図せず消えたりする場合があります。
特に、クラシックエディターで「ビジュアル」タブを中心に編集している場合は注意が必要です。ルビのHTMLを入力するときは「テキスト」タブを使い、保存後に表示を確認しましょう。
ブロックエディターの場合も、段落ブロックを再編集した際にHTML構造が変わっていないか確認してください。
6-3. テーマやCSSの影響を確認する
ルビが表示されていても、位置がずれる、文字が小さすぎる、行間が崩れるといった場合は、テーマのCSSが影響している可能性があります。
テーマによっては、本文の行間や文字サイズが独自に設定されており、ルビ表示と相性が悪いことがあります。
この場合は、追加CSSでrubyやrtのスタイルを調整すると改善できる場合があります。CSSの調整方法は後ほど紹介します。
6-4. プラグイン同士の競合を確認する
プラグインを使ってルビを表示している場合、他のプラグインとの競合が原因で表示が崩れることがあります。
特に、ブロックエディターを拡張するプラグイン、文字装飾を追加するプラグイン、高速化プラグイン、HTMLを最適化するプラグインなどは影響する可能性があります。
原因を調べるときは、最近追加したプラグインを一時的に停止して表示を確認します。ただし、本番サイトで作業する場合は、事前にバックアップを取るか、テスト環境で確認するのが安全です。
6-5. スマホ表示でルビが読みづらくないか確認する
パソコンではきれいに見えても、スマホではルビが読みづらいことがあります。
スマホは画面幅が狭いため、ルビを多用すると行間が詰まったり、本文のリズムが悪くなったりします。また、ルビの文字サイズが小さすぎると、読者が読みにくく感じることもあります。
WordPressでルビを使うときは、公開前にスマホ表示を必ず確認しましょう。特に、見出し付近や文章の冒頭など、読者が最初に目にする部分は丁寧にチェックすることが大切です。
7. ルビを見やすくするCSS調整
ルビの見た目は、CSSで調整できます。テーマによって表示が少し崩れる場合や、ルビの文字サイズを変えたい場合は、追加CSSを使って整えるとよいでしょう。
ただし、CSSを変更するとサイト全体のルビ表示に影響するため、調整後は複数の記事で確認することが大切です。
7-1. ルビの文字サイズを調整する
ルビの文字サイズは、rtに対してCSSを指定することで調整できます。
CSSrt {
font-size: 0.6em;
}
0.6emは、本文の文字サイズに対して60％程度の大きさにする指定です。小さすぎると読みづらくなるため、必要に応じて0.65emや0.7emに調整してもよいでしょう。
本文の雰囲気やテーマの文字サイズに合わせて、自然に見える大きさを選ぶことが大切です。
7-2. ルビと本文の間隔を調整する
ルビと本文の間隔が詰まりすぎている場合は、rubyやrtに対して余白や行間を調整します。
CSSruby {
line-height: 1.8;
}
rt {
line-height: 1;
}
行間を少し広げることで、ルビが本文に重なりにくくなります。ただし、行間を広げすぎると文章全体が間延びして見えるため、バランスを見ながら調整しましょう。
7-3. スマホでも読みやすい表示にする
スマホ表示では、ルビが小さくなりすぎないように注意が必要です。必要に応じて、メディアクエリを使ってスマホ向けの表示を調整します。
CSS@media screen and (max-width: 767px) {
rt {
font-size: 0.65em;
}
ruby {
line-height: 1.9;
}
}
スマホでは本文の行間を少し広めにしたほうが、ルビ付きの文章を読みやすくなる場合があります。実際の表示を確認しながら調整してください。
7-4. CSSを追加する場所と注意点
WordPressでCSSを追加する場合は、管理画面の「外観」から「カスタマイズ」へ進み、「追加CSS」に入力する方法が一般的です。
テーマによっては、独自のCSS入力欄が用意されている場合もあります。また、子テーマを使っている場合は、子テーマのスタイルシートに追加する方法もあります。
CSSを追加する前には、現在の設定をコピーしてバックアップしておくと安心です。誤ったCSSを入力すると、ルビ以外の表示に影響することもあるため、変更後は必ずプレビューで確認しましょう。
8. WordPressでルビを使うときのSEO・アクセシビリティの考え方
ワードプレスでルビを使うときは、SEOやアクセシビリティの観点も意識しておくことが大切です。
ルビは検索順位を直接上げるための機能ではありませんが、読者にとって読みやすい記事を作るうえで役立ちます。結果として、ユーザー体験の改善につながる可能性があります。
8-1. ルビは検索順位を直接上げるための機能ではない
ルビを振ったからといって、それだけで検索順位が直接上がるわけではありません。SEOで重要なのは、検索意図に合った内容、わかりやすい構成、読みやすい文章、信頼できる情報などです。
ルビは、あくまで読者の理解を助けるための補助機能です。重要キーワードに無理やりルビを振ったり、不自然にキーワードを増やしたりする必要はありません。
「ワードプレス ルビ」のような検索キーワードを意識する場合も、本文の中で自然に使うことが大切です。
8-2. 読みやすさの改善はユーザー体験向上につながる
適切なルビは、読者の読みやすさを高めます。難しい言葉の読み方がすぐにわかれば、読者は本文の内容に集中できます。
読みやすい記事は、滞在時間や回遊率の改善につながる可能性があります。読者がストレスなく読み進められる記事は、結果的にサイト全体の評価にも良い影響を与えやすくなります。
ただし、SEOのためにルビを使うのではなく、読者のために使うという考え方が重要です。
8-3. 読み上げ環境を考慮して過剰なルビを避ける
アクセシビリティの観点では、スクリーンリーダーなどの読み上げ環境も考慮する必要があります。
ルビの読み上げ方は、環境によって異なる場合があります。ルビを過剰に使うと、読み上げが不自然になったり、かえって内容を理解しにくくなったりすることがあります。
すべての漢字にルビを振るのではなく、本当に補足が必要な言葉に絞ることが大切です。
8-4. 重要キーワードへの不自然なルビ使用は避ける
SEOを意識するあまり、重要キーワードに不自然なルビを振るのは避けましょう。
たとえば、同じキーワードに何度もルビを付けたり、読み方として不自然な言葉を入れたりすると、読者に違和感を与えます。
ルビはあくまで読み方を補助するためのものです。検索エンジン向けではなく、読者が読みやすくなるかどうかを基準に使いましょう。
9. WordPressのルビに関するよくある質問
ここでは、WordPressでルビを使うときによくある質問に答えます。
初心者がつまずきやすいポイントを確認しておくことで、実際に記事へルビを入れるときに迷いにくくなります。
9-1. WordPressに標準でルビ機能はある？
WordPressの標準機能には、ルビ専用の装飾ボタンが用意されていない場合があります。
ただし、HTMLのrubyタグを使えば、WordPressの記事内でもルビを表示できます。ブロックエディターでは「HTMLとして編集」や「カスタムHTML」ブロックを使うことで対応できます。
テーマやプラグインによっては、編集画面から簡単にルビを入力できる機能が追加されることもあります。
9-2. ルビはスマホでも表示される？
多くのスマホブラウザでは、HTMLのrubyタグによるルビ表示に対応しています。そのため、正しくHTMLを書けばスマホでも表示されます。
ただし、テーマのCSSや画面幅の影響で、ルビが小さく見えたり、行間が詰まったりする場合があります。公開前には、スマホ表示のプレビューを確認しましょう。
9-3. HTMLが苦手でもルビは振れる？
HTMLが苦手でも、基本の形をコピーして使えばルビを振ることはできます。
たとえば、次のコードの「漢字」と「かんじ」の部分だけを変更すれば使えます。
HTML<ruby>漢字<rt>かんじ</rt></ruby>
毎回HTMLを書くのが不安な場合は、ルビ対応プラグインやテーマの装飾機能を使う方法もあります。まずは短い単語で試してみるとよいでしょう。
9-4. ルビ用プラグインを削除すると表示はどうなる？
プラグインの種類によって異なります。
HTMLのrubyタグとして保存されるタイプであれば、プラグインを削除してもルビ表示が残る可能性があります。一方、ショートコードで表示するタイプの場合、プラグインを削除するとショートコードだけが本文に残り、ルビとして表示されなくなることがあります。
プラグインを導入する前に、削除後の表示がどうなるかを確認しておくと安心です。
9-5. すべての漢字にルビを振ったほうがいい？
基本的には、すべての漢字にルビを振る必要はありません。
ルビが多すぎると、本文が読みにくくなったり、スマホ表示で見づらくなったりすることがあります。読者が読み間違えやすい言葉、難読語、人名、地名、専門用語などに絞って使うのがおすすめです。
読みやすさを高めるためのルビが、かえって読みにくさの原因にならないように注意しましょう。
まとめ
WordPressでルビを振る方法には、HTMLのrubyタグを使う方法、ルビ対応プラグインを使う方法、テーマやブロックエディターの機能を使う方法があります。
少量のルビであれば、HTMLのrubyタグを使う方法がシンプルでおすすめです。たとえば、次のように書くだけでルビを表示できます。
HTML<ruby>漢字<rt>かんじ</rt></ruby>
HTMLが苦手な場合や、頻繁にルビを使う場合は、プラグインやテーマ機能を活用すると作業しやすくなります。ただし、プラグインへの依存やテーマ変更時の表示崩れには注意が必要です。
ルビは、検索順位を直接上げるための機能ではありません。しかし、難読語や専門用語を読みやすくすることで、読者の理解を助け、ユーザー体験の向上につながります。
ワードプレスでルビを使うときは、必要な箇所にだけ自然に入れることが大切です。読者にとって読みやすい記事を意識しながら、HTML、プラグイン、ブロックエディターの中から自分のサイトに合った方法を選びましょう。