皆さんはサイトを見ていて「文字色」を意識したことがありますか？
ほとんどの方は意識したことがないと思われます。
この文字色も「真っ黒」と思われますよね。
実は、これ「グレー」なのです。
(黒かグレーは正確な区分けがなく個人の主観の差なので、正式に言うと「意識的に真っ黒ではなくしている」と言う表現が正しいですね。ここでは、説明をわかりやすくするために「グレー」とさせて頂きます。)
文字色は、読み手の見やすさとブログのデザインや印象に影響します。
なので、ここでオススメの文字色を紹介したいと思います。
WordPressブログでオススメのオススメの文字色
基本の本文文字色と文字サイズ
まずは基本の文字色ですが、先程もお話したようにグレーをオススメします。
カラーコードは、「#383838」です。
黒「#000000」とグレー「#383838」の差がどのくらいか確認してみてください。
文字サイズは16pxで行の高さが1.2emがオススメです。
これは、Googleが「読みやすいフォントサイズの基準」にて推奨している文字サイズです。
- カラーコード・・・シャープ「#」に続く6桁の16進数で表されます。2桁ごとに赤・青・緑の濃淡が表され、16進数の（0～F）の0が最も色が薄く、Fに近くほど濃い色となります。
- em・・・出版で使用される長さの単位です。文字の大きさを表します。
強調したい文字色
強調したい文字色はコントラストが強めですが赤色をオススメします。
カラーコードは、「#ff0000」です。
また、強調することで裏ではHTMLのコーディングがされているため、SEOとしても効果があります。
一つのページにたくさんの強調したい文字色パターンがあると読みづらいため、2〜3種類程度に絞りましょう。
強調パターン
以下のような強調パターンをオススメします。
- 太文字
- 黄色背景
- 黄色背景+太文字
- 赤文字
- 赤文字＋太文字＋黄色背景
WordPressブログ文字色の変更方法
ブログ全体で文字色を変更する
ここでは、ブログサイト全体の文字サイズと文字色を変更していきます。
以下の手順で変更してみましょう。
1.ワードプレスのダッシュボードを開きます
2.左バーの『Cocoon設定』→『Cocoon設定』をクリックします。
3.『全体』のタグをクリックします。
4.『サイトフォント』の『文字サイズ』を16pxにします。
5.『文字色』を「#383838」に変更します。
6.『モバイルサイトフォント』を16pxにします。
記事で文字ごとに設定を変更する
ここでは、記事の文字ごとに色やサイズを変更するやり方を紹介しています。
1.文字を入力すると上にバーが表示されます。
2.変更したい項目のアイコン(下の画像を参考にしてください)を選択して変更しましょう。
文字の色を変更
文字のマーカー色を変更
文字のサイズを変更
タグを表示する
ここではオススメの文字色等を紹介しました。
読み手とって心地よいことを最優先に意識したブログにしましょう。
コメント
なるほどー！！
フォントは何がオススメでしょうか？
Rさん
コメントを頂きましてありがとうございます。
フォントは好みで良いと思います。
いくつか選択出来ますが、私は「小杉丸ゴシック」というフォントを使用しています。
自分らしさを表せるフォントが良いかと思います。
お返事ありがとうございます。
そうですね！自分らしさ出していこうと思います。
相談して良かったです！
これからも拝見させていただきます。
Rさん
一つフォントでアドバイスを言うなら、明朝は長文を読み際に読みやすい書体で、ゴシックは短文を読むのに読みやすい書体です。参考にしてみてください。