どうやったらフリガナ（ルビ）を入れられるの？
プラグインを使わずにフリガナ（ルビ）って入れられるの？
こんな疑問を持っていないでしょうか？
フリガナ（ルビ）とは、大谷侑暉と「文字の上にふる文字」のことです。
もしも、フリガナ（ルビ）を入れなかったら、大谷侑暉（おおたにゆうき）と表現しなければなりません。
正直、ちょっと読みにくいですよね？…
このように、フリガナ（ルビ）を使いこなすことができれば、表現の幅を一気に広がり、ユーザビリティ向上へと繋がります。
なので、ぜひこの記事を読んでフリガナ（ルビ）を使いこなせるようにしましょう！
というわけで本日は、
- フリガナ（ルビ）をプラグインで方法
- フリガナ（ルビ）をコードでふる方法
- フリガナ（ルビ）の注意点
というテーマでブログを執筆していこうと思います。
オータニが使うおすすめテーマ
目次
フリガナ（ルビ）をプラグインでふる方法
では、ここではプラグインを使ってルビをふる方法について解説していきますね。
プラグイン：WP-Yomigana
インストールするだけで、フリガナ（ルビ）が入れられるようになるプラグイン
プラグインでルビをふる際には、WP-Yomiganaというプラグインを使いましょう。
非常にシンプルで使いやすいです。
WP-Yomiganaのインストール手順
分かる人は飛ばしてOK
- 新規追加
↓ - 検索
↓ - インストール
手順１：新規追加
まずは、WordPressの管理画面から、「プラグイン→新規追加」を選択します。
手順２：検索
次に、ページ右端の検索窓に「WP-Yomigana」と入力しましょう。
手順３：インストール
▼▼▼▼▼▼
最後に、インストール&有効化しましょう。
※デフォルトで使うことができるので、特に設定の必要なし！
WP-Yomiganaの使い方
では、ここからはWP-Yomiganaの使い方について解説していきます。
- 編集画面
↓ - テキストを選択
↓ - ルビを入力
手順１：編集画面
、WordPressの編集画面へいきます。
手順２：テキストを選択
次に、ルビをふりたいテキストを選択します。
手順３：ルビを入力
最後に、「ブロック・文章編集ツール」からルビを選択します。
▼▼▼▼▼▼
すると、ルビを入力する画面が出現しますので、そこにテキストを入力します。
そして、OKボタンを押せばルビの入力が完了となります。
フリガナ（ルビ）をコードでふる方法
では、ここからはルビをHTMLというコードで入力する方法について解説していきますね。
コードで入力するメリット
結論、プラグインよりもコードでルビをふることをオススメします。
というのも、プラグインを入れすぎてしまうと、サイトスピードが遅くなってしまうからです。
サイトスピードは、ユーザビリティにも影響を与えるので、極力プラグインは入れない方が得策と言えます。
もちろん、プラグインを使わないと、ルビ入れの作業が多少面倒ではありますが、サイトスピードが落ちるくらいであれば、プラグインは使わない方がいいでしょう。
もしも、サイトスピードを気にしている方は、『WP Rocketとは｜サイトスピードを上げる最強のプラグイン【→導入必須】』を参考にしてください。
ルビのコード
<ruby>文字<rt>カナ</rt></ruby>上記コードをコードエディタで入力することで、ルビをふることができます。
※コードエディタについては後ほど解説します
ユーザー辞書を使う
しかし、ルビをふる度にいちいち上記のコードを入力するのって面倒ですよね？
なので、上記のコードを「ユーザー辞書」に登録しておきましょう。
ユーザー辞書とは、あるキーワードを入力することで、目的のテキストを呼び起こすころができる時短ツールです。
たとえば、「お」と入力したら、予測変換に「大谷侑暉」と出力されてくるイメージです。
※「ユーザー辞書」は、MacBookでの呼び名です。もちろん、Windowsにも同じような機能が搭載されています
手順１
手順２
左軸の「入力」には、変換テキストを呼び起こすのに必要なテキストを入力し、右軸の「変換」には、変換したいテキストを入力しましょう。
| 入力 | 変換 |
| るび | <ruby>文字<rt>カナ</rt></ruby> |
↑これを真似すればOK
コードを使ってルビをふってみる！
では、実際に、コードを使ってルビをふっていきましょう。
- テキストの選定
↓ - コードエディタへ
↓ - テキストを探す
↓ - ルビを入力
手順１：テキストの選定
まずは、ルビをふりたいテキストを決めます。
手順２：コードエディタへ
次に、ビジュアルエディタからコードエディタを開きます。
※MacBookの場合、コードエディタは「command＋option＋shift＋M」でも開けます
手順３：テキスト探す
次に、「command＋F」を使って、ルビをふりたいテキストを探します。
手順４：ルビを入力
最後に、ルビをふりたいテキストの前に「<ruby>文字<rt>カナ</rt></ruby>」を挿入しましょう。
※もちろん、ユーザー辞書で呼び起こしましょうね？
そして、「疑問」というテキストを消去し、新しく「文字」のところに「疑問」、「カナ」のところに「ぎもん」と入力します。
すると、ルビがふられたテキストの完成です。
ルビの注意点
- 見出しにルビは入れない
- ルビは使いすぎない
注意点１：見出しにルビは入れない
見出しのテキストには、ルビを入れないようにしましょう。
なぜなら、記事の目次がおかしなことになってしまうからです。
たとえば、「ルビの注意点」という見出しにルビを入れると、目次のところで下記のようになってしまいます。
▼▼▼▼▼▼
プラグインの場合は、このようにはなりませんのでご安心を
注意点２：ルビは使いすぎない
ルビを使いすぎるのはやめましょう。
なぜなら、ルビがありすぎると、読みにくくなるからです。
〜〜〜〜〜〜注意〜〜〜〜〜〜
〜〜〜〜〜〜〜〜〜〜〜注意〜
注意〜〜〜〜〜〜〜〜〜〜〜〜
なので、基本的に最初のテキストだけでOKです。
まとめ：WordPressでフリガナ（ルビ）を作る方法
では最後にまとめましょう。
本日は、
- フリガナ（ルビ）をプラグインで方法
- フリガナ（ルビ）をコードでふる方法
- フリガナ（ルビ）の注意点
というテーマでブログを執筆しました。
ルビを使いこなすことで、記事の表現の幅が一気に広がります。
プラグインの場合は簡単ですが、もしもサイトスピードを落とさずにルビをふりたいという場合は、ぜひ何度も練習して習得するようにしましょう。
