ワードプレスで記事を書いている時に、難しい漢字や英語に対して振り仮名やカタカナ表記（またはその逆で、振り仮名やカタカナに対して英語表記）、映画のタイトルなどで原題に対して邦題、邦題に対して元のタイトルを、元の文字の上に表示したい！などの場合があります。
こうした「ある文字の上に注釈のように読み方たなどを付ける」ことを「ルビを振る」などといいますが、このルビを振るのは、
- ちょっと手間が増える
- 文字が小さくて見づらい
- 行の高さが変わる
といったこともあり、通常はカッコ書きで、その文字列の後ろに注釈のように読み方をつけたりします。
それでも、文字の上に読み方を表示したいんだ！という場合もあり、ここではこの「ルビの簡単な付け方」や、そのための便利なプラグイン、また、ルビの文字の色や大きさを変えるデザインカスタマイズの方法を見てみましょう。
Contents
ルビを振った例
まずはルビを振るとどうなるか、実際の例を見てみましょう。
例えば、以下の文。
- 映画の原題と邦題で結構違うかも、といった例を挙げてみると、例えば「スタンド・バイ・ミー」（The Body）。他にも「FROZEN」（アナと雪の女王）、「愛と青春の旅だち」（An Officer And A Gentleman）や「UP」（カールじいさんの空飛ぶ家）などもありますね。
これをカッコ書きの代わりにルビを振るとどうなるか、といえば、以下のような感じです。
- 映画の原題と邦題で結構違うかも、といった例を挙げてみると、例えば「スタンド・バイ・ミー」。他にも、「FROZEN」、「愛と青春の旅だち」や「Up」などもありますね。
元の文字列とルビ（振り仮名）の文字列の長さ、使っているテーマでどのようにルビの文字列のフォントの大きさなどが指定されているか、などで見かけは変わると思いますが、このブログで使用しているテーマではこのような表示になります。
後で見かけが良くなるようにデザインカスタマイズもしてみますが、まずは、このルビの付け方を見て行きましょう。
ルビを付ける方法（HTML直接編）
ではまず、HTMLで直接ルビを振る方法からです。
ある「単語」に対して「読み」としてルビを振りたい場合、形式は以下の通り。
|
1 |
<ruby>単語<rt>読み</rt></ruby> |
「単語」の部分に ” スタンド・バイ・ミー ” 等が入り、その振り仮名として ” The Body ” を「読み」の部分に入れます。
※）ルビ表示を対応していないブラウザを考慮した場合には、以下の形式
（今では大抵のブラウザが表示できるようですが、念を入れたい場合に使ってみてください）
|
1 |
<ruby>単語<rp>（</rp><rt>読み</rt><rp>）</rp></ruby> |
ルビを振る手順
ワードプレスでは、記事の編集画面（投稿画面）で「ビジュアル」と「テキスト」といった2つのモードがありますが、ここでは「テキスト」モードを使います。
まず、例として以下を入力します。
- 映画の原題と邦題で違う例では「スタンド・バイ・ミー」（The Body）。
そして「テキスト」に切り替えます。
↓↓↓↓↓↓
テキストモードになり、<p>とかのHTMLタグも表示されます。
その後、ルビを振りたい文字列（読み仮名を付けたい単語）と、その読み（ふりがな）を、以下の形式で書き直します。
|
1 |
<ruby>単語<rt>読み</rt></ruby> |
ここでは”「スタンド・バイ・ミー」（The Body）”の部分を、
|
1 |
<ruby>「スタンド・バイ・ミー」<rt>The Body</rt></ruby> |
のように書き換えます。以下のような感じですね。
実際の表示がどうなるか、というと、
- 映画の原題と邦題で違う例では「スタンド・バイ・ミー」。
このようにルビ（振り仮名）が表示されます。
※）ルビの文字（The Body）が左右に寄ってますが、ここは後程デザインカスタマイズで中央寄せにしてみましょう。
プラグインを使ってルビを楽々
上で見たようにテキストモードでHTMLを直接入力する、というのも良いですが、ルビを頻繁に使う場合には、ちょっと面倒です。
そんな時には「WP-Yomigana」というプラグインを使うと便利です。
「WP-Yomigana」のインストールと設定
ワードプレスの管理画面から「プラグイン」→「新規追加」。
その後、
- ①検索窓に「WP-Yomigana」を入力すると、プラグインが表示されます
- ②インストールをクリック！
↓↓↓↓↓↓
続いて「有効化」します。「有効化」をクリック！
↓↓↓↓↓↓
有効化が終わったら設定です。「設定」→「ルビ設定」をクリック！
↓↓↓↓↓↓
- ① 先頭の「rubyタグのボタン」を「1行目に表示する」を選択
- ② 「保存」をクリック！
以上で設定もサクサクと終了です。
※）smallタグ、dlタグ、qタグ、citeタグ、というボタンの設定もありますが、これらは特に使わないので割愛。
ルビ（振り仮名）を実際に振ってみる
では実際にルビ（振り仮名）を振ってみましょう。
上の例と同じように、投稿画面を新たに開き、以下の文字列を入力します。
- 映画の原題と邦題で違う例では「スタンド・バイ・ミー」（The Body）。
このプラグインを有効化して先ほどの設定をすると、投稿画面に「ルビ」というボタンが表示されます。
実際にルビを振る場合には、
- ①ルビを振る文字列を選択（反転させます）
- ②その後、「ルビ」ボタンをクリック！
↓↓↓↓↓↓
見づらいですが、ルビを入力するウインドウが表示されます。
↓↓↓↓↓↓
- ① 表示したいルビ（振り仮名）を入力
- ② その後「OK」をクリック！
↓↓↓↓↓↓
以下のような感じで、ルビが振られたことが分かります。
利用しているテーマによっては、このように編集画面では表示されないかもしれませんので、その場合には、プレビューなどで確認してみてください。
ルビ（振り仮名）の削除の仕方
では、設定したルビの削除をする場合も見ておきましょう。
- ① ルビを設定した文字列を適当にクリックします
（ここでは「スタンド・バイ・ミー」の文字列のどこかをクリック） - ② その後「ルビ」ボタンをクリック！
↓↓↓↓↓↓
- 入力した時と同じように（分かりづらいですが）ウインドウが表示されるので、「削除」をクリック！
↓↓↓↓↓↓
はい、元に戻りました。^-^）
以上で一度設定したルビも削除できます。
ルビ表示のデザインカスタマイズ
先ほどの例では、元の文字（スタンド・バイ・ミー）に対して、ルビ（The Body）の文字列の長さが大きく違うため、以下のような表示になりました。
- 映画の原題と邦題で違う例では「スタンド・バイ・ミー」。
こうなると、ちょっと見栄えがよろしくないので、以下のようなデザインカスタマイズをしてみましょう。
- ① ルビは左右ではなく、中央寄せ
- ② ルビの文字の大きさをもう少し大きく
- ③ ルビの文字色も変える
CSSは、以下のようになります。
|
1 2 3 4 5 |
rt { text-align: center; /* 文字列のセンタリング */ font-size: 75%; /* フォントサイズを一回り大きく：元の文字の75%の大きさに */ color: #a67a21; /* 文字色指定 */ } |
このCSSの適用をすると、以下のようになります。
- 映画の原題と邦題で違う例では「スタンド・バイ・ミー」。
↓↓↓↓↓↓
- 映画の原題と邦題で違う例では「スタンド・バイ・ミー」。
この記事の最初に例として出した文も以下のような感じになります。
- 映画の原題と邦題で結構違うかも、といった例を挙げてみると、例えば「スタンド・バイ・ミー」。他にも、「FROZEN」、「愛と青春の旅だち」や「Up」などもありますね。
↓↓↓↓↓↓
- 映画の原題と邦題で結構違うかも、といった例を挙げてみると、例えば「スタンド・バイ・ミー」。他にも、「FROZEN」、「愛と青春の旅だち」や「Up」などもありますね。
文字の大きさや文字色は、好みの値に変えてみてくださいね。
CSSの貼り付け方はこちらを参照
ルビ表示のまとめ
- ルビ表示は、HTMLで簡単に実現できる
- 形式は以下の通り
<ruby>単語<rt>読み</rt></ruby> - 頻繁に使う場合には、「WP-Yomigana」というプラグインを使うと便利
私の場合はカッコ書きで、”スタンド・バイ・ミー（The Body）” と書いたりしますので、今まで特に意識してなかったルビ表示。ここまで見てきたように、改めて見てみると、場面によっては使って見る機会も出てきそうです。
いずれにしても、書き手中心の”単なる表現の面白さ”を狙うのではなく、そこは「読者にとって分かりやすい表現」が第一であり、その上で効果的なものはドンドン取り入れていきたいですね。
また、ネットやブログで副収入を得たいぞ！という場合には、以下のメルマガにも登録してみてください。
