ブログの文字(フォント)色を読みやすい色に変更する方法【コピペ1発OK!】

前々から思っていた事なのですが、当ブログの記事を読んでいると何故か読みづらいんですね。読んでいて目がチカチカするというか、目が疲れるような気がします。

何でや!

当ブログは無料テーマの『Simplicity』を使用していますが、フォントを調べると『Meiryo』となっていました。

※現在のテーマは『SANGO』です。

ごく普通のフォントですね。

フォントが読みづらさに関係がないとすれば、色が関係してくるのでしょうか? 文章の色を見てみると、どうも真っ黒のような気がします、文字色はブラックですね。

一般的にブログの背景は白色なので、文字が黒色ならクッキリと非表示されて、ぱっと見は良いのですが、長時間文章を読み続けると疲れてきます。

せっせと長文を書いても、文字が読みづらくてはどうしょうもありません、そこでブログの文字色をブラック系統から読みやすいグレー系統に変更してみたので、その方法を書き記しておきます。

有名サイトの文字色はどうなっているの?

誰もが知っている超有名サイトの文字色を調べてみました。ちなみに、文字色を調べる方法は、調べたい文章を反転させて右クリックします。

icon-check-square-o Google Chrome

調べたい文章を反転させて右クリック⇒『検証』

ブログの文字(フォント)色を読みやすい色に変更する方法【コピペ1発OK!】

icon-check-square-o Microsoft Edge

調べたい文章を反転させて右クリック⇒『要素の検査』

ブログの文字(フォント)色を読みやすい色に変更する方法【コピペ1発OK!】

icon-check-square-o Mozilla Firefox

調べたい文章を反転させて右クリック⇒『要素を調査』

ブログの文字(フォント)色を読みやすい色に変更する方法【コピペ1発OK!】

基本的にはグレー系統の「#333333」が多いです、やはりブラックは無いですね(笑)。

Amazon#111111 #333333
楽天市場#333333 #666666
Google検索#545454
Yahoo!ニュース#333333
エックスサーバー#222222
Twitter#14171a
やはり黒よりかはグレー系統が好まれるみたいですね。

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

早速ブログの文字色をブラック系からグレー系統に変更していきましょう。コピペ1発で完了できる簡単な方法です。

参考「Simplicity」でフォント色を変更する方法

上記のコードをブログの子テーマのスタイルシート(style.css)に貼りつけるだけでOKです。「color:#@@@@@@ 」の「@@@@@@」を好みの色に変更してください。

WordPressのダッシュボードから『外観』⇒『テーマエディター』と進みます。

ブログの文字(フォント)色を読みやすい色に変更する方法【コピペ1発OK!】

スタイルシートの一番下にコピペしたコードを貼りつけてファイルを更新します。

ブログの文字(フォント)色を読みやすい色に変更する方法【コピペ1発OK!】

ページを更新しても何も変わらない場合は、Ctrlを押しながらF5を押すとブラウザのキャッシュがクリアされてページが更新されます。

スポンサーリンク

ブログのフォント色の違い

では実際にブログのフォント色の違いを見ていきたいと思います。

icon-check-square-o Simplicityデフォルト

ブログの文字(フォント)色を読みやすい色に変更する方法【コピペ1発OK!】

icon-check-square-o #111111

ブログの文字(フォント)色を読みやすい色に変更する方法【コピペ1発OK!】

icon-check-square-o #333333

ブログの文字(フォント)色を読みやすい色に変更する方法【コピペ1発OK!】

icon-check-square-o #666666

ブログの文字(フォント)色を読みやすい色に変更する方法【コピペ1発OK!】

icon-check-square-o #999999

ブログの文字(フォント)色を読みやすい色に変更する方法【コピペ1発OK!】

数字が大きくなるにつれて文字が薄くなっていきます、「#999999」などは、ハッキリとグレーと分かりますね。

あまりグレーすぎるのも何だかな~。

まとめ

ここでは、ブログのフォント色をグレー系統に変更する方法を紹介しました。変更自体はコピペ1発でOKなので簡単に変更出来ると思います。

Simplicityはデフォルトでブラック系統のフォント色だったので、ブログ管理者のワタシ自身が読んでも疲れました。やはりブラック系統よりかは薄めのグレー系統の方が目に優しい感じがします。

結局、当ブログのフォント色は「#555555」に落ち着きました、やや色が薄いかなとも思いましたが、真っ黒よりかは読みやすいかなと思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)