ルビを振るHTMLタグ「ruby」を使って文章を読みやすくしよう

難しい漢字や、読みにくいアルファベット、専門用語などにフリガナというかルビを振りたいことってあると思います。

HTMLタグをちょろっと入れるだけで簡単にルビを振ることができますので、そのやり方についてご紹介します。

ルビを振るHTMLタグ「ruby」

読みにくい単語などにHTMLタグ「ruby」を使ってルビを振る場合、このような形で表示されます。

僕のブログ名も会社名も名前も読み間違えられることがたまにあるので、こんな具合にルビを振ると親切ですよね。

そんなルビを振るためには、下記のように書いてください。コピペして単語を入れ替えて使っていただいても構いません。

<ruby>delaymania<rt>ディレイマニア</rt></ruby>

rubyタグとrtタグについて

上記のHTMLをコピペで使ってもらえば問題はないんですが、ちょっとだけ解説しておきますね。

使い方としては、まずrubyタグの中に「読ませたい単語」と「その単語の読み仮名」を横並びに入れます。

そしてそののちにrtタグで読み仮名だけを囲ってください。

読ませたい単語の方はrubyタグの中に素で放り込んでおけばOKです。ルビの方だけrtで囲うことを忘れずに。

rubyタグを入力しやすくするために

WordPressのプラグイン「AddQuickTag」を使って、WordPressの記事編集画面にボタンを追加すると使い勝手が上がりますよ。

delaymaniaにディレイマニアというルビを振りたい場合は、delaymaniaという単語を選択した状態でボタンを押すとHTMLタグを前後に挿入できるので、そういう形で挿入されるようにカスタマイズしておくと入力が楽です。

ショートコード化してもOK

ショートコードを作っておくのも良いかもしれません。下記の記述をfunctions.phpに追記するとショートコードを使えるようになります。

function rubyrt_shortcode( $atts, $content = null ) {
    extract( shortcode_atts( array(
       'ruby' => 'val1',
       'rt' => 'val2',
       ), $atts ) );
  
    return '<ruby>' . esc_attr($ruby) . '<rt>' . esc_attr($rt) . '</rt></ruby>';
}
add_shortcode('rubyrt', 'rubyrt_shortcode');

そして、記事内で下記のショートコードを使っていただければ、ルビを振った単語を表示することができます。

[rubyrt ruby="単語" rt="ルビ"]

最後に

当ブログでは、単語の横にカッコをつけて読み仮名を振るという方法も併用していきます。ルビだと文字が小さすぎて読みにくいということもあり、これは本当に読み方伝わらないだろうなと思ったものは隣にカッコ付きで載せようかなと。

また、WordPress記事とかウェブデザイン関連記事など、明らかに専門用語慣れしている方に向けた記事は敢えてルビ付けないということもあります。

過去記事もじっくりと修正していきつつ、今後の記事ではなるべく読みやすい記事作りをしていきますので、今後共よろしくお願いします。