アフィンガー５GoogleFontを使ったサイトフォントの設定方法

アフィンガーのライオン
ぽん助です。

 

 

AFFINGER5（アフィンガー５）のフォント設定では、投稿記事で使われるフォントとは別に、サイトのカスタマイズとして「サイトタイトル、記事タイトル、ｈタグ」など個別に指定してフォントを設定することが簡単にできます。

 

AFFINGER5では、通常フォントの種類は５種類が用意されてますよね。

 

参考

  1. 游明朝
  2. 游ゴシック
  3. Noto Sans
  4.  M PLUS Rounded 1c
  5.  旧テーマ版

 

今回の紹介する設定は、もっとオリジナルな個性あるサイトのカスタマイズにしたい方には必見です。

 

この記事では、アフィンガー５のサイト内のフォント変更を解説します。

 

　AFFINGER5サイトフォントの変更方法の解説

アフィンガー５ではデフォルトのフォント種類は下の画像の様に５つ用意されてます。

アフィンガー５WEBフォントの変更手順

 

今回の設定では「Google Font」サイトを使って変更する方法を説明しますね。

 

　Google Fontサイトを使った方法

「Google Font」サイトはこちらから移動できます。（別タブが開きます）

 

 

アフィンガー５WEBフォントの変更手順

 

 

 

step
1

  • サイトを開くと、日本語以外の全てのフォントも混ざっていて日本語が見つけ難いので、言語を日本語だけにします。
  1. 画像を参考にして画面左上部にある「Languae」をクリックします。
  2. 少し下にスクロールして「Japanese」を選択します。
アフィンガー５WEBフォントの変更手順

 

アフィンガー５WEBフォントの変更手順

 

 

 

step
２

  1. 使いたいフォントを選んだら、選んだフォントの右上部にある「+」をクリックします。
アフィンガー５WEBフォントの変更手順

 

 

step
３

  1. 画面右下に出た黒いバーをクリックします。
アフィンガー５WEBフォントの変更手順

 

 

step
４

 

この作業はテキストtxtなどにコピー＆ペーストで作業をして下さい。

  1. Embed Font：画像のようにブルーのhttpsから”を含まないまでをコピーしメモしておきます。

  2. Specify in CSS：は全てをコピーしてメモしておきます。

アフィンガー５WEBフォントの変更手順

 

 

step
５

 

AFFINGER5管理画面の作業に移ります。

  1. 「デザイン」を選びます。
アフィンガー５WEBフォントの変更手順

 

 

 

step
６

  1. 下にスクロールして「Aフォントの種類」まで下がります。
  2. 「Googleフォントに」をチェックを入れます。
  3. 「記事タイトル・見出し」の「使用しない」を選びます。
  4. 画像の下２つある上に「Embed Font」のコピーを貼り付けます。
  5. 画像の残り下に「Specify in CSS」のコピーを貼り付けます。
アフィンガー５WEBフォントの変更手順

 

 

 

step
７

  1. 反映させたい箇所にチェックをします。
  2. 最後に「save」をクリックして完了になります。
アフィンガー５WEBフォントの変更手順

 

 

 

 

　最後に

アフィンガー５のサイトのフォント変更を説明しました。

他のサイトと違うカスタマイズがしたい方は是非チャレンジしてみて下さい。

 

AFFINGER5のカスタマイズ記事も合わせてお読み下さい。

スマホで見た時のテーブルの横ずれ防止記事

アフィンガー５「テーブル」スマホ表示が横ずれする解決策

続きを見る

AFFINGER5（アフィンガー５）購入参考記事

AFFINGER5（アフィンガー）レビュー
AFFINGER5（アフィンガー５）２年使ってみて思うことを紹介【特典付】

続きを見る

★AFFINGER５（アフィンガー５）のすべて★

 

 

-アフィンガー５
-, ,