ブログの文字色は何色が読みやすいか【色番号サンプル付き】

ブログの文字色は黒じゃない方がいいって本当？
どんな感じになるか、サンプルを見たい
こんな疑問に答えていきます。

本記事の内容

１．注意したいこと
２．有名サイトの文字の色
３．AFFINGERで文字色を変えるには
４．文字色のサンプル
（１）#444444
（２）#1D2129
（３）#545B63
（４）#3E3E3E
（５）#333333
（６）#545464
（７）#3e1f3e
（８）#00003e
（９）#3e3e1f
（１０）#1f3e3e
（１１）#3e0000

ブログの文字色は真っ黒じゃない方がいいって、有名な話ですよね。

各有名サイトを見ると、微妙に灰色だったり、茶色だったりしますね。

少し薄い色の方が、目に優しいんですよね。
受け取るイメージも変わってきます。

今回は、文字色のサンプルを一気にお見せします。

作業環境

MacOSX High Sierra 10.13.4
AFFINGER5 WING

１．注意したいこと

注意したいことが何点かあります。

（１）ディスプレイによって印象が変わる

ディスプレイによって、だいぶ印象が変わります。
ぜひ、iPhoneでも見てみてください。

スマホはもちろん、タブレットやPCなど、いろんな環境でチェックしてみてください。

（２）見出しと本文で色を変える

見出しは少し濃いめに変えているブログが多いように感じます。

２．有名サイトの文字の色

あまりに迷うので、有名サイトを参考にした方がいいきがしてきました。

	本文の文字色	h2見出しの文字色	サイドバー
ストーク	#545B63	#444 （マウスオーバー#999）	#666 （マウスオーバー#999）
AFFINGER （自分で設定する）	#000000	#000000	#000000
	#333	#7B7B7B	#7B7B7B

このブログの現在の配色はこちら

このブログ、Appcoding.netの配色は現在こちらです。
試行錯誤の過程も載せておきます。

（2018年8月まで）
見出し（h1）…#444444
本文（文章、h2、h3）…#545B63
サイドバー…#545B63

（２回目）
見出し（h1）…#7B7B7B
本文（文章、h2、h3）…#333333
サイドバー…#7B7B7B

見出しタイトルなどが、#7B7B7Bなのは結構かっこいい
しかし、そこを変えると、サイトタイトルや、全体の色味もバランスを取らないといけない
それはちょっと面倒だなと思い始める

（３回目）
見出し（h1）…#444444
本文（文章、h2、h3）…#3e3e3e
サイドバー…#444444

とりあえずバランスがうまく取れそうな#444444に、見出しサイドバーを戻した
文字だけじゃなくて、全体的な色のバランスが大事だと気付いた
あとは、ユーザー目線で、他のアプリ（EvernoteやXcodeなど）とのバランスも考えるといいと思った。

３．AFFINGERで文字色を変えるには

AFFINGERで文字色を変えるには、基本的にはカスタマイズの一括変換で大丈夫です。
細かい部品は、カスタマイズの別の欄に設定があります。（h2、h3、細かい見出しなど）

しかし、それでは変えられないものがあるんですね。

（１）トップページ記事一覧のタイトルの文字色

こちらに関しては、下記サイト様を参照、ヒントにして、スタイルシートに書き込んで強制的に変えれました。
子テーマを用意して入れば簡単だし、トップページ記事一覧の色を変えるのは、効果も高いのでオススメです。

こちらのこの記事のコードのままでは、目的とは違います。
文字色を変えるだけなので、このコードをスタイルシートに貼ればいいと思います。

/*記事一覧の記事タイトルの文字色を変更
------------------------------------*/
dd h3:not(.st-css-no2) a {
color: #444444;
}

（２）記事下の関連記事の記事一覧タイトルの文字色

こちらは調査中です。

４．文字色のサンプル

文字色のサンプルを置いておきます。
例文の内容はパーソナルカラーについて語っていますが、注目して欲しいのは「文字の色」です。

引用や、グレーボックス、マーカーなどの各種の文字装飾も使ってみました。

（１）#444444

この文字色について

今回のこのサンプル文章では、文字の色の読みやすさについて解説していきます。

色が与えるイメージって不思議ですよね。
色が変わると、書き手のイメージまでも変わってくる気がするんです。

例えば、茶色には高貴で落ち着いた印象を与える効果があると言われています。
パーソナルカラー診断と近いですね。

僕のバーソナルカラーは「秋」です。
落ち葉のような茶色、赤色、紺色が似合うようです。

パーソナルカラーに関係するもの
ちなみに、パーソナルカラーに関係するのは、瞳の色、髪の毛、肌の色などらしいです。
意識してみると、僕の瞳の色は黒に近いこげ茶でした。

行き過ぎない感じの淡い色ですね

（２）#1D2129

この文字色について

今回のこのサンプル文章では、文字の色の読みやすさについて解説していきます。

色が与えるイメージって不思議ですよね。
色が変わると、書き手のイメージまでも変わってくる気がするんです。

例えば、茶色には高貴で落ち着いた印象を与える効果があると言われています。
パーソナルカラー診断と近いですね。

僕のバーソナルカラーは「秋」です。
落ち葉のような茶色、赤色、紺色が似合うようです。

わりとはっきり濃い系

（３）#545B63

この文字色について

今回のこのサンプル文章では、文字の色の読みやすさについて解説していきます。

色が与えるイメージって不思議ですよね。
色が変わると、書き手のイメージまでも変わってくる気がするんです。

例えば、茶色には高貴で落ち着いた印象を与える効果があると言われています。
パーソナルカラー診断と近いですね。

僕のバーソナルカラーは「秋」です。
落ち葉のような茶色、赤色、紺色が似合うようです。

人気ブログスタイル、ストークで使われている文字色ですね

（４）#3E3E3E

この文字色について

今回のこのサンプル文章では、文字の色の読みやすさについて解説していきます。

色が与えるイメージって不思議ですよね。
色が変わると、書き手のイメージまでも変わってくる気がするんです。

例えば、茶色には高貴で落ち着いた印象を与える効果があると言われています。
パーソナルカラー診断と近いですね。

僕のバーソナルカラーは「秋」です。
落ち葉のような茶色、赤色、紺色が似合うようです。

すごく優しい文字色に感じます

（５）#333333

この文字色について

今回のこのサンプル文章では、文字の色の読みやすさについて解説していきます。

色が与えるイメージって不思議ですよね。
色が変わると、書き手のイメージまでも変わってくる気がするんです。

例えば、茶色には高貴で落ち着いた印象を与える効果があると言われています。
パーソナルカラー診断と近いですね。

僕のバーソナルカラーは「秋」です。
落ち葉のような茶色、赤色、紺色が似合うようです。

わりとはっきりした印象です

（６）#545464

この文字色について

今回のこのサンプル文章では、文字の色の読みやすさについて解説していきます。

色が与えるイメージって不思議ですよね。
色が変わると、書き手のイメージまでも変わってくる気がするんです。

例えば、茶色には高貴で落ち着いた印象を与える効果があると言われています。
パーソナルカラー診断と近いですね。

僕のバーソナルカラーは「秋」です。
落ち葉のような茶色、赤色、紺色が似合うようです。

モダンな感じ

（７）#3e1f3e

この文字色について

今回のこのサンプル文章では、文字の色の読みやすさについて解説していきます。

色が与えるイメージって不思議ですよね。
色が変わると、書き手のイメージまでも変わってくる気がするんです。

例えば、茶色には高貴で落ち着いた印象を与える効果があると言われています。
パーソナルカラー診断と近いですね。

僕のバーソナルカラーは「秋」です。
落ち葉のような茶色、赤色、紺色が似合うようです。

紫系の茶色

（８）#00003e

この文字色について

今回のこのサンプル文章では、文字の色の読みやすさについて解説していきます。

色が与えるイメージって不思議ですよね。
色が変わると、書き手のイメージまでも変わってくる気がするんです。

例えば、茶色には高貴で落ち着いた印象を与える効果があると言われています。
パーソナルカラー診断と近いですね。

僕のバーソナルカラーは「秋」です。
落ち葉のような茶色、赤色、紺色が似合うようです。

青系

（９）#3e3e1f

この文字色について

今回のこのサンプル文章では、文字の色の読みやすさについて解説していきます。

色が与えるイメージって不思議ですよね。
色が変わると、書き手のイメージまでも変わってくる気がするんです。

例えば、茶色には高貴で落ち着いた印象を与える効果があると言われています。
パーソナルカラー診断と近いですね。

僕のバーソナルカラーは「秋」です。
落ち葉のような茶色、赤色、紺色が似合うようです。

赤っぽいこげ茶

（１０）#1f3e3e

この文字色について

今回のこのサンプル文章では、文字の色の読みやすさについて解説していきます。

色が与えるイメージって不思議ですよね。
色が変わると、書き手のイメージまでも変わってくる気がするんです。

例えば、茶色には高貴で落ち着いた印象を与える効果があると言われています。
パーソナルカラー診断と近いですね。

僕のバーソナルカラーは「秋」です。
落ち葉のような茶色、赤色、紺色が似合うようです。

青緑っぽいこげ茶

（１１）#3e0000

この文字色について

今回のこのサンプル文章では、文字の色の読みやすさについて解説していきます。

色が与えるイメージって不思議ですよね。
色が変わると、書き手のイメージまでも変わってくる気がするんです。

例えば、茶色には高貴で落ち着いた印象を与える効果があると言われています。
パーソナルカラー診断と近いですね。

僕のバーソナルカラーは「秋」です。
落ち葉のような茶色、赤色、紺色が似合うようです。

茶色系

というわけで今回は以上です。

灰色系や茶色系、いろいろ載せました。
実際に見てみると、読みやすさのイメージが湧きますね。

ブログの内容や、元々のテーマの配色、自分の好みによっても変わってくると思います。
僕もこれからも研究していきたいです。