AFFINGER7の見出しタグをカスタマイズする方法｜H2・H3・H4・H5の設定と見やすい見出しの作り方

こんにちは "osaboo"です。"@osaboo_Bot"

この記事で解決できる悩み

この記事では、これらのお悩みを解決します。

「まずはブログを始めたい！」という方は、『WordPressブログ完全ガイド』をご覧ください。
開設から運営・収益化までを初心者向けに画像付きでわかりやすく解説しています。

AFFINGER7の見出しタグとは？

見出しタグとは、記事の内容を整理するために使う「H2」「H3」「H4」「H5」などのHTMLタグです。

WordPressのブロックエディターでは「見出し」ブロックを使って設定できます。

見出しにはそれぞれ役割があり、基本的には以下のような階層で使用します。

• H2：記事の大きなテーマ
• H3：H2の内容をさらに細かく分ける
• H4：H3の内容をさらに細かく分ける
• H5：H4の内容をさらに細かく分ける

たとえば、「AFFINGER7のカスタマイズ方法」という記事なら、次のような構成になります。

H2：AFFINGER7の見出しをカスタマイズする方法
　└ H3：カスタマイザーで見出しを設定する
　└ H3：記事ごとに見出しを変更する
　　　└ H4：見出しのスタイルを変更する

このように見出しを階層的に使うことで、記事の構成が整理され、読者も内容を追いやすくなります。

AFFINGER7では、サイト全体の見出しデザインを設定できるほか、ブロックエディターから見出しごとにスタイルを変更することもできます。

また、サブタイトルを活用すると、読者が「続きを読みたい」と思う見出しを簡単に作ることができます。

AFFINGER7の見出しをカスタマイズする方法

AFFINGER7では、「カスタマイザー」から見出しのデザインや色、装飾などを設定できます。

見出しを整えることで、記事の内容が整理され、読者にとっても読みやすいページになります。

それでは順番に見ていきましょう。

❶ 見出しの設定画面を開く

見出しタグのデフォルト設定は、カスタマイザーで行います。

カスタマイザーを起動します。

Menu『WordPress管理画面 → 外観 → カスタマイズ』をクリックします。

カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。

以下の手順で、見出しの設定画面を開きます。

❷ 大見出し（H2タグ）の設定

記事の大見出しとなるH2を設定します。

ブログ全体のデザインに合わせて、「目立たせる見出し」または「シンプルで読みやすい見出し」を選ぶのがおすすめです。

さらに、余白やマージンを調整することで、見出しをより際立たせることができます。

H2は、見出し設定の中でも特にデザインのバリエーションが豊富に用意されています。

「大見出し（H2タグ）」の詳細メニューを選択し、下側にスクロールした画面です。

❸ H3・H4・H5も同じように設定する

H3・H4・H5も、H2と同じようにカスタマイザーから設定できます。

見出しが小さくなるにつれて設定できる項目は少なくなりますが、文字色や背景色、装飾、余白などを調整して、サイト全体のデザインに合わせて設定しましょう。

大見出し（H2）から小見出し（H5）まで、設定要領は同じなので、省略します。

❹ プレビューで確認する

設定を変更したら、カスタマイザーのプレビューで見出しの表示を確認します。

文字色・背景色・装飾・余白などが、サイト全体のデザインと合っているかを確認しましょう。

問題なければ、最後に「公開」をクリックして設定を反映します。

ここでは、設定後の見た目をイメージしやすいように、見出しデザイン（H2）のサンプルをご紹介します。

実際の表示を確認しながら、サイトの雰囲気に合うお気に入りのデザインを見つけてみてください。

 吹き出しデザイン

吹き出し下線デザイン（EXのみ）

 囲み&左ラインデザイン

2色アンダーライン

 グラデーションアンダーライン

センターライン

ショートライン

 囲みドットデザイン

ストライプデザイン

 破線アンダーライン

 左ラインデザイン

チェックボックスデザイン

• 上記サンプルには「EX」バージョンが含まれます。

参考サンプルのカラー設定

• 文字色：#515151
• 背景色：クリア
• 背景色（グラデーション）：クリア
• ボーダー色：#dd3333
• ボーダー色（サブ）：#cccccc

H2・H3・H4のおすすめ設定

見出しは、すべて同じデザインにするのではなく、H2・H3・H4で見た目に変化をつけると、見出しの階層がわかりやすくなります。

ここでは、ブログ初心者でも設定しやすい、シンプルで見やすいデザインを例に紹介します。

H2｜記事の区切りがわかるデザイン

H2は記事内の大きな区切りになるため、背景色や下線などを使って、本文との違いがわかるデザインがおすすめです。

例えば、

• 背景色を設定する
• 下線やボーダーを追加する
• 上下の余白を調整する

といった設定にすると、H2がしっかり目立ちます。

特に記事の中でH2が多く使われる場合は、派手すぎず、本文から自然に目を引く程度にすると読みやすくなります。

当サイトでは、「左ラインデザインに変更」を採用しています。

H3｜H2より控えめなデザイン

H3はH2の中で内容を細かく分けるための見出しです。

そのため、H2よりもシンプルで控えめなデザインにすると、見出しの階層がわかりやすくなります。

例えば、

• 文字色を変更する
• 左右や下にボーダーを付ける
• H2より余白を小さくする

などがおすすめです。

当サイトでは、「2色アンダーラインに変更」を採用しています。

H4｜シンプルで読みやすいデザイン

H4はさらに細かい項目を分ける見出しなので、装飾を増やしすぎず、文字の強調を中心にするとスッキリまとまります。

H2やH3と同じように装飾を強くすると、見出し同士の違いがわかりにくくなるため、シンプルなデザインがおすすめです。

当サイトでは、「左ボーダーを付ける」を採用しています。（ボーダーの太さやサイズを小さくする）

H2・H3・H4の設定例

迷った場合は、次のようにH2からH4に向かって装飾を少なくしていくと、自然な階層を作れます。

見出し	おすすめのデザイン
H2	背景色・ボーダーなどでしっかり強調
H3	下線・左ボーダーなどで控えめに強調
H4	太字・文字色などシンプルに強調

このように、見出しが小さくなるほど装飾をシンプルにすると、記事全体がスッキリして読みやすくなります。

設定した見出しを確認・反映する

見出しのデザインを設定したら、カスタマイザーのプレビュー画面で実際の表示を確認します。

特に、以下のポイントをチェックしましょう。

• 見出しと本文の区別がつきやすいか
• H2・H3・H4の階層がわかりやすいか
• 文字色や背景色がサイト全体のデザインと合っているか
• 見出し上下の余白が適切か
• スマートフォンでも見やすいか

問題がなければ、カスタマイザー上部の「公開」をクリックして設定を反映します。

設定後は実際の記事でも確認する

カスタマイザーのプレビューだけでなく、実際の記事ページでも見出しの表示を確認しましょう。

記事によって見出しの文字数や階層が異なるため、複数の記事を確認しておくと安心です。

特にスマートフォンでは、長い見出しが2行・3行になることもあります。文字が詰まりすぎていないか、余白が広すぎないかも確認しておきましょう。

これで、AFFINGER7の見出しカスタマイズは完了です。

投稿・固定ページで見出しタグを記事単位で設定する方法

デフォルト設定をしていても、記事に合わせて「見出しタグのスタイル」をその都度変更できます。

• 投稿・固定ページのエディター画面で設定します。

エディター画面右側の「ブロック」タブから設定できます。（赤破線部）

設定メニューの場所は、エディター画面の右側に表示される『設定 → ブロック』タブメニューです。

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

ブロックタブの「設定」→ 詳細設定

ブロックタブの「スタイル」→ 詳細設定

記事ごとに設定できる見出しタグのスタイルサンプル

ここでは、設定のイメージがしやすいように、見た目を確認できるサンプルをご紹介します。
ぜひ、お気に入りのデザインを見つけてみてください。

関連記事「すごいもくじ」について こちらの記事で詳しくご紹介しています。

AFFINGER7の見出しをカスタマイズするときの注意点

見出しは自由にデザインできますが、装飾を増やしすぎると、かえって記事が読みにくくなることがあります。

装飾を使いすぎない

背景色・ボーダー・アイコンなどをすべて組み合わせると、見出しが目立ちすぎて本文とのバランスが崩れてしまいます。

サイト全体のデザインに合わせて、必要な装飾だけを使うことを意識しましょう。

見出しごとの違いをわかりやすくする

H2・H3・H4を同じデザインにすると、それぞれの階層がわかりにくくなります。

H2はしっかり強調し、H3・H4は装飾やサイズを少し控えめにするなど、見た目に違いをつけると記事の構成が伝わりやすくなります。

スマートフォンでの表示も確認する

PCでは問題なく見えても、スマートフォンでは見出しが大きすぎたり、長い見出しが何行にも分かれたりすることがあります。

設定後は、スマートフォンでの見え方も必ず確認しておきましょう。

まとめ！AFFINGER7の見出しタグをカスタマイズする方法｜H2・H3・H4・H5の設定と見やすい見出しの作り方

AFFINGER7では、カスタマイザーからサイト全体の見出しデザインを設定できるほか、投稿・固定ページのエディター画面から記事ごとに見出しのスタイルを変更することもできます。

見出しをカスタマイズするときは、単に目立たせるだけでなく、H2・H3・H4・H5の階層がわかりやすくなるようにデザインすることが大切です。

まずはサイト全体の見出しデザインを整え、必要に応じて記事ごとにスタイルを調整してみましょう。

AFFINGER7の豊富な見出しデザインを活用して、読みやすく、見た目にも統一感のあるブログを作ってみてください。

関連記事 見出しの書き方を詳しく！