WordPress でルビを使う

「ルビ」ってご存知でしょうか？　出版用語でこんな風ふうに漢字かんじの上うえに振仮名ふりがなを振ふっている小さな文字のこと。少年マンガではおなじみのアレです。

難しい漢字はルビが振ってあった方が読みやすいのはもちろんですが、画数が多い漢字もスマホでは読みにくいですよね。なので私は読みやすくするため

あの時 → あのとき
その為 → そのため
この事 → このこと

のようになるべく漢字を減らすよう、ひらがな/カタカナに直しています。

でも文体によっては難しい字を使った方が雰囲気が出ますし、ラノベやマンガで「貧乏恐怖症ペニアフォビア」とか「不幸ハードラックと踊ダンスっちまった」のように、読み仮名と違うものを当てたいときもあります。そんなときはやっぱりルビ。以下 HTML の ruby タグを使うといい感じになります。

<ruby>
  貧乏恐怖症
  <rp>(</rp>
  <rt>ペニアフォビア</rt>
  <rp>)</rp>
</ruby>

ruby タグは元々 Microsoft Internet Explorer（IE）の独自拡張だったため、昔は IE しか対応していなかったのですが、最近 W3C の勧告かんこくが出て主要ブラウザすべてに実装されるようになりました。なので私も心置きなくこのブログで多用しまくっていたのですが、微妙に不具合を見つけ、ちょくちょくヒマを見つけては試行錯誤していたんですよ。

で、先日ようやっと納得のいく環境が整いました。こないだの tong みたいに誰かの役に立つかもしれないので WordPress でルビを振る方法をまとめてみます。

■ Mozilla Firefox のガタつき対策

ruby タグは Chrome や Edge、Safari、Opera などでは問題なく表示されます。

でもなぜか Firefox だけはルビを振ったところがガタつきます。

Firefox って ruby タグが HTML5 で採用されるまで頑かたくなに対応しなかったですし、先代の Netscape Navigator の頃からそういう HTML Strictガンコおやじみたいなところがありました（でもそこがいい、デバッグ的に）。

色々試した結果、以下 CSS を追加（WordPress 管理画面の［外観］＞［カスタマイズ］＞［追加 CSS］に追記）することで、どのブラウザでもほぼ同じレイアウトになりました。

/* RUBY for Firefox */
@-moz-document url-prefix() {
  rb {
    vertical-align: top;
  }
  rt {
    margin-bottom: -8px;
    line-height: 100%;
  }
}
rt {	
  font-size: 100%;
  zoom: 45%;
}

ただし上記 CSS はこのブログで使っているテーマ（Blackoot Lite）に最適化していますので、使っているテーマやフォントによっては数値の調整が必要になるかもしれません。margin-bottom のマイナスを増やすと下にズレて、zoom のパーセンテージでルビの大きさを変えられますので、試したい方はお好みに合わせてカスタマイズしてみてください。

またテーマによっては行間が狭く、ルビを入れると窮屈になるものがあるかもしれません。その際は本文の line-height を以下のよう、180%前後に調整した方がいいかも。特に海外製テーマはアルファベット前提のため、日本語だと文字が潰れやすいので font-size も大きめにカスタマイズした方が見やすくなると思います。

.post-content p,
.entry-content p {
  font-size: 14px;
  line-height: 180%;
}

※クラス名（post-content entry-content）は一例です。使用中のテーマの class / id に書き換えてください。

class / id を正しく指定してもうまく動作しないときは、推奨しませんが !important 宣言を足してみてください。

.post-content p,
.entry-content p {
  font-size: 14px !important;
  line-height: 180% !important;
}

■ Gutenberg の自動修正回避

WordPress のブロックエディター「Gutenbergグーテンベルク」には入力支援があってノンコードで色々編集ができます。ですが何か深いことをやろうとブロックを［HTML として編集］で直接いじると［ビジュアル編集］に戻したときに勝手に修正することがあり、ruby タグも何度か消されたり、表示がめちゃくちゃ崩れたりしたことも。

で、それを回避するため

WordPress : 入力した ruby タグが消えてしまうので何とかする。- freefielder.jp

を参考に ruby タグを勝手に消させないよう、使用中のテーマファイルの functions.php に以下を追記しました。

add_filter( 'content_save_pre','set_allowedposttags' );
function set_allowedposttags( $content ) {
  global $allowedposttags;
  $allowedposttags['ruby'] = array();
  $allowedposttags['rb'] = array();
  $allowedposttags['rt'] = array();
  $allowedposttags['rp'] = array();
  return $content;
}

ただしテーマが更新されると functions.php も上書きされ、追記したコードが消えてしまいます。なので子テーマを作ってそちらの functions.php に記載することに。すると今度は［追加 CSS］に追記した Firefox 用の CSS が無効になってしまい、子テーマの style.css に追記し直したり…と、そこそこ面倒臭いことに。