AFFINGER6(アフィンガー)のフォント設定を解説！文字サイズや色を調整する方法

AFFINGER6のフォント設定方法が知りたい！

ゆう

AFFINGER6なら簡単に好きなフォントを設定できるし、サイズや色のカスタマイズも簡単！

AFFINGERはデフォルトで6種類のフォントから選べます。デフォルトで用意されたフォント以外にもGoogleフォントが簡単に使えるからオリジナル性のあるブログも簡単に作れます。

この記事を読めばAFFINGERのフォント設定は完全攻略できます！ぜひ参考にしてみてくださいね。

本記事の内容

• アフィンガーのフォント設定方法
• Googleフォントの使い方
• フォントのカスタマイズ方法

さらに、『投稿に役立つフォントカスタマイズCSS』を最後に公開します。このCSSを追加するだけで執筆効率もアップするので絶対入れておきましょう。

AFFINGER6(アフィンガー6)でフォント変更する方法

アフィンガーでは主に2つのフォント設定方法があります。

• テーマで用意されたフォント
• Googleフォント

アフィンガーならGoogleフォントも簡単に読み込むことができます。それではそれぞれの設定方法について解説していきます。

テーマで用意されたフォント

アフィンガーではデフォルトで以下の6つのフォントが選べます。

• デフォルト
• M PLUS Rounded 1c
• Noto Sans
• Noto Serif
• 游ゴシック
• 游明朝

フォント設定方法

フォントの設定は「AFFINGER管理 > 全体設定 > フォントの種類」から設定できます。

使いたいフォントを選択して「Save」すれば設定完了。フォントは全体設定と見出しで個別に設定が可能です。

Googleフォントを使って好きなフォントを設定する方法

アフィンガーではGoogleフォントも簡単に外部から読み込むことができます。

Googleフォント設定方法

Googleフォントを設定する手順は次の3ステップ。

• Googleフォントでフォントを選ぶ
• 「httpsで始まるURL」と「font-family」をコピー
• AFFINGER管理画面で貼り付け

画像を使って解説していきます。

Googleフォントでフォントを選ぶ

Googleフォントで使用したいフォントを選びます。

「httpsで始まるURL」と「font-family」をコピー

フォント書体（太さ、斜体）選択すると右側にフォントのコードが表示されるので、linkのhttps〜始まるURL（画像下線の部分）と、font-familyをコピーします。

AFFINGER管理画面で貼り付け

コピーしたURLとコードをAFFINGER管理＞全体設定＞Googleフォントに貼り付けます。

Googleフォントを表示したい箇所にチェックを入れれば設定完了。

AFFINGER6(アフィンガー6)のフォントまわりのカスタマイズ方法

フォントのサイズや色の設定方法を紹介します。

文字サイズを調整する方法

文字サイズは以下の管理画面から設定できます。

表示端末、pタグ、記事タイトル、見出しなど、かなり細かく設定が可能です。正直言ってここまで細かく設定できるテーマはかなり珍しいです。

文字の色を変更する方法

文字色はカスタマイザー(外観＞カスタマイズ)から変更してください。メインどころのテキスト色の変更箇所を下記にまとめてみました。

• 記事の本文のテキスト：見出しタグ(hx)/テキスト＞テキスト色一括変更
• リンク色：見出しタグ(hx)/テキスト＞テキスト色一括変更
• 見出し：見出しタグ(hx)/テキスト＞H2タグ〜H5タグ

基本的にはカスタマイザーの「見出しタグ(hx)/テキスト」でフォント関連の色設定ができるので覚えておくと便利ですよ。

文字の行間や余白を設定する方法

AFFINGERは行間や余白を細かく設定する機能も豊富です。

しかし、初期設定のままだと少し行間が狭かったりと、読みにくさが否めません。フォント設定と一緒に行間や余白も適度に調整しておくとオススメです。

少し長くなりそうだったので、詳しくは「(アフィンガー6)行間と余白を調整する4つの方法【適切な使い分けも解説】」をチェックしてみてください。

AFFINGER6(アフィンガー6)の投稿画面で文字サイズを変更する方法

記事執筆時に個別にテキストサイズを変えたい場合の方法を説明します。

アフィンガーの書式設定には「文字サイズ(小)」と「文字サイズ(大)」があります。テキストサイズを変更したいときはこの設定を使いましょう。

標準のテキストサイズに対して、文字サイズ(小)は80％、文字サイズ(大)は130％になります。

文字サイズ(大)のサイズを変更する方法

文字サイズ(大)はCSSでサイズ変更が可能です。追加CSSに以下を追加すればサイズを変えることができます。X%の部分を任意のサイズにして調整してみてください。

/* 文字サイズ(大) */
.oomoji {
 font-size: X%;
}

まとめ：フォント調整で読みやすいブログにしましょう！

今回はアフィンガーのフォント設定の方法の解説でした。

フォント設定で「読みやすさ・ブログのイメージ」が変わってくるので、ブログを立ち上げたら最初のうちに設定を済ませておくと良いですよ。

AFFINGER導入後の初期設定は「【Affinger6(アフィンガー)の初期設定】最適なサイト作りにやっておきべき8つの項目を解説」にまとめています。まだやっていない項目があれば設定しておくとブログ執筆も効率的になるのでチェックしておきましょう。

AFFINGER6を検討中の方