このサイトは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コードをコピペしたら以下の流れで編集してください。
ルビのコードをコピペしたら、ツールバーから「HTMLとして編集」をクリックします。
「HTMLとして編集」をクリックすると、以下のような表示に変わりますので編集します。
HTMLの編集が終了したら、再びツールバーからビジュアル編集に戻します。
「ビジュアル編集」に戻すと、このように「難しい漢字」ルビつきの表示に戻ります。
なお、ルビの調整方法については、引き続き解説してますので、参考にしてください。
一文字ずつルビをつける方法
また、文字にルビをつける場合、使用するHTMLコードは同じですが、
コードの書き方によってルビの見え方が変わります。
例えば、
<ruby>X<rt>エックス</rt>Y<rt>ワイ</rt></ruby>
上記のようなコードの書き方をすると、表示は
XY
このようになりますし、
<ruby>XY<rt>エックスワイ</rt></ruby>
上記のようにコードを書くと、表示は
XY
このようになります。
ですので、コードの書き方によってルビの見え方が変わりますので、
1文字ずつ表記させるか、まとめて表記させるかは、
ルビをつける文字のバランスを見ながら、うまく調整してみてください。
まとめ
今回は暫定的な措置にはなりますが、Wordpressテーマ「SWELL」の文中に
プラグインなしで簡単に「ルビ」を表示させる方法についてお伝えしました。
方法としては、
<p><ruby>SWELL<rt>スウェル</rt></ruby></p>
HTMLの編集モードでSWELLの部分にルビをつけたい文字、「スウェル」という部分にルビとなる文字を入力
SWELL
このように、ルビがきちんと表示されたらOKです。
このようにコピペ、テキストを打ち替えるだけの3ステップでルビを表示することができます。
なので、ルビをつける作業自体は、それほど難しくありません。
ですから、難しい漢字をあえてひらがなにして表記するのも親切ですが、
逆にひらがなにすることで認知しにくくなる漢字もあるかと思います。
つまりそういう時こそ、あえて難しい漢字をひらがなにするのではなく、
難しい漢字はそのまま使い、ルビさえきちんとつけておけば、
誰もが読みやすく親切な文章が出来上がります。
ですので、ぜひ「ルビ」をうまく活用してみてください。以上、参考になれば嬉しいです。
ちなみに今回、HTMLコードの表記には、SWELLの公式サイトで推奨されているプラグイン
「Highlighting Code Block」を使用しています。
プラグインの開発者である「了」さんが自画自賛するすごく使いやすいプラグインですので、
HTMLやCSSコードを記事内に書く際には、ぜひ使ってみてください。おすすめです!