wordpress

【WordPress】WING(AFFINGER5)の文字サイズの変更方法

投稿日:

Affinger5を使っていて、パソコンでの文字のサイズとスマホでの文字のサイズを変えたいと思った人はいませんか?

この記事ではそういった人に向けた、Wordpressで使われているテーマ・AFFINGER5のフォントサイズの変更⽅法について説明するよ。
いぬくん

こんにちは、ぬーぼーです。

これからブログを始めるぞ!と思ってAffinger5を買ったのはいいのですが、スマホで見たときの文字サイズにすごい違和感を感じるんですよね。

というわけで、この記事ではフォントサイズの変更方法とおすすめのフォントサイズについて紹介します。
この記事では次の環境でフォントサイズの変更を行っています。

  • WordPress version: 5.2.3
  • WING-AFFINGER5 version: 20190504
  • WING-AFFINGER5 Child version: 20180831

フォントサイズの変更を行う場所

Affinger5のテーマのフォントサイズを変更する場所について説明します。
つぎの手順でフォントサイズの変更ができます。

  1. メインナビゲーションメニューの「AFFINGER5」を選択
  2. 「デザイン」を選択
  3. 「A フォントのサイズ」から自分の好きなフォントサイズを選択

メインナビゲーションメニューの「AFFINGER5 管理」をクリック

まず初めに、Wordpress管理画面の左側にある、メインナビゲーションメニューの「AFFINGER5管理」を選択します。

「デザイン」を選択

フォントサイズを変更するには、「デザイン」を選択します。

「A フォントのサイズ」を選択

「A フォントのサイズ」からスマートフォン・タブレット・パソコンの場合、それぞれのフォントサイズを指定することができます

おすすめのフォント設定

フォントサイズの変更方法がわかった次は、お勧めのフォントサイズについて紹介します。

フォントサイズ

フォントサイズの変更方法がわかったところで、どういったフォントサイズにすればいいか悩みますよね?
ここではおすすめのフォントサイズについてご紹介します。

フォントは大きいサイズのほうが読まれやすい

実はフォントサイズは大きいほうが直帰率をおさえるという事例がたくさんあります。例として、次のサイトではフォントサイズを1px変更するだけで直帰率が2%前後下がった例です。

フォントサイズを1px変更するだけで、直帰率が2%前後下がった

大きいフォントサイズのほうが多くの人にとって読みやすい文章だという例があるようです。

いやいや、実際小さい文字のほうがかっこいいから読まれるでしょ。と思ったりしますよね。例えば、ニュース記事の文字を見てみるとかなり小さい文字で書かれていてかっこよく見えます。

しかし、記事は読まれてなんぼです。

小さい文字と大きい文字でどれくらい読みづらさが変わるのか試しに次に例を示します。

まずは小さい文字サイズで書いた文章から。

小さい文字サイズで書いた文章

次に大きい文字サイズで書いた文章から。

大きい文字サイズで書いた文章

改行などなく、単に文字の大きさだけを変えてみているので基本的には読みずらい文章ですが、大きい文字サイズで書いた文章のほうが読みやすいのではないでしょうか。

というか、小さい文字サイズだと基本的に読み飛ばしてしまいますよね。

なんとなく小さい文字は重要でないと判断してしまいます。

個人的には欲しいところに欲しい文章が端的にまとめられていることを目標に書いています。

スマホの場合のフォントサイズ

有名サイトの多くは16pxで記事が書かれています。

実際に16pxに設定してスマホで自分が書いた記事を読んでみたのですが、かなり読みやすくなっていました。

ということでこの記事も16pxに設定しています。

参照先:【検証】スマートフォンで読み易いfont-sizeとは?

パソコンの場合のフォントサイズ

多くのサイトでスマホの文字サイズとパソコンの文字サイズは一致しているそうです。

もし変更するとしたら、スマホ向けの文字サイズとパソコン向けの文字サイズはどちらを大きくすればいいか迷うところです。

どちらを大きくするかは実はサイトによってもまちまちのようで、必ずしもパソコンが大きいとか、スマホが大きいといったことはないそう。

結局どういうサイズにするべきなのかわからん。。。
いぬくん

私の場合は、16pxだと小さすぎる印象だったので18pxに設定しました。

次の手順で設定すれば自分の中でしっくりくるフォントサイズが決められる気がします。

  1. まずはスマホ向けのフォントサイズと同じにしてみる。
  2. 記事を一つ読んでみる。
  3. ほかの有名サイトの記事を読んでみる。
  4. 自分が書いた記事をもう一度読んでみる。
  5. 文字の大きさに違和感や読みずらさを感じたらフォントサイズを変更する
  6. 違和感を感じなくなるまで2.~5.を繰り返す

行間の大きさ

フォントの大きさだけでなく、行間の大きさも設定が可能です。

行間の大きさはフォントサイズの1.25倍~1.5倍がよいとされています。

先ほど紹介した「 【検証】スマートフォンで読み易いfont-sizeとは? 」でも行間はフォントサイズの1.5倍の設定が最も使われていると紹介されていました。

行間の設定を短くすればするほどニュース記事のような雰囲気が出てカチッとした印象になります。

逆に行間を大きくすればするほどポップな雰囲気が出て、サクサク読みやすい印象です。

自分が作りたい雰囲気に合わせて行間を設定してみてはいかがでしょうか。

当サイトの行間の設定はフォントサイズの約1.5倍としています。これは「 伝わるデザインの基本 増補改訂版 よい資料を作るためのレイアウトのルール 」にも書いてありますが、文字と文字の間の間隔は0.5文字~1.0文字が適切な行間として書かれています。

伝わるデザインの基本 増補改訂版 よい資料を作るためのレイアウトのルール 」によると必ずしもこの行間が読みやすいということはなく、行の横幅が長い場合は行間を撮るべきだし、横幅が短い場合には行間は狭めるべきだとも書かれています。

行間の設定について次にまとめました。

行間の定義について

  • 行間の定義は行と行の間の幅を決めるのではなく、行の高さの幅を決める。

設定できる値の意味

  • px : 決まったpx数を指定
  • em : フォントサイズに応じた相対的な比率
  • % : フォントサイズに応じた相対的な比率

次のサイトでも行間の設定に応じた見栄えが確認できます。
外部リンク:行間の単位比較

小見出しの大きさ

小見出しの大きさはどのようにして決めればよいのでしょうか。

見出しの装飾する種類

当然ながら見出しは本文にくらべて強弱をつける必要がありますが、その強弱の方法は次の種類があります。

  • 太字を使う
  • 色を変える
  • サイズを大きくする
  • フォントを変える

これらを調整することで見出しを強調することができますね。

見出しの例

読みやすい見出しにするには、上で示した装飾をつかいすぎないようにとも言われています。

試しに見出しの装飾に文字の大きさだけを変えてみた例を作ってみたので比べてみましょう。

見出しが本文と同じフォントサイズ

次に見出しの文字の大きさだけを変えてみた場合。

見出しを本文のフォントサイズより大きくした場合

これはもう圧倒的に見出しの文字が大きいほうが読みやすいですよね。

見出しを強調する手段としてほかにも見出しの色を変えたりする方法もありますが、見出しの色を変える場合は本文の文字サイズよりも若干大きいくらいでいいでしょう。

色も変更して、文字サイズも大きくして、太字にして、背景にも色を付ける、、などとやっていると文章として読みづらくなってしまう印象です。

まとめ

いかがだったでしょうか。

ここではAFFINGER5のスマホ向けとパソコン向けのフォントサイズの変更方法についての説明と、おすすめの設定を紹介しました。

みなさんも読みやすいフォントサイズにカスタマイズしてみましょう。それではまた!

-wordpress

Copyright© NUBOBLOG , 2022 All Rights Reserved Powered by AFFINGER5.