WordPressブログでオススメの文字色はこれです。

BLOG

皆さんはサイトを見ていて「文字色」を意識したことがありますか?

ほとんどの方は意識したことがないと思われます。

この文字色も「真っ黒」と思われますよね。

実は、これ「グレー」なのです。

(黒かグレーは正確な区分けがなく個人の主観の差なので、正式に言うと「意識的に真っ黒ではなくしている」と言う表現が正しいですね。ここでは、説明をわかりやすくするために「グレー」とさせて頂きます。)

文字色は、読み手の見やすさとブログのデザインや印象に影響します。

なので、ここでオススメの文字色を紹介したいと思います。

文字色の重要性
  • 読み手の目に優しく読みやすくなる
  • ブログのデザインや印象に影響する
スポンサーリンク

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.変更したい項目のアイコン(下の画像を参考にしてください)を選択して変更しましょう。

文字の色を変更

文字のマーカー色を変更

文字のサイズを変更

タグを表示する

ここではオススメの文字色等を紹介しました。

読み手とって心地よいことを最優先に意識したブログにしましょう。

この記事を書いた人
しょし

僕はどこにでもいるただの「しょし」です。
ブログを勉強しながら備忘録として執筆中。
大学でプログライングを勉強→就活で150社落ちる→入社したがパワハラで円形脱毛8個できる→6年間世界各国で仕事をする→帰国しパワハラにあう→休職→ブログ設立/ブログ、ガジェット、人生論など執筆。

しょしをフォローする
BLOG
スポンサーリンク
しょしをフォローする
Shooo blog

コメント

  1. R より:

    なるほどー!!
    フォントは何がオススメでしょうか?

    • しょししょし より:

      Rさん
      コメントを頂きましてありがとうございます。
      フォントは好みで良いと思います。
      いくつか選択出来ますが、私は「小杉丸ゴシック」というフォントを使用しています。
      自分らしさを表せるフォントが良いかと思います。

  2. R より:

    お返事ありがとうございます。
    そうですね!自分らしさ出していこうと思います。
    相談して良かったです!
    これからも拝見させていただきます。

    • しょししょし より:

      Rさん
      一つフォントでアドバイスを言うなら、明朝は長文を読み際に読みやすい書体で、ゴシックは短文を読むのに読みやすい書体です。参考にしてみてください。

タイトルとURLをコピーしました