ルビを使いこなす

キャプチャ画像

ルビふりがな機能が付いてると文章が読みやすく、かっこよさも出てきます。

 

ルビ(フリガナ)機能は決まったパターンで表示されるので、
ひな形を登録しておいて必要部分だけを修正すれば
あっという間にフリガナが振れます。


ルビ(フリガナ)機能の設定方法

ホームページというのはルビ(フリガナ)が苦手です。

 

代替方法としてよく見かけるのは『林檎(りんご)』みたいに
(かっこ)を使ってフリガナっぽく見せることでしょう。

 

なぜあまり普及しなかったかと言えば、専用のタグが複雑だからです。

しかしながらブラウザの進化と共に、それもかなりシンプルになってきました。

 

たとえば『SIRIUS』という文字に『シリウス』というフリガナを付けようとしたら、

 

<ruby>SIRIUS<rt>シリウス</rt></ruby>

 

という書き方でほぼ問題なくコチラ↓のように表示されます。

 

SIRIUSシリウス

 

どうでしょう、あなたのブラウザではきちんとコチラ↓の画像のように見えてますか?

 

キャプチャ画像

 

ルビ機能のひな形

コチラ↓がルビ(フリガナ)機能のひな型になります。

 

<ruby>※フリガナを付けたい漢字や文字<rt>※実際の読み方(フリガナ)</rt></ruby>

 

つまりWindowsの単語登録やSIRIUSの文字装飾設定などに

<ruby>※漢字<rt>※フリガナ</rt></ruby>

と登録しておけば、あとは”※漢字”の部分と”※フリガナ”のところを修正するだけで
自動的にルビ(フリガナ)が付くというわけです。

 

ただし古いバージョンのブラウザにも適用させたいということであれば、
書き方は少々複雑になりますが下のような書き方で対処することができます。

 

<ruby><rb>漢字</rb><rp></rp><rt>かんじ</rt><rp></rp></ruby>

 

<ruby> ~ </ruby>
ルビ(フリガナ)専用のタグです。
<rb> ~ </rb>
ルビ(フリガナ)を振りたいテキストになります。
<rt> ~ </rt>
実際のルビ(フリガナ)テキストになります。
<rp> ~ </rp>
ルビ未対応ブラウザでのみ表示される記号などです。
ここではになります。

 

つまりルビ対応ブラウザでは

漢字かんじ

となり、ルビ未対応ブラウザだと

漢字(かんじ)

に自動変換表記してくれます。

 

この辺はあなたがどのブラウザまでを閲覧対象とするか次第です。

 

たとえばMicrosoft EdgeやGoogle Chrome、新しめのOSバージョンを搭載したiPhoneやAndroidのブラウザだけを対象とするならシンプルなタグの方だけで充分でしょう。

 

いやいやInternet Explorerの古いバージョンまで対応させたいというのであれば複雑な方のタグが必要になるかもです。

 

いずれにしても複雑な方のタグならほぼどのブラウザにも対応してるので、
面倒でなければ複雑な方のタグで書いとくのがいいとは言えます。

ルビ(フリガナ)機能のバリエーション

ルビ(フリガナ)の振り方ですが、
全部の文字を対象に一気にルビ(フリガナ)を振る方法と、
文字ごとにルビ(フリガナ)を振る2つのやり方があります。

 

たとえば林檎(りんご)という漢字。

 

<ruby><rb>林檎</rb><rp>(</rp><rt>りんご</rt><rp>)</rp></ruby>

 

と打ち込むと、フリガナにあたる「りんご」という文字は
林檎という文字の上に均等配置されます。

 

林檎りんご

 

ところが「林」と「檎」にフリガナを分けて、

 

<ruby><rb>林</rb><rp>(</rp><rt>りん</rt><rp>)</rp><rb>檎</rb><rp>(</rp><rt>ご</rt><rp>)</rp></ruby>

 

と打ち込んだ場合はそれぞれ振り分けた漢字の上にフリガナが配置されます。

 

りん

 

このあたりはフリガナをどう振り分けるかの違いだけなので、うまく使い分けるといいでしょう。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替