言葉の使い方を中心にブログ運営・フリーランスに関することなど、ライティングの仕事に関わる情報を広く紹介するブログです。

Kotoログ

ブログ運営

ブログの文字色を背景色に合わせて読みやすい色に変更する方法

投稿日:2016年12月21日 更新日:

<この記事を読むのに必要な時間は約 4 分です>

今回の記事では、ブログの記事が読みやすくなる文字色について説明します。

記事の背景色に合わせて文字を読みやすい色に変更する

先日このブログの文字色を「黒」から「濃いグレー」に変更しました。

 

それより前にフォントを変えていたのですが、整然としてきれいな印象にはなったものの、それと同時にコントラストの強さが強調されるようになったことが気になっていました。

 

そこで、背景と文字を適度な明暗にして記事が読みやすくなるように変更を加えてみました。

 

記事を読むために程よい文字色とは

記事の背景色が白になっている場合、文字の色が黒だとコントラストが強すぎて読みにくいといわれます。

 

当ブログもそうですが、バックグラウンドカラーが白(#ffffff)だという場合にはこれを黒に近いグレーにすることで目にやさしく読みやすい状態になります。

 

ちなみにこのブログでは濃いめのグレー(#333333)にしましたが、これがグレーだと意識されることはほどんどないかと思います。とはいえ、それくらいの意識されない程度の色合いがちょうどよいといえます。

 

たとえば、黒やもう少し明るいグレーを使った場合と併せて比較してみると以下のような感じになります。

【黒(#000000)を使用する場合】

Kotoログは、言葉の使い方・ウェブライティング・ブログ運営など、ライティングの仕事に関わる情報を広く紹介するブログです。

 

はっきりとして締まった印象ですが、黒の文字が並んでいると若干チカチカします。目の刺激が強く疲れます。

 

またもう少し明るい色にすると、このような感じになります。

【明るめのグレー(#999999)を使用する場合】

Kotoログは、言葉の使い方・ウェブライティング・ブログ運営など、ライティングの仕事に関わる情報を広く紹介するブログです。

 

黒だとコントラストが強く過ぎますが、明るめの色はぼんやりとした間延びした印象になってしまい文章を読んでもらうには向きません。

 

ということで、背景色が白の場合は、ぼやけた感じにならずそれでいて適度なコントラストがあるカラーを選ぶと、目にやさしくまた色の印象が記事を読む上で邪魔にならず適度だといえます。

 

CSSで文字色を変更する

実際に全体の文字色を変更する場合には、WordPress管理画面「設定」⇒「テーマの編集」をクリックし「style.css」を表示します。

 

WordPress管理画面からテーマの編集を表示する場合の操作

 

そして以下のように追加して「ファイルを更新」をクリックすれば完了です。

body {
color:#333333;
}

(今回のケースでは「#333333」を使用していますが、他の色を使用する場合にはこの部分を使用するカラーコードに変えてください)

 

まとめ

文字の色は思っている以上に文章の読みやすさと直結します。記事を読む上で障害にならないような色使いを意識していくとユーザビリティの向上につながりよいかと思います。

-ブログ運営

Copyright© Kotoログ , 2019 All Rights Reserved.