記事の見やすさって文字の大きさと行間なんですよ!!っていうのをよく見かけます!!
実は本当に重要なんです!!!
アフィンガーでは初期設定で読みやすいように文字の大きさを変更できる設定があります。
今回はアフィンガーの機能を使ってフォントサイズとカラーを見やすく変更してみました!!
便利ですよね、有料テーマって!!!
あわせて読みたい
-
【Word Press】AFFINGER5(アフィンガー5)の使い方・カスタマイズ方法!最初にやっておくべき設定を紹介!!
続きを見る
フォントサイズの適性は?
フォントの最適サイズは基本的にどのサイトも違います。
これが正解というのはありません。
とりあえず最初はググってみました!!
とりあえず指標を見つけて設定します。その後自分でブログを見ながらサイズをいじっていきます!!
まずはこのサイズ
とりあえずはこのサイズにしましょう!
因みにアフィンガーでフォントサイズと行間を変える時は
「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 |
ここから自分のサイトに合わせて手直しっ!!
僕のブログではこうしました
スクショを公開します〜!!
パソコン
スマホ
タブレット
こんな感じになりました。
正直こだわったのは一番上の基本(Pタグ他)だけです!!
あとはそれぞれ合わせていますが、基本的に現代ではスマホでネットを見る方が多いのでスマホの表示は注意してみていきたいところです!!
テーマによっての違い
フォントサイズを紹介しましたが
テーマによっても最適なサイズは違いますよ!!
僕はアフィンガーなんでアフィンガーでの設定画面でアフィンガーに合うように設定しましたが、テーマによってデザイン違いますので気をつけてください!!
何度か見直して自分のサイトのに合った大きさを探してみてください!!
フォントのカラーの変更
記事の見やすさにはフォントサイズも重要ですが、実はカラーも大切なんです。
基本的にはどのブログも初期設定では文字のカラーは「#000000」となっている場合が多いです。
ここも見てあげると閲覧しているユーザーに優しいですよ!!
アフィンガーでの設定方法を紹介します!
他のテーマを使っている方も基本的にテキストのカラーを変更できれば問題ありません!!
「外観」→「カスタマイズ」→「各テキストとhタグ(見出し)」→「テキスト色一括変更」です。
ここで文字色を「#333333」か「#444444」に変えてあげます!!
こうする事で閲覧時に少し見栄えが変わります!
#000000の時
#333333の時
結構違いませんか?
真っ黒よりも少し柔らかくなります。「#444444」にするとさらに柔らかい色になります!
ブログのテーマカラーをパステルカラーにしている方は結構いいと思いますよ!!
こうやって一手間加えるだけでも記事の見え方は結構変わってくるものです。
是非設定しておきましょう!!
まとめ
フォントサイズによって記事の見え方全然違います!!
これめちゃくちゃ重要なんです!
僕も最初に設定するべきだと後悔しました。
ぜひ変更してから記事を書いてみてください!!
以上っ!