2012年02月06日
文字色
昨日の記事の続きです。
前の記事では、
使用しているテンプレートが
背景に画像を使用していない場合の白背景は
「ブログの設定」>「テンプレート」の使用中テンプレート、
「カスタマイズ」で「スタイルシート」の中の
該当するタグを修正するだけで
背景色を変えることができますが、
テンプレートの多くは、
背景にも画像を使ってあります。
背景画像は、
レイアウトや内部のデザインと
合体していることが多いので
記事部分の背景だけを
変更することが難しい。
また、
ちょっと眩しいとは言え、
大多数のホームページやブログの背景は白色で
みなさんに馴染みがありますし、
清潔感を演出できるのも間違いないので
背景色を白にするケースも多いでしょう。
このブログも記事部分の背景色を白にしています。
では、背景色が白の場合、
文字をどうすれば視認性が上がる
または目に優しいのでしょう。
まず文字色を調整します。
暗色背景の時も、
背景と文字の色の輝度差(コントラスト)を
少し縮めてあげれば良いと書きましたが
白い背景の場合も同じです。
文字色を黒では無く、
少しだけ薄いグレーにすると
かなり読みやすくなります。
文字に関して大事な設定要素が
もうひとつあります。
文字のサイズ(フォントサイズ)について。
それは次回の話にしましょう。
>>次の記事 「文字サイズ」
前の記事では、
サイトのテーマカラーに沿った暗色を背景に敷き
同系色の明るい文字を乗せると
読みやすくなりますよという話でした。
しかし、
白い背景色のテンプレートを使用していたり、
白い背景でスッキリさせたい場合はどうしたらいいのか
というのが本日のお話です。
前々回の記事で、
白い背景は眩しくて目に優しくない
と書きました。
同系色の明るい文字を乗せると
読みやすくなりますよという話でした。
しかし、
白い背景色のテンプレートを使用していたり、
白い背景でスッキリさせたい場合はどうしたらいいのか
というのが本日のお話です。
前々回の記事で、
白い背景は眩しくて目に優しくない
と書きました。
使用しているテンプレートが
背景に画像を使用していない場合の白背景は
「ブログの設定」>「テンプレート」の使用中テンプレート、
「カスタマイズ」で「スタイルシート」の中の
該当するタグを修正するだけで
背景色を変えることができますが、
テンプレートの多くは、
背景にも画像を使ってあります。
背景画像は、
レイアウトや内部のデザインと
合体していることが多いので
記事部分の背景だけを
変更することが難しい。
また、
ちょっと眩しいとは言え、
大多数のホームページやブログの背景は白色で
みなさんに馴染みがありますし、
清潔感を演出できるのも間違いないので
背景色を白にするケースも多いでしょう。
このブログも記事部分の背景色を白にしています。
では、背景色が白の場合、
文字をどうすれば視認性が上がる
または目に優しいのでしょう。
まず文字色を調整します。
暗色背景の時も、
背景と文字の色の輝度差(コントラスト)を
少し縮めてあげれば良いと書きましたが
白い背景の場合も同じです。
文字色を黒では無く、
少しだけ薄いグレーにすると
かなり読みやすくなります。
これが真っ黒の文字。
数行程度なら読みやすく感じますが、
ハッキリしすぎていて
行が増えると目が疲れることがあります。
数行程度なら読みやすく感じますが、
ハッキリしすぎていて
行が増えると目が疲れることがあります。
このくらい薄い灰色の文字だと
ちょっとボヤけてしまいます。
これはやり過ぎ。
もう少し濃くします。
ちょっとボヤけてしまいます。
これはやり過ぎ。
もう少し濃くします。
真っ黒からちょっとだけ薄く設定。
真っ黒から20%ほど落としたグレーの文字色です。
これなら長文でも読みやすそうです。
色を付ける場合も
このように
あんまりハッキリした明るい色を付けると
色味によっては眩しくなったり
輝度差が小さくて読みにくかったりするので
このくらい
濃くしておくほうが良いでしょう。
(↑)この部分、ちょっとだけ茶色が混じった濃い色です。
真っ黒から20%ほど落としたグレーの文字色です。
これなら長文でも読みやすそうです。
色を付ける場合も
このように
あんまりハッキリした明るい色を付けると
色味によっては眩しくなったり
輝度差が小さくて読みにくかったりするので
このくらい
濃くしておくほうが良いでしょう。
(↑)この部分、ちょっとだけ茶色が混じった濃い色です。
文字に関して大事な設定要素が
もうひとつあります。
文字のサイズ(フォントサイズ)について。
それは次回の話にしましょう。
>>次の記事 「文字サイズ」
格安は格安なりなのでしょうか、サーバー
それでもワードプレスの利用をやめられないワケ
ロリポップに設置したワードプレスがハックされた事後処理の覚書
メールマガジン着信
スタイルシートのお話
文字サイズ
それでもワードプレスの利用をやめられないワケ
ロリポップに設置したワードプレスがハックされた事後処理の覚書
メールマガジン着信
スタイルシートのお話
文字サイズ
Posted by いーじー at 00:55│Comments(0)
│ブログあれこれ