オープンチャットを始めました

WordPressでフリガナ(ルビ)を作る方法【→2つの方法を紹介】

どうやったらフリガナ(ルビ)を入れられるの?
プラグインを使わずにフリガナ(ルビ)って入れられるの?

こんな疑問を持っていないでしょうか?

フリガナ(ルビ)とは、大谷侑暉おおたにゆうきと「文字の上にふる文字」のことです。

もしも、フリガナ(ルビ)を入れなかったら、大谷侑暉(おおたにゆうき)と表現しなければなりません。

正直、ちょっと読みにくいですよね?…

このように、フリガナ(ルビ)を使いこなすことができれば、表現の幅を一気に広がり、ユーザビリティ向上へと繋がります。

なので、ぜひこの記事を読んでフリガナ(ルビ)を使いこなせるようにしましょう!

というわけで本日は、

本日のテーマ
  1. フリガナ(ルビ)をプラグインで方法
  2. フリガナ(ルビ)をコードでふる方法
  3. フリガナ(ルビ)の注意点

というテーマでブログを執筆していこうと思います。

オータニが使うおすすめテーマ

フリガナ(ルビ)をプラグインでふる方法

では、ここではプラグインを使ってルビをふる方法について解説していきますね。

プラグイン:WP-Yomigana

WP-Yomigana

インストールするだけで、フリガナ(ルビ)が入れられるようになるプラグイン

プラグインでルビをふる際には、WP-Yomiganaというプラグインを使いましょう。

非常にシンプルで使いやすいです。

WP-Yomiganaのインストール手順

分かる人は飛ばしてOK

インストール手順
  1. 新規追加
  2. 検索
  3. インストール

手順1:新規追加

WordPressの管理画面

まずは、WordPressの管理画面から、「プラグイン→新規追加」を選択します。

手順2:検索

検索窓の画像

次に、ページ右端の検索窓に「WP-Yomigana」と入力しましょう。

手順3:インストール

新規プラグインの追加画面

▼▼▼▼▼▼

新規プラグインの追加画面

最後に、インストール&有効化しましょう。

※デフォルトで使うことができるので、特に設定の必要なし!

WP-Yomiganaの使い方

では、ここからはWP-Yomiganaの使い方について解説していきます。

使用手順
  1. 編集画面
  2. テキストを選択
  3. ルビを入力

手順1:編集画面

まずは、WordPressの編集画面へいきます。

手順2:テキストを選択

テキストの選択画面

次に、ルビをふりたいテキストを選択します。

手順3:ルビを入力

WordPressの編集画面

最後に、「ブロック・文章編集ツール」からルビを選択します。

▼▼▼▼▼▼

ルビの入力画面

すると、ルビを入力する画面が出現しますので、そこにテキストを入力します。

そして、OKボタンを押せばルビの入力が完了となります。

フリガナ(ルビ)をコードでふる方法

では、ここからはルビをHTMLというコードで入力する方法について解説していきますね。

コードで入力するメリット

結論、プラグインよりもコードでルビをふることをオススメします。

というのも、プラグインを入れすぎてしまうと、サイトスピードが遅くなってしまうからです。

サイトスピードは、ユーザビリティにも影響を与えるので、極力プラグインは入れない方が得策と言えます。

もちろん、プラグインを使わないと、ルビ入れの作業が多少面倒ではありますが、サイトスピードが落ちるくらいであれば、プラグインは使わない方がいいでしょう。

もしも、サイトスピードを気にしている方は、WP Rocketとは|サイトスピードを上げる最強のプラグイン【→導入必須】を参考にしてください。

ルビのコード

<ruby>文字<rt>カナ</rt></ruby>

上記コードをコードエディタで入力することで、ルビをふることができます。

コードエディタについては後ほど解説します

ユーザー辞書を使う

しかし、ルビをふる度にいちいち上記のコードを入力するのって面倒ですよね?

なので、上記のコードを「ユーザー辞書」に登録しておきましょう。

ユーザー辞書とは、あるキーワードを入力することで、目的のテキストを呼び起こすころができる時短ツールです。

たとえば、「お」と入力したら、予測変換に「大谷侑暉」と出力されてくるイメージです。

「ユーザー辞書」は、MacBookでの呼び名です。もちろん、Windowsにも同じような機能が搭載されています

手順1

MacBookのメニューバーから

手順2

ユーザー辞書の登録画面

左軸の「入力」には、変換テキストを呼び起こすのに必要なテキストを入力し、右軸の「変換」には、変換したいテキストを入力しましょう。

入力変換
るび<ruby>文字<rt>カナ</rt></ruby>

↑これを真似すればOK

コードを使ってルビをふってみる!

では、実際に、コードを使ってルビをふっていきましょう。

ルビをふる手順
  1. テキストの選定
  2. コードエディタへ
  3. テキストを探す
  4. ルビを入力

手順1:テキストの選定

まずは、ルビをふりたいテキストを決めます。

手順2:コードエディタへ

記事の編集画面

次に、ビジュアルエディタからコードエディタを開きます。

MacBookの場合、コードエディタは「command+option+shift+M」でも開けます

手順3:テキスト探す

コードエディタの画面

次に、「command+F」を使って、ルビをふりたいテキストを探します。

手順4:ルビを入力

コードエディタの画面

最後に、ルビをふりたいテキストの前に「<ruby>文字<rt>カナ</rt></ruby>」を挿入しましょう。

もちろん、ユーザー辞書で呼び起こしましょうね?

そして、「疑問」というテキストを消去し、新しく「文字」のところに「疑問」、「カナ」のところに「ぎもん」と入力します。

すると、ルビがふられたテキストの完成です。

ルビの注意点

注意点
  1. 見出しにルビは入れない
  2. ルビは使いすぎない

注意点1:見出しにルビは入れない

見出しのテキストには、ルビを入れないようにしましょう。

なぜなら、記事の目次がおかしなことになってしまうからです。

たとえば、「ルビの注意点」という見出しにルビを入れると、目次のところで下記のようになってしまいます。

▼▼▼▼▼▼

本記事の目次

プラグインの場合は、このようにはなりませんのでご安心を

注意点2:ルビは使いすぎない

ルビを使いすぎるのはやめましょう。

なぜなら、ルビがありすぎると、読みにくくなるからです。

たとえば

〜〜〜〜〜〜注意ちゅういてん〜〜〜〜〜〜

〜〜〜〜〜〜〜〜〜〜〜注意ちゅういてん

注意ちゅういてん〜〜〜〜〜〜〜〜〜〜〜〜

なので、基本的に最初のテキストだけでOKです。

まとめ:WordPressでフリガナ(ルビ)を作る方法

では最後にまとめましょう。

本日は、

本日のテーマ
  1. フリガナ(ルビ)をプラグインで方法
  2. フリガナ(ルビ)をコードでふる方法
  3. フリガナ(ルビ)の注意点

というテーマでブログを執筆しました。

ルビを使いこなすことで、記事の表現の幅が一気に広がります。

プラグインの場合は簡単ですが、もしもサイトスピードを落とさずにルビをふりたいという場合は、ぜひ何度も練習して習得するようにしましょう。

シェア嬉しい!

コメントを残す

メールアドレスが公開されることはありません。