表現の幅が広がる!WordPressでふりがな(ルビ)を振る方法




WordPressでも、ふりがな(ルビ)を振りたい!

先日、父からすすめられた「二十四の瞳」という小説を読んでいると、

結構ふりがなが振ってあること

に気が付きました。

おそらく、想定読者は子供だからなのかもしれません。なにせ、父の時代には教科書に載っていた小説らしいですからね。

 

そのこともあって、ふと、この本を読んでる時に

「あれ、WordPressでもフリガナつけられるのかなぁ」

と思って調べてみました。

すると、こちらの神記事がヒット。

どうやらHTML5からふりがな(ルビ)に対応したタグの記述方法が登場したのです。

そして、そのコードをWordPressの「テキスト編集モード」で書けば、WordPressでもふりがなルビを振れるようになるわけですね。

 

WordPressでふりがな(ルビ)を振る方法

そのコードはこちらです。

<ruby>ルビを振りたい文字<rt>ルビ</rt></ruby>

rubyといえばプログラミング言語のRubyを想起する方いるかもしれませんが、このrubyはルビでルビを表わしているのですね。

つまり、ルビは万国共通。

 

例えば僕の名前である「飯橋凛」にふりがなを振ってみるとこんな感じ。

飯橋凛いいはしりん

そして、HTMLコードは次のようになります。

 

今回使ったのは<ruby>と<rt>で、最低限この2タグを駆使すればWordPressでもルビを表現できるようになります。

ただ、ルビ関連のタグは他にも存在しているのが現実世界の深いところ。

 

詳しくはこちらのページを参考にしてみてください。

  • ruby要素 … ルビを振るテキストの範囲
  • rb要素 … ルビベース(対象のテキスト)を明示的に示す
  • rt要素 … ルビテキスト(ふりがなの文字列)
  • rtc要素 … ルビテキストのコンテナ
  • rp要素 … 未対応ブラウザで表示される括弧

どうやらユーザーの使用環境によって、ルビに対応していない場合(ブラウザが非対応など)があるみたいなので、その時に備えて、ルビが表示されない場合の記述もしておくようです。

「HTML書くのだるいなー」

という方はWordPressのルビー専用のプラグイン「WP-Yomigana」も用意されています。

ただ、僕の個人的な意見としては、ルビのためだけにプラグインをインストールすること自体だるかったので、必要に応じてHTMLコードをテキストモード編集で書くことでふりがなを表現することにしたのです。

 

WordPressでルビを使った具体的な表現

ふりがなの振り方がわかってきたので、実際にやってみたかった表現を作ってみました。

 

日本語を外来語で読ませる

よく熱い少年漫画とかであるのが、

あえて日本語で書いて、ふりがなを外来語で読ませる

という手法です。

例えばこんな感じですね。

おれのソウルが武者震いしてるわ。

 

とか

 

そろそろ婚約者フィヨンセがほしい

 

などが考えられます。

 

外来語にルビをふる

日本語ではない外来語での読み方のルビを振る表現もあるでしょう。

英語でも中国語でも、色々なケースが想定されます。

例えば、Ruby on Railsに

Ruby on Railsルビーオンレイルズを使ってみた。

ふりがなを振って、外来語を英単語読みさせたい時に重宝します。

 

最近よく見るのが「中国語の固有名詞」にルビをふるケース。

例えば、毛沢東モウタクトウではなく、

毛沢東マオツートン

と中国語読みに近いカタカナのルビを振って情報を伝えられるでしょう。

 

ピンインを振る

あと、やってみたかったのが中国語のピンインを振ることです。

ピンインとは簡単に言うと、中国語の読み方のようなもの。

例えば「こんにちは」の你好なら、このようなピンインになっています。

你好nǐhǎo

うーん、ちょっとルビが小さすぎて声調までみえづらいですが、これなら中国語学習サイトを構築する際に役に立ちそうです。

 

「たとえ」を表現する

あとできそうなのが「意味」と「実態」が異なるものの、例え表現ですね。

こういうのを「暗喩あんゆ」というのかもしれません。

 

例えば次のようなちょっと痛い表現。

 

おれの生きがいブログを邪魔すんなってGoogleさんよ

 

この例では、「ブログ=生きがい」として情報を伝えることで、著者にとってのブログの存在感を表現できちゃいます。

こんな感じでふりがなルビを導入することで、WordPressでのテキストの表現の幅が一気に広がりますね。

僕と同じようにWordPressのブログにルビを追加したい方は導入してみてください。

 

それでは!

Lin

Pocket
LINEで送る

コメントを残す

メールアドレスが公開されることはありません。