【AFFINGER5】文字(フォント)の色やサイズを変更する方法

ブログサイトは、フォントだけでも記事全体の雰囲気が変わり、見にくくなることもあります。

なので、今回紹介する方法でテキストリンクや本文を見やすくカスタマイズしましょう。

ということで、今回はAFFINGER5の文字（フォント）のデザインをカスタマイズする方法について解説します。

是非参考にしてください。

AFFINGER5で文字（フォント）のデザインをカスタマイズする

今回解説するのはフォントのデザインについて以下の2つです。

それでは順番に解説します。

デザイン①：文字の色

一つ目は、本文の文字やテキストリンクの色をカスタマイズする方法です。

それではWordPress管理画面から『外観➡︎カスタマイズ➡︎各テキストとhタグ（見出し）➡︎テキスト色一括変更』を開いてください。

設定できるのはこの5つです。

試しにカスタマイズしてみましょう。

「ff0000」に設定すると真っ赤になりましたね。

そして、『範囲を広げる』にチェックを入れると以下のように抜粋文やタイトルも色が変更されます。

下の項目ではテキストリンクのデザインもカスタマイズできます。

青っぽい色にするとクリック率が上がるのでおすすめです。

カスタマイズしたら右上の『公開』をクリックすれば完了です。

デザイン②：文字のサイズ&行間

文字のサイズ&行間も、AFFINGER5の設定で簡単に変更できます。

それでは管理画面の『AFFINGER5 管理➡︎デザイン』を開いてください。

下の方までスクロールするとフォントをカスタマイズする項目が表示されます。

この二つが設定できます。

フォントのサイズ

記事コンテンツ内のフォントサイズや行間を画面の大きさ別（機種別）にカスタマイズできます。

全て変更してもややこしくなるので、僕はPC閲覧時のフォントサイズだけ調節しました。

デフォルトだと以下のような設定になってます。

フォントサイズの基本は15〜18px程度がおすすめですね。

フォントサイズの設定は以上です。

フォントの種類

続いて、一つ下の項目ではフォントの種類をカスタマイズできます。

「全体のフォント」「記事タイトル・見出し（h2〜3）・ウィジェットボタンなど」の二つに分けて設定ができます。

他のフォントを使用したい場合は、『その他』にCSSを入力してください。

設定ができたら下にスクロールし、「save」をクリックしましょう。

まとめ

今回はAFFINGER5でフォント（文字）のデザインをカスタマイズする方法について以下の二つを解説しました。

AFFINGER5を使うと簡単にカスタマイズができて便利ですね。

まだインストールしていない方は是非こちらからどうぞ。↓

というわけで、今回はここまでです。
最後まで読んでいただきありがとうございました。