【AFFINGER5】記事タイトル&見出しのデザインをカスタマイズする

今回は、AFFINGER5の記事タイトル&見出しのデザインをカスタマイズする方法について解説します。

AFFINGER5はCSSなしで簡単にデザインが変えられるので是非試してみてください。

AFFINGER5の記事タイトル&見出しをカスタマイズする

まずは、管理画面を開いてください。

次に『外観➡︎カスタマイズ➡︎各テキストとhタグ（見出し）を選択すると、以下のようになると思います。

この4つを順番に解説します。

参考にしていただけると嬉しいです。

デザイン①：記事タイトル

まずは記事タイトルからです。

ちなみに僕の記事タイトルはこんな感じです。↓

このくらいならCSSなしでもAFFINGER5の設定でデザインを作ることができます。

それでは、カスタマイズの画面から「記事タイトル」クリックしてください。

まず、上の5つの項目で全体の色合いを設定できます。

文字や背景、枠線をそれぞれ選びましょう。

続いて、下の方にスクロールするとタイトルの基本スタイルの設定ができます。

画像の上の「◉」のところは一つ、下の「」のところは複数の選択ができます。

そして、次の項目では背景画像が選べます。

試しに以下の画像を設定してみました。

するとこんな感じのデザインに…↓

色合いの問題で見づらくなってしまいましたね…。

ただ、画像を上手に使えばオリジナルのデザインが作れるかもしれません。

そして、最後の「カスタマイザーのCSSを無効化」にチェックを入れると「追加CSS」に書き込まれた記事タイトルのCSSが無効になります。

記事タイトルのカスタマイズは以上です。

デザイン②：H2タグ

続いてH2タグです。

僕のH2タグのデザインは以下の通りです。↓

こちらのデザインも追加CSSなしで作りました。

それでは、「H2タグ」を開いてください。

H2タグも記事タイトルと同じような設定ですが、「H2タグの基本スタイル」という項目が少し違います。

「チェック（ボックスタイプ）デザインに変更」というスタイルが追加されています。

それ以外は基本同じなので、記事タイトルと同じように設定しましょう。

デザイン③：H3タグ

次はH3タグです。
僕のデザインはこんな感じ↓

デザインは「H3タグ」からカスタマイズしましょう。

設定はおそらくH2タグと同じだと思います。

設定が完了したら「公開」をお忘れなく。＾＾

デザイン④：H4タグ&H5タグ

最後は、H4タグとH5タグです。
設定項目が少なく、どちらとも同じ設定なのでまとめて紹介します。

僕のH4タグは以下の通り。↓

H5タグは使ったことがないのでデフォルトのままです。

それでは、「H4タグ」の設定を開いてください。

以下のような設定項目が表示されます。

色をカスタマイズする項目が6つ➡︎3つになりましたね。

サブカラーやグラデーションカラーがなくなりました。

下のスタイル設定も項目が減っていますね。

ちなみに、背景画像の設定項目はH2タグと同じでした。

まとめ

今回は、AFFINGER5の記事タイトル&見出しのデザインをカスタマイズする方法について、以下の4つを解説しました。

AFFINGER5を使うと見出しや記事タイトルのデザインが簡単にカスタマイズできますね。

まだAFFINGER5を使ってないという方はぜひこちらからどうぞ。↓

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