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

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

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

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

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

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

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

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

目次

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

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

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

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

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

Cocoonでのルビ表示機能

引用:Cocoon公式サイトより

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

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

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

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

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

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

ルビの表示に必要な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スウェル」の文中に
プラグインなしで簡単に「ルビ」を表示させる方法についてお伝えしました。

方法としては、

STEP
ルビをつけるためのHTMLコードをコピーする(以下)
<p><ruby>SWELL<rt>スウェル</rt></ruby></p>
STEP
HTMLコードを記事内にペースト(貼り付け)し、HTMLとして編集

HTMLの編集モードでSWELLの部分にルビをつけたい文字、「スウェル」という部分にルビとなる文字を入力

STEP
HTMLで編集後、ビジュアル編集に戻して完成

SWELLスウェル
このように、ルビがきちんと表示されたらOKです。

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

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

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

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

おまけ

ちなみに今回、HTMLコードの表記には、SWELLの公式サイトで推奨されているプラグイン
Highlighting Code Block」を使用しています。
プラグインの開発者である「了」さんが自画自賛するすごく使いやすいプラグインですので、
HTMLやCSSコードを記事内に書く際には、ぜひ使ってみてください。おすすめです!

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

この記事が気に入ったら
フォローしてね!

  • URLをコピーしました!
目次