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

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

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

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

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

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

どうやらiOS版Safariとデスクトップ版Safariを含む他のブラウザには以下の様な差異があったようです。

1. デスクトップ版Safariを含む他のブラウザではAudioオブジェクトの.srcに何か入れただけでファイルの読込みが発生するがiOS版Safariでは.load()が実行されるまで何もしない
2. デスクトップ版Safariを含む他のブラウザではAudioオブジェクトの.load(メディアファイルのURL)を実行すると確実に実行されるがiOS版SafariではメディアファイルのURLが元の値と同じ場合は実行されない

他のブラウザの対応を見るとガーベイジコレクションとの兼ね合いで.load()メソッドはメディアファイルの初期化に使われる格好になって居るのですが、iOS版Safariだけは頑なに「loadはloadじゃん、他の意味なんてないわい」と言っているようです。

まぁ別にSafariだけ違うって話なら「まぁAppleだし仕方ないか」と思わなくもないのですが、iOS版だけ違うと言うのはどうにも納得いかないですね。
特に２については致命的で解消するには.loadの都度URLの後ろに”?+Date.new()”とか”?+Math.random()”みたいな重複しない値をくっつけるしか手は無い訳ですが、これをやるとキャッシュが効かなくなるわけで、一々サーバーにデーターを取りに行く事になり「モバイル向けブラウザのくせに全然モバイル通信に優しくない」だけでなく「プリロードの意味が無いじゃん」ってなる気がするデス。

一方でプリロードしたメディアファイルの初期化は.load()メソッドを使うと言う点は他のブラウザと変わりがない訳で、どうにも一貫していないんですよね。

やっぱりAppleは呪われるべきですわ。

背景説明としてはWebアプリの開発から7年くらい離れていたのですが、色々あって昔 自分がFlashで作った真面目な仕事のWebアプリ化を断ったら他所に頼んだけど失敗したので再度舞い戻って来た。って感じの話。

記事内容はタイトルの通りで、ネットワークの遅延を防ぐために100個位の短い音声ファイル（えっちぃ声じゃ無いよ）を先読みしてユーザー操作に応じて再生するって感じの挙動。

引っかかったのは2点で、一つは動的にAudio「タグ」を大量に生成してHTMLのエレメントに追加するとFirefoxでは読み込みに引っ掛かりが出る場合があること。
今回はAudioタグのコントロールを表示したりしないので、Javascriptのオブジェクトとして扱ってやれば回避可能でした。

もう一つは、Mac OS XのApple Safariのみ先読みした音声ファイルの2度目の再生が出来ない、あるいは途中から再生されると言う現象。
最初は「またアップルかっ！」とキレそうになるも、そこはホレ大人ですから落ち着いてよく考えてみる。
すると、まず途中から再生されるのは1回目の再生時に最後まで再生されない場合に再生位置が残っているのでは無いかと言う推察に至ります。

途中から再生されちゃダメなら再生前に頭出しすりゃ良いじゃん。って事で「currentTime = 0」を入れる訳ですが、これが出来ない。

なにこれ？

ReadOnlyでもないプロパティーに値がセットできないのは変です。異常です。
この辺をWebで検索するとSafariとChromeの自動再生回避ばかりが引っかかるんだけど、そうじゃないんだよね・・・
って事でさらに調べて行くと「new Audio(‘URL’)でAudioオブジェクトを再度作るとcurrentTime = 0じゃ無くても頭出しできるよっ」みたいな記述がSafari開発者のコミュニティーで見つかったので早速実装。

ふむ、確かにSafariでは動く。しかし他のブラウザでテストを行うとFireFoxで動かないでは無いか。
件のページにも今のSafariは「さすがはSafari、大量にオブジェクトを作っても何とも無いぜ」だけど昔は大量にオブジェクトをnewすると動作が不安定になったってあって「やっぱりアップル関係者はSafariしか考えてないなっ！」となって居た訳です。

その後もcurrentTime = 0関連で、メモリー上に「先頭が0以外の値のAudioストリームデーターはcurrentTimeを0に出来ない」とか、色々出てきて「先頭が0以外の値のAudioストリームデーター」ってどんなよ？ってなるのですが、「あぁユーザーがコントローラーで再生位置をジャンプしたりするとそうなるか、メモリー上に無いなら出来ないわな」。
そして「new Audio(‘URL’)」で解消できるって事はダメな時はメモリー上にデーターが無かったって事であり、currentTime = 0に気を取られていたけど、これはもっと別の現象なのではと言う考えに至り・・・

そう、そうなんです。
これは「何らかの原因でメモリー上に音声データーが無い」事が原因なんですね。

ここで種明かしをすると、この現象はガーベイジコレクトが原因なんですね。
と言うか昔、同じECMAスクリプトであるActionScriptでも同じ現象に出くわした事が有った気がしてきました。

ガーベイジコレクトとは使用メモリーの節約機能で、ロードやアクセスしてから時間が経ったオブジェクトはエントリのためのオブジェクトのガワだけ残して実体はメモリーから削除されちゃうんです。
このため最初の頃はちゃんと再生できていた音声が時間が経つと正しく再生できなかったり、頭出しが出来ない等の現象が起きてしまう訳です。

では具体的にはどう対策したらよいのかと言いますと、new Audio(‘URL’)でAudioオブジェクトを大量に作ると言う方法ではAudioオブジェクトの作り過ぎでスマートじゃない。何よりFireFoxで動かないなどの弊害があります。
これを回避するには、新しくオブジェクトを作るのではなくAudioオブジェクト.load(‘URL’)とします。

//先読みでデーターをロードする
let soundObj_0 = new Audio(‘sound/sound_0.mp3’);　//プリロード
・
・
//どのタイミングで音声データーが使われるか分からないので
//使うときはとにかくloadしてしまう
soundObj_0.load(‘sound/sound_0.mp3’);　//再生前に無条件にロード
soundObj_0.currentTime = 0;　　//念のために再生位置を0リセット
soundObj_0.play();　　//音声再生

こんな感じですかね。

なお、2回目のload(‘URL’)はブラウザ キャッシュからロードが行われるので読み込みにネットワークの遅延は出ないようです。

めでたしめでたし。

以前のブログにあった「ギャラリー」ページですが、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/07 05:49:13時点 Amazon調べ-詳細)

• Amazon
• 楽天市場

初めてのPHP

created by Rinker

¥3,300 (2026/04/07 05:49:14時点 Amazon調べ-詳細)

• Amazon
• 楽天市場

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

created by Rinker

• Kindle
• Amazon
• 楽天市場

• 作成しているAriアプリケーションの内容
  XMLに記述されているファイル一覧を元に外部ファイルを読み込みユーザーの操作に応じて適宜再生表示する。
• 不具合発生の経緯
  Adobe Animate CCからAri インストーラーを書き出してインストール実行しAir アプリケーションを起動しても、自動で読み込まれるはずのファイルが読み込まれず停止する。
• 不具合の考察
  試しにインストール先のフォルダに読み込むファイルを全部コピーすると正常に起動するのでファイル名が異常かファイル一覧の文字化けのどちらかが疑われる。
• と言う事で外部ファイルが入っているフォルダをエクスプローラーで開くと一部、全く同名のファイルが2つ存在する！と言うなかなかシュールな絵面になっている事を発見。
  

  Adobe AnimateCCの不具合

と言う事でコマンドプロンプトで「Dir」を掛けてみるとファイル名が2バイト文字かつ「濁点、半濁点」を含んでいた場合に元の文字＋「゛」または「゜」と言う感じにファイル名が変わっている事が判明（ただし、エクスプローラーでは正しいファイル名の様に見える）

Flash Professionalではこのような現象は発生していないので当面はFlash Professionalに戻して開発を続けてます。

まぁファイル名に2バイト文字を使うなって話かもしれませんが、やらなくても良いアップデートでファイル操作と言う基本的な個所にバグを混入してくるのはマジ勘弁って感じです。