WING(AFFINGER5)

WING(AFFINGER5)でWebフォント(Googleフォント)を設定する

2019年1月1日

ブログを運営していくと見栄えもちょっとずついじりたくなってきます。

中でもフォントを変更したい場合もあるでしょう。

Webフォントを使えば難しいインストール作業なしにブログのフォントを変更できます。

今回はWING(AFFINGER5)でWebフォントを設定するやり方を紹介します!

GoogleのWebフォント

今回はGoogleのWebフォントを設定します。

Googleのサイトで気に入るフォントを選びます。

Google Fonts

まずは右側の「Languages」を「Japanese」にします。

Google Fontsで言語を選ぶ

「Japanese」にします。

言語をJapaneseにする

表示されるフォントが日本語フォントになります。

ブログに使いたいフォントの右上のプラス(+)ボタンを押します。

右上のプラス(+)ボタンを押す

今回は Kosugi Maru を選んでみました。

丸こいゴシックタイプのフォントです。

下のほうに選んだフォントが確保(?)されるのでこれを押します。

下の方のボタン?を押す

押したところが広がります。

画像の赤で囲んだところ、フォントのURLとフォント指定のスタイルシートをAFFINGERの設定で使います。

HTMLタグ、スタイルシートをコピペしておく

メモ帳とかにコピペしときましょう。

次は管理画面で設定します。

WING(AFFINGER5)管理画面で設定する

AFFINGERで設定します!

ワードプレスの管理画面「AFFINGER5管理」の「デザイン」にいきます。

AFFINGER5管理画面のデザイン設定画面へ

下のほうに「フォントの種類」でフォントを指定します。

先ほどコピペしたHTMLタグとスタイルシートを設定

具体的には

  • 「全体」をデフォルトにする。
  • 「記事タイトル・見出し(h2~3)・ウィジェットボタンなど」を使用しないにする。
  • Googleフォントの「<link href="」の欄に先ほどコピペしておいたフォントのURLを貼り付ける。
  • Googleフォントの「font-family」と書かれた欄に先ほどコピペしておいたフォントのスタイルシートを貼り付ける

続いて反映箇所を選択します。

反映箇所の選択

反映させたい場所にチェックをいれていきます。

私の場合は全体的に変更したかったので全部選んどきました(๑´ω`๑)

「Save」ボタンを押して完了です!

Noto Sans と M PLUS Rounded 1c はさらに簡単に設定できる

Google Fontsではいくつかフォントが選べましたが、

このなかで Noto Sans と M PLUS Rounded 1c というフォントについてはAFFINGER5ではさらに簡単に設定できます。

Noto Sansを選ぶ場合

Noto Sansはまとまった感じのフォントで読み易いゴシック体です。

※私の場合はWindows自体のフォントでも設定しています。

  • 「全体」をデフォルト
  • 「記事タイトル・見出し(h2~3)・ウィジットボタンなど」のフォントをNoto Sansにする
  • 「追加の反映範囲」に反映したい場所を選択します。全体的にフォントを替えたいときは「追加の反映範囲」で全部選択しておけばいいでしょう。

Noto Sansにするときの設定

M PLUS Rounded 1cを選ぶ場合

M PLUS Rounded 1cは丸みを帯びたかわいらしい感じのフォントです。

  • 「全体」をRounded M+ 1cにする
  • 「記事タイトル・見出し(h2~3)・ウィジットボタンなど」のフォントをRounded M+ 1cにする
  • 「追加の反映範囲」に反映したい場所を選択します。全体的にフォントを替えたいときは「追加の反映範囲」で全部選択しておけばいいでしょう。

M PLUS Rounded 1cにするときの設定

なんにせよ

ブログのフォントが変わるだけで全体のイメージががらっと変わります。

WebフォントはGoogleだけでなくいろんなところで有料や無料で提供されています。

自分で探すのも楽しいかもしれません。

関連記事
WING(AFFINGER5)で記事下にあるPREV、NEXTのリンクを非表示にする

続きを見る

  • この記事を書いた人

とま

40代。大阪在住。フリープログラマ。1人の妻、2人の娘と同居。 2018年に独立。2021年にマイクロ法人設立。 仕事の時間を半分にしたいなぁ。 プロフィールへ

-WING(AFFINGER5)