WPテーマ「SWELL」でルビをプラグインなしで簡単に表示させる方法

Tetsuya

このサイトはWordPressテーマ「SWELLスウェル」を使用しています。

デザイン歴23年、ガチデザイナーのTetsuyaです。

僕はWordPressを使い始めて5年目になるのですが、
「SWELLスウェル」をガチで使うのは始めてです。
※これまでは非公開のメンバーサイトでのみ使用していました。

なので、これまではSWELLスウェルでがっつり文章を書く機会も少なかったのですが、
新たにこの公式ブログを立ち上げたことに伴い、色々とやりたいことが増えてきました。

そして今回、まずSWELLスウェルでやりたいと思ったのは「ルビ」の表示。

実際、ルビの表示機能があるとすごく便利ですし、
読み手にとってもすごく親切だと思うんですよね。

SWELLではまだ「ルビ」の機能は実装されていない？

おそらくですが、僕が調べたところ「SWELLスウェル」にはまだ、
ルビの表示機能が実装されていないかと思います。

SWELLスウェルの購入者メンバーサイト「SWELLERS’」では
「ルビ」が表記できるようにして欲しいとの要望が
ユーザーから出ているみたいですが、まだ実装には至ってません。

ただ、2021年にSWELLの開発者「了」さんが、
WordPressの無料テーマ「Cocoon（コクーン）」の開発者「わいひら」さんと業務提携しており、

Cocoonの方には「ふりがな」として「ルビ」の表示機能が実装されています。

引用：Cocoon公式サイトより

なので、遅かれ早かれルビの表示機能が「SWELLスウェル」の方にも実装されると期待しながら、
今はもうしばらく正式に実装されるのを待ちたいと思います。

ということで、ルビ機能が公式に実装されるまでの暫定措置として
「WP-Yomigana」というプラグインを使えば、SWELLスウェルにルビの機能は実装できるのですが、

ただ、余計なプラグインはできるだけ増やしたくないという僕と同じ考えの方も
おそらくいるんじゃないかと思います。

「SWELL」でルビを簡単に表示される方法

ルビの表示機能をWordPressテーマに実装するのは大変かもしれませんが、
必要に応じてルビを表示させるだけなら、実はそれほどむずかしくはありません。

なぜなら、実際にルビを表示させる「HTMLコード」はたったこれだけだからです。

<p><ruby>難<rt>むずか</rt></ruby>しい漢字</p>

上記のコードを記事の入力画面にコピペすると、

「難むずかしい漢字」

このように誰でも簡単に文中にルビを表示させることができます。

ルビの編集方法

ルビのHTMLコードをコピペしたら以下の流れで編集してください。

STEP

HTMLとして編集をクリック

ルビのコードをコピペしたら、ツールバーから「HTMLとして編集」をクリックします。

STEP

HTMLブロックを編集

「HTMLとして編集」をクリックすると、以下のような表示に変わりますので編集します。

STEP

編集が終了したら、ビジュアル編集に戻す

HTMLの編集が終了したら、再びツールバーからビジュアル編集に戻します。

STEP

ルビつきテキスト完成

「ビジュアル編集」に戻すと、このように「難むずかしい漢字」ルビつきの表示に戻ります。
なお、ルビの調整方法については、引き続き解説してますので、参考にしてください。

一文字ずつルビをつける方法

また、文字にルビをつける場合、使用するHTMLコードは同じですが、
コードの書き方によってルビの見え方が変わります。

例えば、

<ruby>X<rt>エックス</rt>Y<rt>ワイ</rt></ruby>

上記のようなコードの書き方をすると、表示は

XエックスYワイ

このようになりますし、

<ruby>XY<rt>エックスワイ</rt></ruby>

上記のようにコードを書くと、表示は

XYエックスワイ

このようになります。

ですので、コードの書き方によってルビの見え方が変わりますので、
1文字ずつ表記させるか、まとめて表記させるかは、
ルビをつける文字のバランスを見ながら、うまく調整してみてください。

まとめ

今回は暫定的な措置にはなりますが、Wordpressテーマ「SWELLスウェル」の文中に
プラグインなしで簡単に「ルビ」を表示させる方法についてお伝えしました。

方法としては、

<p><ruby>SWELL<rt>スウェル</rt></ruby></p>

このようにコピペ、テキストを打ち替えるだけの3ステップでルビを表示することができます。
なので、ルビをつける作業自体は、それほど難しくありません。

ですから、難しい漢字をあえてひらがなにして表記するのも親切ですが、
逆にひらがなにすることで認知しにくくなる漢字もあるかと思います。

つまりそういう時こそ、あえて難しい漢字をひらがなにするのではなく、
難しい漢字はそのまま使い、ルビさえきちんとつけておけば、
誰もが読みやすく親切な文章が出来上がります。

ですので、ぜひ「ルビ」をうまく活用してみてください。以上、参考になれば嬉しいです。

あわせて読みたい

超簡単！SWELLのボックスメニューをサイドバーに実装する方法！ 正直、もう少し詳しく説明して欲しいな デザイン歴23年、ガチデザイナーのTetsuyaです。 ワードプレステーマ「SWELL」はマジで神ですね。ほんとすごいテーマだなと思い…