2006年09月23日

文字の設定(2) 色

[修正あり(2007/2/22)]
今日は、文字の色について考えてみます。

ブログのデザインは実に豊富で、一概には言えないんですよね。
背景色もまちまち。背景に色を敷かないで画像にしてある場合もあるんだし。

だから、ここでは、このテンプレートのように背景の色が白の場合ってことで捉えてください。

色のコントラスト(強弱)は、読みやすさを大きく左右すると思うんですよ。
もっともコントラストが強いのが白×黒。
紙の媒体、つまり本とか雑誌とかは、白×黒が基本だと思うんですね。
誰にでも読みやすいから。

ところが、パソコンのモニタを見ているときは、白×黒だと目がみょ〜に疲れてくるんですよ。意外なことに。
コントラストをちょっと弱くすると、目が疲れにくくなります。多少はね。

コントラストが弱すぎると、凝視することになって目が疲れます。
文字が小さくてコントラストが弱いと、読む気になれない人が続出するでしょうね、おそらく。でも、そういうブログも見かけるんですけどね〜。

以下に黒からグレーの色見本を並べてみます。
 
■色:#000000 (black)
ブログの文字の色について検証します。これはsample textです。ブログの文字の色について検証します。これはsample textです。


■色:#444444 ⇒ 私はこの辺を使うことが多いかな
ブログの文字の色について検証します。これはsample textです。ブログの文字の色について検証します。これはsample textです。


■色:#696969 (dimgray)
ブログの文字の色について検証します。これはsample textです。ブログの文字の色について検証します。これはsample textです。


■色:#808080 (gray)
ブログの文字の色について検証します。これはsample textです。ブログの文字の色について検証します。これはsample textです。


■色:#a9a9a9 (darkgray)
ブログの文字の色について検証します。これはsample textです。ブログの文字の色について検証します。これはsample textです。


■色:#d3d3d3 (lightgray)
ブログの文字の色について検証します。これはsample textです。ブログの文字の色について検証します。これはsample textです。



さぁ、どの辺までが文章の文字として読みやすいと思いますか?
私にとっては、dimgrayまでかなぁ。

文字色を設定するのは、前回同様、

  マイ・ブログ > デザイン

と進むと、「おすすめデザイン」の下に、自分が使用または登録しているデザインのリストがあります。
現在使用しているデザインのタイトルをクリックして、スタイルシートを開きます。
※2007年2月6日のリニューアルでスタイルシートの場所が変更になりました。

それぞれのスタイルシートで設定してある箇所が違うと思うんですけど、このテンプレートではページ全体の文字を指定する所で指定してあります。
これも、前回と同じところですね。
#container {
margin: 0 auto;
padding: 1px 0 0 0;
width: 800px;
color: #4A4A4A;
font: 12pxVerdana, sans-serif;
border-left: 1px solid #999;
border-right: 1px solid #999;
background: #fff;
}

このブログでは、文字色は#4A4A4Aになっていることがわかるでしょ?

色については、注意がひとつ。
印刷物と違って、モニタで見る色は環境によって変わります。
ブラウザによって変わるし、モニタの種類や設定によっても変わります。
自分が見ている色とまったく同じ色でみんなが見ているとは限らないんです。
ちなみに、うちのモニタでは、パステル調が売りの素材屋さんのサイトの色が識別できないことがあります(笑)。

色の種類については、
IT用語辞典 e-Words
 HTMLのカラーネーム
 http://e-words.jp/p/r-colornames.html

カラーコードパレット
 http://www.shoshinsha.com/hp/color/color.html
あたりが参考になります。

↓参考になったら、クリックで応援してね!↓


この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/24269873
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
以下の書籍がきっと参考になります