AFFINGER6(アフィンガー6)の見出しデザインカスタマイズ方法を解説

AFFINGERの見出しデザインはどこでカスタマイズできるの？設定手順があれば知りたい！

ゆう

AFFFINGERは見出しも簡単に好きなに設定にできるよ。今回はアフィンガーの見出しカスタマイズの方法を紹介していくよ。

見出しは読者に記事内容のポイントを伝えるためにとても重要な役割を果たします。本記事を参考にして読者を惹きつけられるようなオシャレな見出しにカスタマイズしてみてくださいね。

本記事の内容

• 見出しデザインの設定方法
• 見出しにキャッチコピーをつける方法
• 【当記事オリジナル】見出しをカスタマイズするCSS設定

AFFINGER6(アフィンガー6)で見出しをカスタマイズする方法→大きく2つ

アフィンガー6で見出しをカスタマイズするには次の2つの方法があります。

• カスタマイザーで「見出し」をデザイン
• 見出しブロックで個別にカスタマイズ

流れとしては、カスタマイザーでデフォルトの見出しデザインを設定します。デフォルトのデザインから変更したい場合に、見出しブロックの「スタイル設定」で個別にカスタマイズすると考えましょう。

では、それぞれの設定方法について解説していきます。

AFFINGER6で見出しをカスタマイズする方法カスタマイザーで「見出し」をデザインする

まずはデフォルトの見出し設定をしていきましょう。デフォルトの見出しは「カスタマイズ＞見出しタグ(hx)/テキスト」から設定できます。

カスタマイザーでは「記事タイトル(h1)、h2〜h5の見出しタグ」のデザインを個別に設定できます。デフォルトで表示したい見出しデザインを設定しておきましょう。

AFFINGER6(アフィンガー6)の見出しデザイン基本スタイル

アフィンガー6で設定できる見出しの基本スタイルをまとめたので参考にしてください。

見出しのフォント変更はAFFINGER管理の「全体設定」から

アフィンガーではフォント周りの設定は「AFFINGER管理＞全体設定」から変更してください。

全体設定では「フォントの種類、フォントのサイズ」を変更できます。フォント設定について詳しく知りたい方は「AFFINGER6(アフィンガー)のフォント設定を解説！文字サイズや色を調整する方法」を参照ください。

AFFINGER6で見出しをカスタマイズする方法見出しブロックで個別にカスタマイズする

見出しブロックではカスタマイザーで設定した見出しデザインを初期化して選択したスタイルを反映できます。

各アイコンにはデフォルトでカラーが設定されています。カラー変更の方法が少しわかりにくいので下表を参考に設定してみてください。

見出しにキャッチコピー(小さい文字)を入れる方法

アフィンガーには見出しの上に簡単にキャッチコピー（小さい文字）を入れることができます。見出しにキャッチコピーを入れる方法は次のとおり。

キャッチコピー込みで見出しを作る

キャッチコピーにしたい箇所を選択して、「キャッチコピー」か「キャッチコピー＋目次」を選択

キャッチコピー＋目次とすることで、目次にもキャッチコピー部分を表示できます。（※目次に表示するには公式プラグインの「SUGOI MOKUJI」が必要です。）

これで完成。

ゆう

キャッチコピーは小さい文字で表示できるから圧迫感が少ない。記事の読みやすさアップにつながるから積極的に使っていこう！

AFFINGER6(アフィンガー6)の見出しブロックを使いやすくするコツ（CSS追加あり）

見出しブロックのデザインはデフォルト以外のカラーを変更したい場合は毎回手動で設定する必要があります。

ただ、手動で毎回設定するのはそれなりに手間です。

ということで、デフォルト以外の「見出しブロックのテキストや背景設定を変更するCSS」を下記に載せておきます。カラーコードの部分を設定してください。

/* 見出しブロック　初期カラー変更CSS */
/* 以下のCSSを追加CSSに追記してください */
/* ライン */
.is-style-st-heading-custom-line::after{
	background-color: #3680A1; /*ラインカラー変更*/
}

/* ふきだし */
.is-style-st-heading-custom-bubble{
	color: #ffffff;/*文字カラー変更*/
	background-color: #3680A1;/*背景カラー変更*/
}
.is-style-st-heading-custom-bubble::after{
	border-top: 10px solid #3680A1;　/*三角カラー変更*/
}

/* 斜線 */
.is-style-st-heading-custom-diagonal{
	color: #333333;/*文字カラー変更*/
	background-color: #f3f3f3;/*背景カラー変更*/
}

/* カウント */
.is-style-st-heading-custom-count::before{
	color:#3680A1;　/*数字カラー変更*/
}

/* 注意 */
.is-style-st-heading-custom-attention::before{
	color:#3680A1;　/*アイコンカラー変更*/
}

/* チェック */
.is-style-st-heading-custom-check::before{
	color: #3680A1; 　/*アイコンカラー変更*/
}

/* 質問 */
.is-style-st-heading-custom-question:not(.has-background)::before{
	color: #3680A1; /*アイコンカラー変更*/
}

/* 答え */
.is-style-st-heading-custom-answer:not(.has-background)::before{
	color: #3680A1; /*アイコンカラー変更*/
}

/* ステップ */
.is-style-st-heading-custom-step::before{
	color: #3680A1; /*STEP文字カラー変更*/
}
.is-style-st-heading-custom-step::after{
	color: #3680A1;/*数字カラー変更*/
	border-bottom-color:#3680A1;/*下線カラー変更*/
}

ゆう

ブロックエディタで見出しスタイルを変更する人は、執筆効率が上がるので参考に！

まとめ：AFFINGER6の見出しを好みのデザインにカスタマイズしよう

今回はアフィンガー6の見出しデザインのカスタマイズの方法を紹介しました。

見出しのデザインで、ブログの印象や記事の読みやすさに影響してきます。

読者が読みやすいブログにするためにも、この記事を参考にして見出しデザインをカスタマイズしてみてください。

AFFINGER6を検討中の方