WordPressテーマ「AFFINGER6」のフォント設定を完全版でお届けします。
テーマAFFINGER6を愛用しているSHINですが、先日フォントに「Noto Sans（400）」と「游明朝（500）」の2種類がデフォルト設定で追加されているのをご存じでしたか？間違いなく気に入る字体なので、ぜひ試されてみて下さい。
今回当記事でお伝えしたいのは以下3点です。
- 新フォント「Noto Sans（400）」と「游明朝（500）」のご紹介と設定方法
- Webフォント（Googleフォント）への変更と設定方法
- パソコンとスマホ各デバイスごとに設定するフォントサイズと行間の設定方法
コンテンツ（記事）はテキストで構成されるため、より見やすく読みやすくする工夫は必要ですし、ウェブサイト（ブログ）のデザインによっても合う合わないというのは多少ありますよね。
書体によってコンテンツを評価されるわけではないので、直接SEOに影響することはなくとも「ユーザービリティ」という観点なら、滞在時間や離脱率に影響する可能性は十分あり得ます。
よって、結論フォントは「重要な設定」と位置づけで最適化しておきましょう。
▶︎ AFFINGER6新フォント2種類の設定方法
AFFINGER6に新入りしたフォント書体「Noto Sans（400）」と「游明朝（500）」をご紹介と設定方法について解説していきます。
≫ 新フォント書体「Noto Sans（400）」
このNoto Sans（400）は、現在このブログで設定しているフォント書体です。
デフォルトフォント
新フォントNoto Sans（400）
デフォルトはメイリオなので丸い書体イメージ。Noto Sansは若干カクっとしたイメージですね。
僕のブログ（当サイト）の場合、解説や説明、紹介といったカテゴリのコンテンツが比較的多いので、やんわり過ぎる書体よりは少しかしこまった書体が合うと思っているので、まさにピッタリの書体で選びました。
≫ 新フォント書体「游明朝（500）」
次にフォント「游明朝（500）」です。こちらは「M PLUS Rounded 1c（400）」と比較。
M PLUS Rounded 1c（400）
游明朝（500）
比較したM PLUS Rounded 1cも丸い書体イメージなので、新フォント游明朝とは対照的な書体ですよね。
游明朝は、いわゆる筆記体のようにキチっとしたイメージが伝わるので、ですます調などのコンテンツに合う書体ですね。こちらもどちらかと言えば僕のようなコンテンツに合う書体かなと思いますです。
≫ 新フォントの設定方法
ではフォントを変更する設定を解説していきます。
フォント種類を変更する際は、別タブでフォントを確認できるページ画面を表示しながら作業を進めると、リアルタイムで確認できるのでおすすめです。
step
1WordPressダッシュボード画面から「AFFNGER 管理」に進み、「全体設定」≫「フォントの種類」をクリックして進みます。
step
2デザイン設定画面下の方に「フォントの種類」というカテゴリで好きなフォントを選択して、画面最下部にある「save」をクリックすれば設定完了です。
設定補足
「全体」でフォント書体を選択したら「記事タイトル・見出し（h2～3）・ウィジェットボタンなど」と「追加の反映範囲」では、個別にフォント書体を変更することもできます。まさにかゆいところまで設定が可能ですね。
▶︎ AFFINGER6でGoogleフォントを設定する方法
続いてWebフォント（Googleフォント）に変更する方法を説明していきます。
Googleフォント日本語版では9種類の書体が用意されており、それぞれ必要なHTMLコードとCSSコードをコピペするだけで設定変更できます。
step
1まずGoogleFonts+日本語にアクセスし、トップページにある9種類から変更するフォントをクリックして下へ飛びます。
step
2Googleフォントに変更するためのコード（HTML・CSS）を全てコピーせずに下の画像にある部分のみをコピーして保存しておきます。
【HTML】<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p
【CSS】font-family: "M PLUS 1p";
step
3WordPressダッシュボード画面から「AFFNGER 管理」に進み、「全体設定」≫「フォントの種類」をクリックして進みます。
step
4Googleフォントに変更する場合には、以下のように「全体をデフォルト」「記事タイトル他を使用しない」にチェックを入れておきます。
step
5次にその下にあるGoogleフォントのHTML・CSSコード入力枠に、ステップ2で保存したコードをコピペし、チェック項目にGoogleフォントを反映させるカテゴリにチェックを入れます。最後に「save」をクリックして保存したら完了です。
Googleフォントを使用する注意点
Googleフォントは「Webフォント」になるので表示速度に影響が出ます。
Googleが推奨する表示速度測定サイトPageSpeed Insightsなどのツールで、表示速度が著しく遅延していないかどうか確認しましょう。大きく遅延するようならGoogleフォントの使用は控えた方が良いですね。SEOに悪影響を及ぼすリスクには変えられません。
▶︎ AFFINGER6のフォントサイズと行間設定方法
AFFINGER6には、フォントサイズと文字と文字の間隔幅（行間）をパソコン・タブレット・スマホそれぞれ単独で表示をカスタマイズできる設定があります。
ユーザービリティの観点から、文字サイズも行間も大切な設定なので最適化していきましょう。
step
1WordPressダッシュボード画面から「AFFNGER 管理」に進み、「全体設定」≫「フォントのサイズ」をクリックして進みます。
step
2上から「スマホ」「タブレット」「PC」と並んで、基本が記事文のフォントサイズになり、他タイトルと各見出し、記事一覧それぞれでフォントサイズと行間をpx値で設定変更ができます。別タブでサンプルページを表示しながらカスタマイズすると、変更値とサイズを確認できるのでおすすめです。
自サイトが集客する年齢層でフォントサイズ、行間を合わせるのがおすすめ。ちなみに集客の年齢層はGoogleアナリティクスで分析できるので、確認しておきましょう。
データがない場合には「客観視」して設定しましょう。
▶︎ まとめ
AFFINGER6のフォントをカスタマイズできる設定の解説でした。
フォントは一度設定最適化したら、しばらく変更することはないと思いますので、AFFINGERをアップロードした初期段階で設定しておきましょう。
