The Master of Swift App Coding

Swiftプログラミングでのアプリ作成方法やWordPressのテクニック解説

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

投稿日:2018年11月3日 更新日:

最適なフォントサイズと行間は?
文字の大きさに合わせて、h2見出しや目次や参照リンクを調整するには?
こんな疑問に答えます。
別ブログで月に2万PVを超える僕が解説していきます。

はじめに

今回は、AFFINGERでフォントサイズを変更する方法を書きます。

2018年5月頃のアップデートから、フォントサイズと行間を簡単に変更できるようになりました。

ただ、フォントサイズって難しいカスタマイズだと思うんです。
全体の絶妙な美しいバランスが大事なので、ただ変えればってわけではないと思います。

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

では、解説していきます。

作業環境

WordPress 4.9.8
WING-AFFINGER5 2018.10ver

 

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

このブログではPCのみ変えています。

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

PC(960px以上)閲覧時

基本(Pタグ 他) サイズ:17pxへ変更
行間:29pxへ変更

H4タグ サイズ:17pxへ変更
行間:29pxへ変更

スマホ閲覧時、タブレット閲覧時

スマホはデフォルトのままでいいと思います。

 

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

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

こんな感じでした。

文字サイズは迷うことなく17pxにしました…
有名サイトは17pxが多いですね

17pxだと、目で追いやすいです。
工夫して簡潔に書けば、全部読んでくれる可能性のあるフォントサイズだと思います。
(15pxだと絶対に流し読みになると思う)

行間サイズは難しい…
全体のデザインバランスとか、書いてる内容にもよりますよね…

とりあえず、僕が見やすいと感じる29pxにしてみました。
(また、後で変えるかもしれません)

 

見出しの余白もバランスを揃える

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

H2見出し

padding余白

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

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

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

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

margin余白

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

ぶっちゃけ…ここまで変えるのはめんどい
(文字サイズ変えるのやめようかな)

style.cssに以下の記述を加えます。

.post h2:not(.rankh2):not(#reply-title) {
margin: 40px 80px !important;
}

 

これでいいはずなのに、変更が適用されません
なんでだろう…

H3見出し

そのまま変更なし

H4見出し

上で書いたフォントサイズの変更のみです。

 

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

どうやら、本文のフォントサイズを変更すると、参照リンクのフォントサイズも一括で変更されてしまうようです。
(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) 若干、文字の大きさを感じる
Google Chrome(Mac) 若干、文字の大きさを感じる
Firefox(Mac) 若干、文字の大きさを感じる
Google Chrome(Windows)
Safari(iPhone5s) OK
Google Chrome(iPhone5s)

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

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

 

まとめ

今回は、AFFINGERでフォントサイズを変更する方法について書きました。

主流は17pxでしたね。
行間は29pxにしてみました。

すべての文字が17pxである必要はないと思います。
目次や、参照リンクは適度な大きさのままにしてよかったと思います。

Ad-336px-stinger8

Ad-336px-stinger8

-AFFINGER, WordPress

Copyright© The Master of Swift App Coding , 2018 All Rights Reserved.