WordPressでブログを書いていると、見出しのデザインを変えたいなと思うことがあります。
見出しのデザインを変更すると、記事の見た目を整えたり、サイト全体の雰囲気に合わせたりできます。
「見出しのデザインを変えたいけれど、どこから設定するのか分からない」という方に向けて、AFFINGER6でH2やH3の見出しデザインを変更する基本的な設定方法をまとめました。
※ AFFINGER6の画面をもとにまとめています。WordPressやAFFINGER6のバージョンによって、表示される項目や画面が異なる場合があります。
見出しのデザインはどこから変更する？
AFFINGER6の見出しのデザインは、WordPress管理画面の「外観」から変更できます。
① ダッシュボード「外観」をクリックします
② 「カスタマイズ」をクリックします
③ 「見出しタグ（hx）/テキスト」をクリックします
④ H2やH3などの見出しデザインを設定できます。
見出しデザインの設定項目
「見出しタグ（hx）/テキスト」では、H2やH3の見出しデザインを設定できます。
文字の色や背景、ボーダーなど、見出しの見た目に関する設定項目があります。
ここでは、次のような設定ができます
- 文字の色
- 背景
- ボーダー
- デザインスタイル
- 背景画像
- 調整
※ 「調整」では、見出しの左右や上下の余白を設定できます。
数値を変更すると、見出しのまわりの余白を調整できます。
設定したい項目を選び、色やデザインを変更します。
H2の見出しデザインを設定する
「見出しタグ（hx）/テキスト」を開き、「H2タグ」の設定項目を表示します。
設定項目から、文字の色や背景、ボーダーなどを変更できます。
設定を変更すると、プレビューに変更後の見出しデザインが表示されます。
WordPressで見出しブロックを追加する方法はこちらの記事にまとめています。
→WordPress初心者向け｜見出しブロックの使い方
H3の見出しデザインを設定する
H2と同じように、H3の見出しもデザインを設定できます。
「見出しタグ（hx）/テキスト」の中から、「H3タグ」の設定項目を開きます。
設定したい項目を変更すると、プレビューでH3の見た目を確認できます。
見出しのデザインだけでなく、サイト全体の文字サイズや行間も設定できます。
詳しくは、こちらの記事にまとめています。
まとめ
AFFINGER6では、WordPress管理画面の「外観」→「カスタマイズ」から、見出しのデザインを設定できます。
H2やH3の設定項目から、文字の色や背景、ボーダーなどを変更できます。
プレビューで見た目を確認しながら、サイトの雰囲気に合うデザインに調整できます。
記事の作成から公開までの基本操作を、シリーズにまとめています。
📖 ブログに役立つ本をKindle Unlimitedで
WordPressやブログについて、本で調べたいときにも使えます。
初めて利用する方は無料体験があります。
