【はてなブログ】記事本文の文字色をカスタマイズ

固定概念とも言えるのかもしれませんが、なんとなくブログの記事本文の「文字色＝黒」と思っていませんか？

背景が白であることが多いため黒にすると見やすいことは間違いないと思いますが、もしかしたらここを工夫することで他のブログと差別化できるかもしれません。

そこで、今回ははてなブログで記事本文の文字色を変更する方法をお伝えします。

今回ももちろんコピペで可能なカスタマイズです。

はてなブログの人気テーマのデフォルトの文字色を確認

まずは、はてなブログの人気テーマのデフォルトの文字色を確認してみたいと思います。

minimalism：#3f3f3f

Brooklyn：#111111

UnderShirt：#454545

Haruni：#454545

Innocent：#333333

SOHO：#666666

上記がデフォルトとなっています。
※筆者調べですので間違い等ありましたら申し訳ありません。

多少コードに差はあれど、全て黒系統(ひとつだけグレー系統かな？)となっています。

※HTMLカラーコードをご存じない方はこちらを参考にしてみて下さい
→WEB色見本原色大辞典 - HTMLカラーコード

黒系統と言っても本当に真っ黒なものからグレーがかった薄い黒も存在し、どの色が自分のブログに一番合っているかを見つけるのは至難の業だとは思いますが、今回はこれらのカラーコードをCSSで書き換えてみたいと思います。

はてなブロガーにはお馴染みのデザインCSSに下記のコードをコピペしましょう。

ダッシュボード→デザイン→カスタマイズ(スパナマーク)→デザインCSS

/*本文文字色*/

.entry-content {

    color: #222222;

}

これをコピペするのみです。

ちなみに、「#222222」のところを自分好みの色のコードに変えることで自由自在に本文の文字色を設定することが出来ます。

実は私はこの「Brooklyn-カスタマイズ」以外にもブログを所有しています。
→薬剤師とザリガニの奮闘記

そちらのブログのテーマは「minimalism」を使用しています。

普段から何んとなく本文が読み辛いと感じていたのですが、その原因が本文の文字色にありました。

そのため上記の方法で「#3f3f3f」から「#222222」に変更したところ、私的にはすごく読みやすくなりました。

#3f3f3fは少しグレーが強い黒なんですよね。

個人的にはもう少し黒が強い方が読みやすいと判断し#222222へ変更した次第です。

皆さんもご自身のブログの設定を見直ししてみてはいかがですか？