カスタマイズ

【AFFINGER5】フォントをカスタマイズして最適化する設定方法

alt=AFFINGER5,フォントカスタマイズ

WordPressテーマ「AFFINGER5」のフォント設定を完全版でお届けします。

WordPressテーマ研究家SHINです。

 

テーマAFFINGER5を愛用しているSHINですが、先日フォントに「Noto Sans(400)」と「游明朝(500)」の2種類がデフォルト設定で追加されているのをご存じでしたか?間違いなく気に入る字体なので、ぜひ試されてみて下さい。

 

今回当記事でお伝えしたいのは以下3点です。

  1. 新フォント「Noto Sans(400)」と「游明朝(500)」のご紹介と設定方法
  2. Webフォント(Googleフォント)への変更と設定方法
  3. パソコンとスマホ各デバイスごとに設定するフォントサイズと行間の設定方法

コンテンツ(記事)はテキストで構成されるため、より見やすく読みやすくする工夫は必要ですし、ウェブサイト(ブログ)のデザインによっても合う合わないというのは多少ありますよね。

書体によってコンテンツを評価されるわけではないので、直接SEOに影響することはなくとも「ユーザービリティ」という観点なら、滞在時間や離脱率に影響する可能性は十分あり得ます。

よって、結論フォントは「重要な設定」と位置づけなので最適化しておきましょう。

 

AFFINGER5新フォント2種類の設定方法

AFFINGER5に新入りしたフォント書体「Noto Sans(400)」と「游明朝(500)」をご紹介と設定方法について解説していきます。

 

新フォント書体「Noto Sans(400)」

このNoto Sans(400)は、現在このブログで設定しているフォント書体です。

デフォルトフォント


alt=AFFINGER5,デフォルトフォント

新フォントNoto Sans(400)


alt=AFFINGER5,Noto Sans

デフォルトはメイリオなので丸い書体イメージ。Noto Sansは若干カクっとしたイメージですね。

僕のブログ(当サイト)の場合、解説や説明、紹介といったカテゴリのコンテンツが比較的多いので、やんわり過ぎる書体よりは少しかしこまった書体が合うと思っているので、まさにピッタリの書体で選びました。

 

新フォント書体「游明朝(500)」

次にフォント「游明朝(500)」です。こちらは「M PLUS Rounded 1c(400)」と比較。

M PLUS Rounded 1c(400)


alt=AFFINGER5,M PLUS Rounded 1c

游明朝(500)


alt=AFFINGER5,游明朝

比較したM PLUS Rounded 1cも丸い書体イメージなので、新フォント游明朝とは対照的な書体ですよね。

游明朝は、いわゆる筆記体のようにキチっとしたイメージが伝わるので、ですます調などのコンテンツに合う書体ですね。こちらもどちらかと言えば僕のようなコンテンツに合う書体かなと思いますです。

 

新フォントの設定方法

ではフォントを変更する設定を解説していきます。

フォント種類を変更する際は、別タブで自サイトページ画面を表示しながら進めると、リアルタイムで確認できるのでおすすめです。

 

step
1
WordPressダッシュボード画面から「AFFNGER5 管理」に進み、管理メニューにある「デザイン」をクリックして進みます。

alt=AFFINGER5,フォント設定

 

step
2
デザイン設定画面下の方に「フォントの種類」というカテゴリで好きなフォントを選択して、画面最下部にある「save」をクリックすれば設定完了です。

alt=AFFINGER5,フォント設定2

設定補足

「全体」でフォント書体を選択したら「記事タイトル・見出し(h2~3)・ウィジェットボタンなど」と「追加の反映範囲」では、個別にフォント書体を変更することもできます。まさにかゆいところまで設定が可能ですね。

 

AFFINGER5でGoogleフォントを設定する方法

続いてWebフォント(Googleフォント)に変更する方法を説明していきます。

Googleフォント日本語版では9種類の書体が用意されており、それぞれ必要なHTMLコードとCSSコードをコピペするだけで設定変更できます。

 

step
1
まずGoogleFonts+日本語にアクセスし、トップページにある9種類から変更するフォントをクリックして下へ飛びます。

alt=AFFINGER5,googleフォント設定

 

step
2
Googleフォントに変更するためのコード(HTML・CSS)を全てコピーせずに下の画像にある部分のみをコピーして保存しておきます。

alt=AFFINGER5,googleフォント設定2

【HTML】<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p

【CSS】font-family: "M PLUS 1p";

 

step
3
WordPressダッシュボード画面から「AFFNGER5 管理」に進み、管理メニューにある「デザイン」をクリックして進みます。

alt=AFFINGER5,フォント設定

 

step
4
Googleフォントに変更する場合には、以下のように「全体をデフォルト」「記事タイトル他を使用しない」にチェックを入れておきます。

alt=AFFINGER5,googleフォント設定3

 

step
5
次にその下にあるGoogleフォントのHTML・CSSコード入力枠に、ステップ2で保存したコードをコピペし、チェック項目にGoogleフォントを反映させるカテゴリにチェックを入れます。最後に「save」をクリックして保存したら完了です。

alt=AFFINGER5,googleフォント設定4

Googleフォントを使用する注意点

Googleフォントは「Webフォント」になるので表示速度に影響が出ます

Googleが推奨する表示速度測定サイトPageSpeed Insightsなどのツールで、表示速度が著しく遅延していないかどうか確認しましょう。大きく遅延するようならGoogleフォントの使用は控えた方が良いですね。SEOに悪影響を及ぼすリスクには変えられません。

 

AFFINGER5のフォントサイズと行間設定方法

AFFINGER5には、フォントサイズと文字と文字の間隔幅(行間)をパソコン・タブレット・スマホそれぞれ単独で表示をカスタマイズできる設定があります。

ユーザービリティの観点から、文字サイズも行間も大切な設定なので最適化していきましょう。

 

step
1
WordPressダッシュボード画面から「AFFNGER5 管理」に進み、管理メニューにある「デザイン」をクリックして進みます。

alt=AFFINGER5,フォント設定

 

step
2
上から「スマーフォン」「タブレット」「PC」と並んで、基本が記事文中でのサイズになり、他タイトルと各見出し、記事一覧それぞれでフォントサイズと行間をpx値で設定変更ができます。別タブで自サイトを表示しながらカスタマイズすると、変更値を確認できるのでおすすめです。

alt=AFFINGER5,フォントサイズ

SHIN
このブログ設定は上記の数値です。

自サイトが集客する年齢層でフォントサイズ、行間を合わせるのがおすすめ。ちなみに集客の年齢層はGoogleアナリティクスで分析できるので、確認しておきましょう。データがない場合には「客観視」して設定しましょう。

 

まとめ

AFFINGER5のフォントをカスタマイズできる設定の解説でした。

フォントは一度設定最適化したら、しばらく変更することはないと思いますので、初期段階できちんと設定しておきましょう。

\ 記事はお役に立ちましたか? /

  • この記事を書いた人
  • 最新記事
SHIN

SHIN

WordPressテーマ研究家のSHINです。WPテーマとコーヒーをこよなく愛し、日々マウスをカチカチ!キーボードをパチパチ!しながら研究をしている人。

-カスタマイズ
-

© 2020 WordPress theme NAVI