ブログで文字の上に点を表示(傍点)させたり、ルビを振る方法

f:id:mutant-tetsu:20161025144941j:plain

こんにちは、てつです。

先日、書店で欲しい本を探していた時にふと気になったことがありました。

そういえば、文字の上に点を表示させたりルビを表示させたりするのってどうやるんだろう・・・？

よく書籍の帯とかで目にしますよね。

ちなみに文字の上に点を表示させるのは「傍点（・・）」って言うらしいです。

そして、文字の上に読み仮名などを振り分けるのはルビ（ルビ）って言います。

ルビはなんとなく知っていたけど、傍点の呼び方は初めて知った・・・

調べてみたらcssは使わずhtmlコードですぐに出来るので簡単でした。

誰得？なエントリーですが、傍点やルビを使う人がきっといると信じて・・・

今回は、ブログで傍点やルビを使う方法を紹介します。

ブログで傍点を使う方法

それではまず傍点を使う方法から。厳密に言うと傍点ではないのですが、傍点っぽくなる表示をhtmlだけで実装します。

方法はとても簡単で、

上記のコードで表示できるようになります。

<rb>タグの中には、表示したい文字を入力。あとは、<rt>タグの中に・を書いて傍点っぽい実装にします。

ただ、この傍点っぽいものをhtmlで実装する際には文字列が長くなると傍点の位置がずれてくるので、分割して調整する必要があります。

ブログでルビを使う方法

それでは次にルビを使う方法の紹介を。

とは言っても先ほどのコードと全く同じです。

傍点（ぼうてん）

こんな感じでルビを振ることができます。

傍点に関しては本来、ルビを振る機能を・を使って傍点が振られているように見せかけているだけですね。

追記

「世界のねじを巻くブログ」さんでコメントいただきました。ニーズあるのか分からなくて書くか迷いましたが、、、書いて良かった！

記事中では

あとこのコード、同じ文章に続けてルビを振った語句を入れることは出来ないのでしょうか？

このように触れられています。

なるほど、同（おな）じ文章内（ぶんしょうない）での使用（しよう）を想定（そうてい）した実践的（じっせんてき）な説明（せつめい）が抜け落ちていました！

以下で詳しく説明します。

同じ文章内で小説のようにルビを振り分ける方法

解決方法はいたってシンプルです。ブログでは1つの文章の塊がタグ内に収まります。

なので、ここが文章だよ　この中に収めるような形で記載すると同じ文章内でルビを振り分けることができます。

それでは実際にやっていきましょう。

まず、文章を入力します。

我輩は猫である

7文字の短い文章ですが、あくまでサンプルで長い文章でもOKです。

次に、画面上側にある「HTML編集」にモードを切り替えます。すると、

我輩は猫である

このように１つの文章がに囲まれています。

ここから少々手間がかかりますがルビを振り分けたい文章、ここでは「我輩」と「猫」の箇所に上記で紹介した

こちらのルビを振り分けるコードを任意の漢字とルビを入力して挿入します。

作成したルビを含んだコードを任意の箇所に挿入していきます。

<ruby><rb>我輩</rb><rp>（</rp><rt>わがはい</rt><rp>）</rp></ruby>は<ruby><rb>猫</rb><rp>（</rp><rt>ねこ</rt><rp>）</rp></ruby>である

ポイントは一度、見たままモードで文章を入力してから後でルビを挿入したい箇所にコピペで<ruby>タグを貼り付けるとやりやすいです。

そうすると・・・

我輩（わがはい）は猫（ねこ）である

同じ文章内でルビを振ることができましたね！繰り返しになりますが、タグで囲まれた文章であれば、長文でもルビを振り分けることが可能になります。

まとめ

ブログで傍点やルビを振る方法は意外と簡単でした。

傍点やルビを使う機会はかなり限定的なような気もしますが、文字の装飾って意外と大事ですよね。

文字の色や大きさを変えたり、ただ文字をずらっと並べる文章よりもメリハリを付けることができます。

読ませるブロガーさんほど、意識してか無意識か文字列にメリハリがあるように感じます。

読ませることが上手いブロガーさんを見ているとSEOやマネタイズの知識以外にもライティングスキルを磨かないといけないと感じる今日この頃です。それでは今日はこの辺で。