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

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

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

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

でも文体によっては難しい字を使った方が雰囲気が出ますし、ラノベやマンガで「貧乏恐怖症ペニアフォビア」とか「不幸ハードラックと踊ダンスっちまった」のように、読み仮名と違うものを当てたいときもあります。そんなときはやっぱりルビ。以下 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 に追記し直したり…と、そこそこ面倒臭いことに。

なお以上の回避方法を使うと、ルビを振ったところを再編集したり削除したときに ruby タグが変に残って悪さすることがあるので、その際はブロックを［HTML として編集］に切り替えてタグを編集しましょう。ていうかあえて functions.php はいじらなくてもいいかも…

■ プラグインによるルビ入力

と、こんな感じで今まで WordPress のエディターを HTML に切り替え、タグを直接打ってルビを振っていたのですが、コピペでもそこそこ面倒。何かないかなーと思ったらありましたプラグイン。

WP-Yomigana – WordPress.org
By Takahashi Fumiki

最終更新が５年前と古いんですが、私の環境（バージョン6.8.1-ja）では問題なく動いてくれています。

なおこのプラグインは ruby タグ未対応ブラウザ用の rp タグ（カッコ付き表示）の入力があえて省かれているのですが、モダンブラウザはほぼ100% ruby 対応になったので問題ないようです。

てなわけで、今は快適にルビ振り生活できています。うん、ＱＯＬクオリティ・オブ・ライフ大事。

■ 蛇足

で、WordPress とは関係ない余談をひとつ。あした誰かに話したくなる豆知識〜。

「出版用語の『ルビ』は宝石の『ルビー』が由来」

19世紀イギリスでは活版かっぱん印刷の文字サイズに宝石の名前を当てていて、4.5ポイントは「Diamondダイヤモンド」、5ポイントは「Pearlパール」、5.5ポイントは「Rubyルビー」などと呼んでいたそう。

ポイント・システムの由来-欧文フォントと組版（２） – 公益社団法人日本印刷技術協会（JAGAT）

日本では明治に入って欧米から活版印刷の技術が伝わり、日本語の活字が作られるようになりました。その際フリガナに使われた活字の大きさが、イギリスで使っていた「ルビー」に近かったそう（約5.25ポイント/７号/８級）で、それからフリガナそのものを「ルビ」って呼ぶようになったんだとか。

ちなみに CSS で 5.5pt を指定するとこんな感じ。ちっさ(笑)

などとこの話を以前職場でしたことがあるのですが、みんなポカ〜ンとして場が白けてしまいました。もしかするとルビ愛が強すぎて、オタク特有の早口でドヤ顔で語っていたかもしれません。みなさんも雑学をひけらかす時は気をつけましょうね！

以前のブログにあった「ギャラリー」ページですが、WordPress 更新でプラグインが動かなくなってしまったので久方止めていました。でも「あれ？ この画像、前にも上げなかったっけ」と思うことがあり、最近の WordPress はメディアライブラリも一気に一覧表示されなくなったので、確認にちょっと不便。

元々使っていたプラグインは特定のカテゴリーに投稿した画像を一気に抜いて表示するものだったんですが、他のを探してもそれっぽいのがない。WordPress のギャラリー機能を使おうにも、過去画像に遡ってタグ付けしないとならないようで、ちょー面倒。

結局、固定ページのテンプレートを自作しちゃいました(笑)　２日ぐらいかかったので、素直にメディアライブラリでタグ付けした方が良かったかも…

→らくがき置き場

でも記事をカテゴリー分けするだけで、勝手に固定ページに投稿画像が追加されるので便利ですよ。たぶん。

需要はないかもですが、主要な部分のソースコード（page-gallery.php）置いておきますね。一応、出力タグは <figure> とか使って Gutenberg に遵守。なお前後のコードは使用中のテーマファイルの page.php に合わせないと、デザインが崩れると思うのであしからず。

<?php
/*
Template Name: ギャラリー
*/
get_header();
?>
// この前後は使用中のテーマに合わせる
<div class="container" id="main-content">

<?php
  the_content();
  $paged = get_query_var('paged') ? get_query_var('paged') : 1;
  $args = array(
    'posts_per_page' => 50,  // 投稿ページ数(画像の表示数ではない)
    'paged' => $paged,
    'post_type' => 'post',
    'cat' => 5,              // カテゴリID
    'orderby' => 'date',
    'order' => 'DESC'
  );
  $the_query = new WP_Query( $args );
  $pages = $the_query->max_num_pages;
  $wp_query->max_num_pages = $pages;
  
  if ( $the_query->have_posts() ):
    while ( $the_query->have_posts() ):
      $the_query->the_post();
      $medias = get_attached_media( 'image', get_the_ID() );
      foreach ( $medias as $media ) {
        $img_size = wp_get_attachment_image_src( $media->ID, 'full' );
        if ( $img_size[1] > 300 and $img_size[2] > 300 ) {
          $title = $post->post_title;
          if ( mb_strlen ( $title, 'UTF-8' ) > 11 ) {
            $title = mb_substr( $title, 0, 11, 'UTF-8' ) . '&hellip;';
          }
?>
    <div class="wp-block-image">
      <figure class="alignleft size-thumbnail">
        <?php echo wp_get_attachment_link( $media->ID ); ?>
        <figcaption>
          <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
            <?php echo $title; ?>
          </a>
        </figcaption>
      </figure>
    </div>
<?php
        }
      }
    endwhile;
  endif;
  wp_reset_postdata();

  $pages = $wp_query->max_num_pages;
  $showItems = 3;
  if ( $pages != 0 && $pages != 1 ):
?>
  <div class="page_nav">
<?php    if ( $paged != $pages ): ?>
    <div class="previous navbutton">
      <a href="<?php echo get_pagenum_link( $paged + 1 ); ?>">Previeous Gallery</a>
    </div>
<?php    endif; ?>
<?php    if ( $paged != 1 ): ?>
    <div class="next navbutton">
      <a href="<?php echo get_pagenum_link( $paged - 1 ); ?>">Next Gallery</a>
    </div>
<?php    endif; ?>
  </div>
<?php  endif; ?>

</div>
// この前後も使用中のテーマに合わせる

<?php get_footer(); ?>

WP_Query でカテゴリーページの一覧を取得してループで回しているので、投稿ページ内の添付画像の数で１ページあたりの表示数が変わってしまうのはご愛敬。get_attached_media() で投稿ページ内の画像を添付 ID で抜き出し（完全ではない）、ループ内で画像１個ずつ wp_get_attachment_image_src() に突っ込んで、画像サイズを調べて 300px 超えの場合だけ表示するようにしています。

あとタイトルが11文字超えたら mb_substr() で縮めて、キャプションが２行にならないよう小細工していたり。固定ページじゃ鬼門と言われるページネーション機能つけたりとか。

設置方法は現在使用しているテーマファイルに上記ソースの page-gallery.php を追加し、固定ページを新規作成して、ギャラリーページのテンプレートでこれを呼び出せばいい感じ。

スライドショーなどの画像表示周りは WordPress プラグインの FancyBox for WordPress を使っているだけで、特に手間はかけていません。

あと添付画像が記事に関連付けされていないと表示されないので、その際は WordPress プラグインの Associate Attachment などを使って、未使用画像のチェックをして「投稿に添付」してみてください。

その他、細かい解説は面倒なんでこんなところで。親切なんだか不親切なんだか…

詳解 WordPress

created by Rinker

¥40 (2026/04/12 19:47:55時点 Amazon調べ-詳細)

• Amazon
• 楽天市場

初めてのPHP

created by Rinker

¥3,300 (2026/04/12 19:47:57時点 Amazon調べ-詳細)

• Amazon
• 楽天市場

CODE: コードから見たコンピュータのからくり

created by Rinker

• Kindle
• Amazon
• 楽天市場