Everyday is like Sunday

毎日がまるで日曜日

letter-spacingを設定するとあなたのブログは読みやすくなるかもしれない

 昨日、自分のブログを読み返していて、どうも読み難いなあと感じた。どうしてだろうと眺めていたら、字がぎゅうぎゅうに詰まって見えるせいかなと思った。だから、CSSを使って字間を調整してみた。個人的には少し読みやすくなったように思うんだけど、どうだろう。

 調整は、letter-spacingというテキストの字間のスペースに関する挙動を指定するCSSプロパティ*1を使用した。letter-spacing設定なしと、調整後のキャプチャを並べて比べてみる。

f:id:ex02xx:20180124152628p:plain
letter-spacing設定なし

f:id:ex02xx:20180124152642p:plain
letter-spacingで調整後


 「読みやすさ」というのは主観的なものだから、感じ方は人それぞれだと思うけど、文字と文字の間の空間が広がることで、いちどに目の中に入ってくる情報量が減るというか、余裕ができてすっきりと軽くなって脳に入り込んでくるように感じないだろうか。読んでいる文字以外の余計なものが入らないので集中しやすくなる。

 他にも、文章の読みやすさは、漢字とひらがなの割合や言葉遣いといった文体が影響すると思うけど、いや、どちらかといえば、いちばん影響があるのはこれだろうか。はてなブログの中でも有名なブログ「Everything you've ever Dreamed*2」は、ぎゅうぎゅう詰めの文章なのに、するするとつっかえることなく読めてしまう。しかも面白い! そう、面白いからするすると読めてしまうんだろうと思う。でも、そうは言っても、残念なことに面白い文章が書ける才能というのは誰でもが持てるものでもない。僕みたいな文才のない人間は、CSSとかをいじって、才能とは関係のないところで、少しはましに見えるようにごまかしてみるのもありだと思うのだけど。

はてなブログでのletter-spacingの設定方法

 設定方法はそんなに難しくないから、わざわざ説明するまでもないと思ったけど、一応、はてなブログの場合を例に簡単にだけど書いておく。

 はてなブログの管理画面のデザインを表示し、レンチマークのアイコン(カスタマイズ)をクリック。デザインCSSという項目があるので、そこに追記することで設定できる。

f:id:ex02xx:20180124181411p:plain


 追記するCSSコードは、以下のような感じで。

 .entry-content{letter-spacing:0.1em;}

 ほとんどのはてなブログでは“.entry-content”のクラス属性に適用させるのでいいと思う。ただ、デザインテーマによっては異なるかもしれないので、これは各人でCSSを確認してやってもらうしかない。

 それとletter-spacingは、数値で設定できる。上の例だと「0.1em」のところ。どれくらい広げるかは好みでどうぞ。それと単位も、px,emなど色々あるけど、これも各人の好みで。……詳しくはググって。さすがに詳細に説明すると大変なのでここまで。

[閉じる]