ご冗談でしょう、チャッキーさん

チャッキーさんの旅と読書とWordPress学び備忘録

ブログ記事で黒文字はダメ!WordPressで文字の色を変更しよう

約 6 分

世の中には数多くのブログが存在します。2014年には10億サイトを突破し、今後も増加が予想されます。(情報元:AFP通信 )

インパクトのあるトップ画面、美しい写真レイアウト、スマホを意識したスペースなどなど……その数だけ制作者のこだわりがあります。

なかでも、僕が優秀だと感じたサイトには「ちょっと変わった共通点」がありました。それは、

 

「文字の色」

 

2017年現在ほとんどのサイトが「黒文字」ですよね、でも優良なサイトは黒じゃなかったんです。YahooもGoogleも……今回はそんなブログで使用する文字の色について書きたいと思います。

ブログ記事で黒文字の使用はダメ?

「文字の色が黒じゃなかったらどんな色なんだよ?」と疑問をお持ちの方もいらっしゃるかもしれません。

まず僕のサイトで「黒を使用してた時」と「変えた時」の違いをご覧ください。※クリックすると大きくなります。

Before

WordPress文字色変更

After

WordPress文字色変更

皆さんこの色の差分かりますか?

正解は「ちょっとだけ灰色になっている」です。

「オイオイ!こんなのに何の意味があるんだよ!」と思ったかもしれません。でも、実はこの差って結構大きいんです。特に写真よりも文字が多めに書かれているサイトでは……

ちなみにカタマリで見ると差がよくわかります↓ ↓

記事の文字色変更

記事の文字色変更

僕のように文字ばかりのサイトだと、訪問者は必然的に文字を追う事になります。この時、サイトの景が白で黒文字だとコントラストがハッキリしすぎて、目が疲れてしまうんです。

「疲れる」というのは脳機能的に言うと「飽きる」という事です。つまり、記事の途中で離脱する人が多くなってしまいます。

これは決して僕が勝手に言だした絵空事ではなく、人間の目と脳がそのように出来ているという脳の研究結果によるものです。

ちなみに、大手検索サイト「ヤフージャパン」の記事をご覧になれば分かると思いますが、黒文字を使っていません。↓ ↓ ↓

ヤフーの文字色

理由は、やはり訪問者が疲労を感じないようにでした。そして、僕が優秀だと感じたブログ制作者も同じように文字の色を変更していたのです。

ちなみにAmazonの場合は

Amazon文字の色

ベースの文字色は「#111111」と黒に近いですが、「商品の説明」の部分は「#333333」でした。他、楽天のトップページも「#333333」です。

どうやら#333333が一般的に見やすい色なのでしょう。ということで、これから僕のブログもYahooと同じ文字色に変更します。まだデフォルト設定のまま「黒文字」を使っている人は、この機会に変更してみてはいかがでしょうか?

文字色の変更方法

文字の色を変更するのは超カンタンです。

↑ ↑ をスタイルシートに貼り付けるだけです。「#333」というのが文字の色になります。ヤフージャパンもこの色を使用しています。

これだけでも良いのですが、行間や改行のスペースなども合わせた方が更によくなると思いこのように変更しました。

これで、日本語の文章は日本人が読みやすく疲れにくいとされる表記になったはずです。残る問題は記事の質です。残念ながら……コレばかりは初心者の僕ではどうすることも出来ません(T_T)

疑問!どうやってヤフーのレイアウトを理解したの?

「お前みたいなバカがどうやってヤフーの装飾を理解したの?」と不思議に思う方もいらっしゃると思いますので、簡単にトリックをお伝えします。

※Google Chromeを使用しての紹介になります。

例えば、↓ ↓ の記事でどのようなCSSが使われているか知るには、

まず、知りたいcssの部分を選択します。↓ ↓

次に右クリックで「検証」というボタンを押します。↓ ↓

すると、右側に二列のコードが表示されました。↓ ↓

WordPress文字色変更

この右側に表示された「Style」にCSSが記述されています。

WordPress文字色変更

最初はコレを見ただけではなかなか理解できないかもしれません。でも、毎日見ていたらけっこう読めるようになります。

この中でフォントに対する記述を探すのです。↓ ↓

WordPress文字色変更

このフォントについて書かれたコードでクラスがどうなっているのかを見て、変更したい部分をそのままスタイルシートにコピペしたらokです。(とはいえ、そんなに簡単にはいかないですが・・・)


最初は「コレかな?」と思うコードで構わないので自分のcssにそのコードを貼り付けてみましょう。上手く行けば反映されるし、ダメだったら反映されません。

その違いがなんなのか?なぜダメだったのか?「ネット」でも「本」でも良いので調べてみましょう。僕のように独学でやっている人は出来るだけ多くの失敗をして、WordPressがぶっ壊れるまでやることをオススメします。

以前の僕のように「壊れるのが惜しい!」と思っていたのでは、何も吸収できません。何度かぶっ壊れるたびに、メンタルブロックが外れ多くの事が吸収出来るようになります。結果的に人から手とり足取り教えてもらうより成長出来るはずです。

それでも解決出来ない場合はコチラ↓↓

どんなに頑張ってcssをイジっても、ぶっ壊れる事はありません。そしてコレだけは忘れないでください。phpとかサイトの核となるファイルをイジる時は、必ずバックアップを取ってから行いましょう

ポイント
チャッキー
本日も最後までお付き合い頂きましてありがとうございました

ブログランキングに参加してます。

にほんブログ村 ブログブログへ

クリックすると現在の順位が表示されます。

About The Author

チャッキーさん
ご訪問ありがとうございます。管理人のチャッキーと申します。
日本語を学ぶ為にブログを始めました。内容は主に旅と読書とWordPressという全く自分の知らない世界についてです。現在、南米をぷらぷら散歩中。時々、出稼ぎのため広島県にいます。

Leave A Reply

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

オススメ記事