読者です 読者をやめる 読者になる 読者になる

MUTANT

SEOとかブログマネタイズとかブログ旅とか

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

はてなブログカスタマイズ

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

こんにちは、てつです。

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

 

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

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

 

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

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

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

 

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

 

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

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

 

ブログで傍点を使う方法

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

方法はとても簡単で、

<ruby><rb>傍点</rb><rp>(</rp><rt>・・</rt><rp>)</rp></ruby>

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

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

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

 

ブログでルビを使う方法

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

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

<ruby><rb>傍点</rb><rp>(</rp><rt>傍点</rt><rp>)</rp></ruby>

傍点ぼうてん

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

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

 

まとめ

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

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

 

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

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

 

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

 

Copyright © 2016 MUTANT All rights reserved.