※モバイル機器のみ有効→PC表示に切替 モバイル表示に切替

SIRIUSでルビを使いこなすやり方

キャプチャ画像

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

 

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


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

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

 

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

 

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

 

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

 

たとえば『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>林檎<rt>りんご</rt></ruby>

 

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

 

林檎りんご

 

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

 

<ruby>林<rt>りん</rt>檎<rt>ご</rt></ruby>

 

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

 

りん

 

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

SIRIUSテンプレート【Volar】

キャプチャ画像

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

詳細および入手方法についてはコチラ↓をご覧ください

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