ブログを運営していくと見栄えもちょっとずついじりたくなってきます。
中でもフォントを変更したい場合もあるでしょう。
Webフォントを使えば難しいインストール作業なしにブログのフォントを変更できます。
今回はWING(AFFINGER5)でWebフォントを設定するやり方を紹介します!
GoogleのWebフォント
今回はGoogleのWebフォントを設定します。
Googleのサイトで気に入るフォントを選びます。
まずは右側の「Languages」を「Japanese」にします。
「Japanese」にします。
表示されるフォントが日本語フォントになります。
ブログに使いたいフォントの右上のプラス(+)ボタンを押します。
今回は Kosugi Maru を選んでみました。
丸こいゴシックタイプのフォントです。
下のほうに選んだフォントが確保(?)されるのでこれを押します。
押したところが広がります。
画像の赤で囲んだところ、フォントのURLとフォント指定のスタイルシートをAFFINGERの設定で使います。
メモ帳とかにコピペしときましょう。
次は管理画面で設定します。
WING(AFFINGER5)管理画面で設定する
AFFINGERで設定します!
ワードプレスの管理画面「AFFINGER5管理」の「デザイン」にいきます。
下のほうに「フォントの種類」でフォントを指定します。
具体的には
- 「全体」をデフォルトにする。
- 「記事タイトル・見出し(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にする
- 「追加の反映範囲」に反映したい場所を選択します。全体的にフォントを替えたいときは「追加の反映範囲」で全部選択しておけばいいでしょう。
M PLUS Rounded 1cを選ぶ場合
M PLUS Rounded 1cは丸みを帯びたかわいらしい感じのフォントです。
- 「全体」をRounded M+ 1cにする
- 「記事タイトル・見出し(h2~3)・ウィジットボタンなど」のフォントをRounded M+ 1cにする
- 「追加の反映範囲」に反映したい場所を選択します。全体的にフォントを替えたいときは「追加の反映範囲」で全部選択しておけばいいでしょう。
なんにせよ
ブログのフォントが変わるだけで全体のイメージががらっと変わります。
WebフォントはGoogleだけでなくいろんなところで有料や無料で提供されています。
自分で探すのも楽しいかもしれません。
WING(AFFINGER5)で記事下にあるPREV、NEXTのリンクを非表示にする
続きを見る