ブログの文字色は黒がNG!WordPressの文字色を変更して読みやすくする方法を解説

ブログの文字色を変更する方法

  • ブログの文字色は黒じゃダメって聞くけど、本当なの?
  • 黒がダメなら何色が良いの?

すもベビ

その疑問にすもベビが答えます。

「ブログの文字色は黒一択」だと思い込んでいる人が多いですが、実は文字色を黒にするのはNGです。

 

この記事では、ブログの文字色に黒がNGな理由と、文字色を変更する方法について解説します。

 

ブログの文字色に黒がNGな理由

ブログの文字色は黒がNG

白のベースカラー(背景色)に黒の文字だと目が疲れる

ブログの文字色に黒がNGな理由はこれに尽きます。

 

ブログの背景色が白(#ffffff)、文字色は黒(#000000)だと、コントラストが強すぎてユーザーの目に負担がかかります。

 

記事を読むとすぐ目が疲れてしまうというのは、ユーザビリティーの点から大きな問題です。

いくら記事の内容が面白くても、目が疲れるとユーザーは早々に離脱してしまいます。

離脱率(直帰率)が高い状態が継続すると、Googleの検索エンジンの評価が下がって検索順位が落ちるリスクがあります。

 

つまり、ブログの文字色を黒にするのは、ユーザビリティーとSEOの両方でNGです。

 

すもベビ

ベースカラー(背景色)を調節して文字色を黒にしておくのはOKです。

 

ベースカラーを含むブログの色については、下の記事で詳しく解説しています。

ブログの色:ベースカラー(背景色)・メインカラー・アクセントカラーの決め方

 

企業サイトも黒は使っていない

大手企業のサイトで使われている文字色を確認してみました。

 

Amazon

Amazon

背景色と文字色
  • 背景色:#ffffff
  • 文字色:#111111~#333333

 

楽天市場

楽天市場

背景色と文字色
  • 背景色:#ffffff
  • 文字色:#333333

 

Google検索結果

Google

背景色と文字色
  • 背景色:#ffffff
  • 文字色:#545454

 

Yahoo!ニュース

Yahoo!ニュース

背景色と文字色
  • 背景色:#ffffff
  • 文字色:#333333

すもベビ

その他の大手企業サイトや各種SNSでも黒(#000000)を使っているところはありません。

 

ブログの文字色はグレーが読みやすい

ブログの文字色はグレー

結論から書くと、ベースカラー(背景色)が白(#ffffff)の場合に読みやすい文字色はグレーです。

グレーと言ってもたくさんの色がありますが、ブログの文字色として使いやすいのは次の5つです。

  • #323232
  • #333333
  • #353535
  • #383838
  • #393939

いずれも濃いグレーで限りなく黒に近いです。

でも、黒(#000000)と比べると白とのコントラストが弱まり、文章を読んだときの目の負担が軽くなります。

 

その他の目が疲れにくい色

上に書いたのは私が本業ブログで使うことの多い色です。

本業のコンサル生に聞いてみたところ、他にも様々な色を使っていることが分かったので参考に書いておきます。

  • #23282D(SANGOのデフォルト)
  • #3E3E3E
  • #1D2129
  • #545B63(STORKのデフォルト)
  • #333333
  • #444444
  • #545454(Googleの検索結果)
  • #545464

 

WordPressブログの文字色を変更する方法

WordPressブログの文字色を変更する

WordPressブログの文字色を変更する方法について書いていきます。

 

文字色を確認する

実はブログの文字色は、テーマによって黒以外が使われていることがあります。

例えば、WordPress有料テーマ「STORK」の場合、本文の文字色はグレー(#545B63)がデフォルトです。

そのため、まずは使用中のテーマに設定されている文字色を確認します。

 

文字色の確認にはGoogle Chromeの「ColorPick Eyedropper」という拡張機能を使います。

ColorPick Eyedropperのページに移動し、「Chromeに追加」を押します。

ColorPick Eyedropper

 

すると「ColorPick Eyedropperを追加しますか」という表示が出るので、「拡張機能を追加」を押します。

ColorPick Eyedropper

 

アドレス欄の横に色相マークが表示されれば完了です。

ColorPick Eyedropper

 

色相マークをクリックすると、下の画像のような表示が出てきます。

ColorPick Eyedropper

 

この状態でマウスの「←(カーソル)」を文字に合わせると、文字色が表示されます。

ColorPick Eyedropper

 

すもベビ

すもブロでは、本文の文字色が黒ではなくグレー(#23282D)になっていることが分かります。

 

WordPressブログの文字色を変更する

①外観→②カスタマイズと進みます。

ブログの文字色を変更する方法

 

カスタマイズ画面が開くので、③「追加CSS」を開きます。

(使用しているテーマによって「追加CSS」の位置は異なります。)

ブログの文字色を変更する方法

 

④任意のカラーコードを入力して「公開」を押します。

ブログの文字色を変更する方法

 

任意のカラーコードを入力するときのコードは次のとおりです(コピペOK)。

 

ブログの文字色のまとめ

ブログの文字色は、ベースカラー(背景色)が白(#ffffff)の場合は黒(#000000)はNGです。

コントラストで文字が読みにくくなるからです。

濃いグレーに変更することで読みやすさが向上し、ユーザーにとって居心地の良いブログになります。

 

WordPressブログなら簡単なコードをコピペするだけで文字色を変更できるので、使用中のテーマの文字色が黒なら早めに変更しておきましょう。

 

もし、ベースカラー(背景色)を白以外にする場合は、コントラストの問題がなければ黒でもOKです。

ただし、実際に記事を読んでみて目が疲れたり読みにくかったりする場合は、読みやすいように調節することが大切です。