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

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

本記事の内容

おすすめのフォントサイズ
参照した他有名ブログスタイルのフォントサイズ
見出しの余白もフォントサイズに合わせてバランスを揃える
参照リンクのフォントサイズもバランスを揃える
TOC+の目次のフォントサイズさを変える
他のブラウザでもフォントサイズをチェックする

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

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

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

作業環境

WordPress 4.9.8
WING-AFFINGER5 2018.10ver

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

スタイル名	予想文字サイズ（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;
}

H４見出し

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

H５見出し

マージンはそのまま

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

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

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

９４％や９３％に設定すると、スマホと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も考慮】

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

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

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