AFFINGERでフォントサイズを変更する方法【本文見出し参照リンク】

最適なフォントサイズと行間は?
文字の大きさに合わせて、h2見出しや目次や参照リンクを調整するには?
こんな疑問に答えます。

AFFINGERは2018年5月頃のアップデートから、フォントサイズと行間を簡単に変更できるようになりました。
ただ、フォントサイズって難しいカスタマイズだと思うんです。
全体の絶妙な美しいバランスが大事なので、ただ変えればってわけではないと思います。

なので、他の人気ブログスタイルのフォントサイズも参照し慎重に検討しました。
見出しや参照リンクのフォントサイズとのバランス調整も行います。

別ブログで月に2万PVを超える僕が解説していきます。

作業環境

WordPress 4.9.8
WING-AFFINGER5 2018.10ver

※記事内にプロモーションを含む場合があります

おすすめのフォントサイズ

フォントサイズは、AFFINGER設定管理画面のデザインタブから簡単に変更できます。
(2018年10月のアップデート以降)

PC(960px以上)閲覧時

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

游ゴシックが使えれば、基本・h4は16pxがよさそう

タブレット閲覧時

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

検証中

スマホ閲覧時

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

参照した他有名ブログスタイルのフォントサイズ

スタイル名 予想文字サイズ(PC) 予想行間サイズ(PC)
ストーク 17px 29px
SANGO 17px 31px
AFFINGERで綺麗だなと思うブログ 17px 31px
AFFINGER初期設定 15px 27px

STORK
https://open-cage.com/stork/

SANGO
https://saruwakakun.design

AFFINGER
AFFINGER
こんな感じでした。

フォントサイズの決め方

文字サイズは迷うことなく17pxにしました。
有名サイトは17pxが多いですね
目で追いやすく、簡潔に書けば全部読んでくれる可能性のあるフォントサイズだと思います。
(15pxだと絶対に流し読みになると思う)

フォントによって微調整は必要だと思います。

行間サイズの決め方

行間サイズは難しいです。
全体のデザインバランスとか、書いてる内容にもよります。
31くらいがいいと判断しました。

見出しの余白もフォントサイズに合わせてバランスを揃える

文字の大きさに合わせて、見出しもバランスをとりました。

H2見出し

padding余白

カスタマイズから、余白を変更。
余白の設定値はスマホも連動して変わるので注意です。

左右の余白(px)
15px→20px

上下の余白(px)
10px→20px

左右の余白はすごく迷います…
開けすぎると、文章が通しで読みづらくなりますし、
狭いすぎると、見出しが読みづらくなります。

margin余白

marginの方の余白を開けないと、文字サイズとのバランスが取れないので大事です。

AFFINGERならカスタマイズから進んで、カスタマイズCSSに以下の記述を加えます。

.post h2:not(.rankh2):not(#reply-title) {
margin: 20px 0px 30px 0px!important;
}

H3見出し

.post h3:not(.rankh3):not(#reply-title) {
margin: 46px 0px 30px 0px!important;
}

H4見出し

.post h4:not(.rankh4):not(#reply-title) {
margin: 20px 0px 20px 0px!important;
}

H5見出し

マージンはそのまま

参照リンクのフォントサイズもバランスを揃える

どうやら、本文のフォントサイズを変更すると、参照リンクのフォントサイズも一括で変更されてしまうようです。
(PC表示のみ)

参照リンクとはこの部分です
http://google.com

style.cssを検索

まず、参照リンクの定義している部分のCSSコードを「参照リンク」で検索します。
style.cssの中です。

/*参照リンク*/
.st-share {
background:#fafafa;
padding:5px;
border-radius:3px;
font-size:95%;
line-height:1.7;
}

.st-shareをいうクラスを書き換えればいいということが判明しました。

追加CSSで強制ルール上書き

カスタマイズ>追加CSSの部分に下記を追加します。

.st-share {
    font-size:95% !important;
     line-height:1.7 !important;
}

95%の行間1.7で、今まで通りのスマホと同じサイズにしました。
一括文字設定よりも、強く上書きされます。

TOC+の目次のフォントサイズさを変える

文字の大きさ
95%→15pt

94%や93%に設定すると、スマホとPCでのバランスが取れません。
15ptで固定しました。

他のブラウザでもフォントサイズをチェックする

WEBページは、見るブラウザによって、だいぶ見た目が変わるのが厄介です。
一応、以下のブラウザはチェックしました。

ブラウザ・OS コメント
Safari(Mac) OK
Google Chrome(Mac) OK
Firefox(Mac) OK
Google Chrome(Windows) OK
Safari(iPhone5s) OK
Safari(iPhone6s) OK
Google Chrome(iPhone5s) OK

スマホの場合は、液晶サイズによって読みやすさが変わるので、判断が難しいなと思います。

若干、文字の大きさを感じます。
慣れかもしれないので、しばらく様子を見ます。

というわけで今回は以上です。
目次や、参照リンクなど適材適所な大きさにしてよかったと思います。

換算記事WordPressでフォントを変更する方法【他ブラウザやAFFINGERも考慮】

-AFFINGER, WordPress