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

記事内に商品プロモーションを含む場合があります。
AFFINGER5 フォントサイズ

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

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

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

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

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

\ アフィリエイトに最適テーマ /

目次

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

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

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

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

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

基準のサイズを紹介

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

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

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

PC(960px以上)閲覧時

サイズ(px)行間(px)
基本(Pタグ他)1731
記事タイトル1936
H2タグ1931
H3タグ1831
H4タグ1731

タブレット閲覧時

サイズ(px)行間(px)
基本(Pタグ他)1732
記事タイトル2240
H2タグ2133
H3タグ2133
H4タグ1731

スマホ閲覧時

サイズ(px)行間(px)
基本(Pタグ他)1733
記事タイトル2542
H2タグ2440
H3タグ1940
H4タグ1840

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

当ブログでのサイズ(2020/06/21)

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

最新のサイズはこちら!

パソコン

スマートフォン

タブレット

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

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

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

テーマによっての違い

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

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

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

フォントのカラーの変更

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

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

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

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

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

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

ここで文字色を#333333#444444に変えてあげます!!

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

000000の時

333333の時

結構違いませんか?

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

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

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

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

まとめ

まとめ

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

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

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

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

以上っ!

\ アフィリエイトに最適テーマ /

\EX版とセットのお得パック /

\ コード管理・リンク計測 /

この記事をシェアする

コメント

コメント一覧 (2件)

  • はじめまして!わかりやすくありがとうございます。
    現在affinger5を使っていて、このようにAffinger管理のところから設定したら、無事反映されました。

    ですが、記事内で強調したいところのピクセル数をあげると、その部分だけスマホPC両方とも、投稿画面で設定した文字の大きさになってしまいます。。

    現状affinger管理でPCは18px、スマホは16pxにしているのですが、強調したいところを20pxで書くと、PCスマホとも20pxになる感じです。
    希望としてはPC20px、スマホ18pxのように強調したいのですが、どのように設定したら良いのでしょうか。。

    • はじめまして!

      記事を閲覧頂きありがとうございます!!

      PCとスマホで記事を書く際に別々に設定する場合はおそらくCSSのカスカマイズが必要だと思います。

まま へ返信する コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次