top3

サイト・ブログの印象が良く読みやすい文字(フォント)の色に変更しよう

Pocket

4086333942_3ba1a069fc

文字を書くときには、白い紙に黒いペンで文字を書くということが一般的ですが、それはブログを書くときも同じことが言えそうです。

白い背景に、黒い文字(フォント)がやっぱり読みやすいいえるかと思います。


しかし、いろいろとサイトをみてると、背景が白で文字が黒でも読みやすいサイトとそうでないサイトがあるんですよね。

目がチカチカして疲れるような・・・


その原因はこんなところにあるんです。


黒だと思っていたら、黒ではない?



まずは「」で文章を書いてみます。
       ↓
この文字は黒で書きました。真っ黒く見えますか?
 

上の文字は黒で書きました。


このブログの背景は白なので、当たり前ですが白と黒のコントラストがハッキリしていますよね。



ここからが本題なのですが、今、僕が打っている文章、実は黒ではないんです・・・

正確に言うなら、グレーよりの黒なんです。



実は、最も疲れにくく、且つ読みやすい文章は黒に近いグレーを使うことなんです

僕もはじめは真っ黒(#000000)を使っていましたが、現在はでは黒に近いグレー(#333333)を使っています。



あまりよくわからないと思うので、ちょっとグラデーションをつけて検証してみましょう。

<font color=”#000000“>これはテストですこれはテストですこれはテストです</font>

<font color=”#111111“>これはテストですこれはテストですこれはテストです</font>

<font color=”#222222“>これはテストですこれはテストですこれはテストです</font>

<font color=”#333333“>これはテストですこれはテストですこれはテストです</font>

<font color=”#444444“>これはテストですこれはテストですこれはテストです</font>

<font color=”#555555“>これはテストですこれはテストですこれはテストです</font>

<font color=”#666666“>これはテストですこれはテストですこれはテストです</font>

<font color=”#777777“>これはテストですこれはテストですこれはテストです</font>

<font color=”#888888“>これはテストですこれはテストですこれはテストです</font>

                 

これはテストですこれはテストですこれはテストです (#000000)
これはテストですこれはテストですこれはテストです (#111111)
これはテストですこれはテストですこれはテストです (#222222)
これはテストですこれはテストですこれはテストです (#333333)
これはテストですこれはテストですこれはテストです (#444444)
これはテストですこれはテストですこれはテストです (#555555)
これはテストですこれはテストですこれはテストです (#666666)
これはテストですこれはテストですこれはテストです (#777777)
これはテストですこれはテストですこれはテストです (#888888)




こうすると一目瞭然ですね。


一文だけではなく、文字数を多くすることによってもっと違いがわかるようになります。

ブログのデザインから文字の色を考えてもいいかと思いますが、#222222~#444444ぐらいの色を使ってみるのがいいかと思います。


文字の色の設定方法


おそらく、どのテンプレートでは色の変え方というのはさほど変わらないと思います。

ここでは賢威というテンプレートを例に文字の色を変える方法を説明してみたいと思います。


まずは「外観」⇒「テーマ編集」⇒「design.css」に移ります。
                  
その後に「サイト全体の共通設定」の下に任意の色のHTMLを入力します。

6325a06a7ddbc4a6e803235ef8beb936

変更をしたら「ファイルの更新」も忘れないようにしてください。


また、もっと細かく黒~白のグラデーションが知りたいかたはコチラのサイトを参考にしてみてください。

さすがにこれだけ細かく変更をしたらわかないかもしれませんが(笑)

コメントを残す

サブコンテンツ