blog font color

AFFINGER6 ブログ

アフィンガー6で文字色を変更する方法【ブログ文字色は真っ黒NG】

こんにちは。運営者のあおいろです。

Twitterはこちらから→@ao_bloger

今回は、アフィンガー6で記事本文の文字色を変更する方法を解説します。

文字色は、

真っ黒よりもグレーに近い方が目が疲れない

※背景が白地の場合

といわれています。

内容だけでなく、文字色にまで配慮した、読者が読みやすいブログをつくっていきましょう。

文字色の比較画像ものせていますのでぜひご覧ください。( `ー´)ノ

アフィンガー6で文字色を変更【ブログ文字色は真っ黒NG】

AFFINGER6 change font color

さっそくAFFINGER6で文字色を変更する方法を見ていきましょう。

文字色の比較はこちらからジャンプできます。

AFFINGER6で記事本文の文字色を変更する方法

記事本文の文字色は下記の手順で変更できます。

【 外観 】→【 カスタマイズ 】→【 見出しタグ ( hx )/ テキスト 】→【 テキスト色一括変更 】→【 色を選択 】

1.ワードプレス管理画面で外観カスタマイズの順にクリック

blog font color

2.見出しタグ ( hx )/ テキストをクリック

3.テキスト色一括変更をクリック

4.色を選択をクリック

blog font color

4.を指定( ここではカラーコード #333333を指定 )し、最後に公開をクリック

※カラーコード ( # + 数字 ) はすべて半角で入力しましょう。

※タイトルも同じ色にする場合は青枠の部分にチェックをいれてください。

blog font color

これで記事本文の文字色が変更されます。

補足

カラーコード ( # ) を指定しなくても下の画像の赤枠部分を動かせば文字色を変更できます。

blog font color

真っ黒は疲れる?文字色を比較

「 真っ黒 」な文字は読んでいると目が疲れてくると言われています。

色にはカラーコードがあって ( 例→#123456 )、真っ黒のコードは「#000000」です。

ヤフーやアマゾンなどの有名企業サイトは文字色に重みを帯びたグレー ( #333333 ) を採用しているみたいですが、

実際に真っ黒とのちがいを比較してみました。

比較する色

  1. 真っ黒 ( #000000 )
  2. 重みを帯びたグレー ( #333333 )
  3. ダークグレー ( #515151 )

3種類の色を比較してみます。

あおいろ

↓ ↓ ↓ ↓ ↓

真っ黒:カラーコード #000000

文字色

重みを帯びたグレー:カラーコード#333333 ※大手企業サイトで使用

ダークグレー :カラーコード#515151

比べて見ると全然違いますね。(=゚ω゚)ノ

グレー寄りの方が優しい感じがします。

大手企業サイトが採用している#333333は真っ黒をやわらかくしたような色ですね。

あおいろ

当ブログは大企業様をマネして#333333を使っていましたが、

今はもうすこしグレーに近い#515151を採用しています。

いま読んで頂いているこの記事も#515151なので、文字色はやわらかい印象をうけると思います。(^^)

背景色を " 白 " 以外に設定している方はグレー寄りにしすぎると読みにくい場合があります。背景色に合わせて文字色は選びつつ、彩度や明度を少し低く設定すると目に優しくなります。

まとめ:ブログの文字色を変更して目に優しい記事にしよう

記事を読んで、「 このブログは文字が真っ黒で疲れるなぁ! 」と、

文字が真っ黒だから目が疲れると気づく人は少ない人と思います。

こういう読者が気づかない部分にも配慮するってすごく大切ですね。

あおいろ

「なんか目がチカチカする。」

せっかく読んでくれた読者がこんな風に感じない、目に優しいブログをつくっていきたいですね。

小さいことかもしれませんが、記事の内容と同じくらい大切なことだと筆者は思っています。

あおいろ

今回は以上です。

-AFFINGER6, ブログ