【AFFINGER5】フォントサイズは実は重要！？アフィンガーで記事を見やすいように文字のサイズとカラーの設定を変更したので紹介！！

記事の見やすさって文字の大きさと行間なんですよ！！っていうのをよく見かけます！！

実は本当に重要なんです！！！

アフィンガーでは初期設定で読みやすいように文字の大きさを変更できる設定があります。

今回はアフィンガーの機能を使ってフォントサイズとカラーを見やすく変更してみました！！

便利ですよね、有料テーマ！！！

フォントサイズの適性は？

フォントの最適サイズは基本的にどのサイトも違います。

これが正解というのはありません。

とりあえず最初はググってみました！！

とりあえず指標を見つけて設定します。その後自分でブログを見ながらサイズをいじっていきます！！

基準のサイズを紹介

とりあえずはこのサイズにしましょう！

因みにアフィンガーでフォントサイズと行間を変える時は

「AFFINGER5 管理」→「デザイン」→「フォントサイズ」から変更できます。

PC（960px以上）閲覧時

	サイズ（px）	行間（px）
基本（Pタグ他）	17	31
記事タイトル	19	36
H2タグ	19	31
H3タグ	18	31
H4タグ	17	31

タブレット閲覧時

	サイズ（px）	行間（px）
基本（Pタグ他）	17	32
記事タイトル	22	40
H2タグ	21	33
H3タグ	21	33
H4タグ	17	31

スマホ閲覧時

	サイズ（px）	行間（px）
基本（Pタグ他）	17	33
記事タイトル	25	42
H2タグ	24	40
H3タグ	19	40
H4タグ	18	40

ここからサイト毎に手直しをしていきます。

当ブログでのサイズ（2020/06/21）

スクショを公開していきます。

最新のサイズはこちら！

パソコン

スマートフォン

タブレット

こんな感じになりました。

正直こだわったのは一番上の基本（Pタグ他）だけです。

あとはそれぞれ合わせていますが、基本的に現代ではスマホでネットを見る方が多いのでスマホの表示は注意してみていきたいところです！！

テーマによっての違い

フォントサイズを紹介しましたが使用しているテーマによっても最適なサイズは違います。

僕はアフィンガーなんでアフィンガーでの設定画面でアフィンガーに合うように設定しましたが、テーマによってデザイン違いますので気をつけてください！！

何度か見直して自分のサイトのに合った大きさを探してみてください！！

フォントのカラーの変更

記事の見やすさにはフォントサイズも重要ですが、実はカラーも大切なんです。

基本的にはどのブログも初期設定では文字のカラーは「#000000」となっている場合が多いです。

ここも見てあげると閲覧しているユーザーに優しいですよ！！

アフィンガーでの設定方法を紹介します！

他のテーマを使っている方も基本的にテキストのカラーを変更できれば問題ありません！！

「外観」→「カスタマイズ」→「各テキストとhタグ（見出し）」→「テキスト色一括変更」です。

ここで文字色を「#333333」か「#444444」に変えてあげます！！

こうする事で閲覧時に少し見栄えが変わります！

000000の時

333333の時

結構違いませんか？

真っ黒よりも少し柔らかくなります。「#444444」にするとさらに柔らかい色になります！

ブログのテーマカラーをパステルカラーにしている方は結構いいと思いますよ！！

こうやって一手間加えるだけでも記事の見え方は結構変わってくるものです。

是非設定しておきましょう！！

まとめ

フォントサイズによって記事の見え方全然違います！！

これめちゃくちゃ重要なんです！

僕も最初に設定するべきだと後悔しました。

ぜひ変更してから記事を書いてみてください！！

以上っ！