Word Pressで文字の上に送り仮名(ルビ)をつける簡単な方法

[direct]<input name=”rubi” type=”text” value=”<ruby>★<rt>☆</rt></ruby>”>[/direct]
MENくん
むずかしい文字もじに送り仮名をつけたい!
くま3号
おぉ…その文字につけるんかい

固有名詞など読み方が独特な文字に「送り仮名(ルビ)」をつけたいときってありますよね。

ワードプレスの投稿画面(テキストエディタ)でちょちょいっとつけれます

これです

<ruby>★<rt>☆</rt></ruby>
★:漢字 ☆:送り仮名

Word Pressでルビ(送り仮名)をつける手順

簡単2ステップです。

  1. 投稿画面を「テキスト」エディタにする
  2. ルビのコードを貼り付けて記入

テキストエディタに切り替えてから、コードを追加、記入すれば終わりです。

ビジュアルエディタでルビる

MENくん
ぼくビジュアルエディタ派だから…
くま3号
ほな、プラグインの「Visual Editor Custom Buttons」で登録しとけば?
MENくん
それや!それならビジュアルでいける!(ルビそんな使わないけど)

 

このページを参考にしてください。
Visual-Editor-Custom-Buttonsの使い方【プラグイン:Visual Editor Custom Buttons】ビジュアルエディタにボタンを追加する

 

プラグインで登録しておけば、ビジュアルエディタでも簡単です。

ルビをカスタマイズする

ルビの色や文字の大きさを変更するには、CSSを変更する必要があります。

くま1号
でたでた、自己満足カスタマイズやな
MENくん
・・・

ぼくはルビを少し薄くしたかったので、こんな感じにコードを追加しました。

rt {
    opacity: .8;/*透明度80%*/
}

font-sizeとかcolorで文字色も変更できます。

ルビのまとめ

ビジュアルエディタ派の人はプラグインを使って、登録とうろくしておけば簡単かんたんにルビれるようになります。

くま3号
またひとつWord Pressのことを覚えたね