AFFINGER7で記事を書き始めたものの、
「見出しはどうやって作ればいいの？」
「H2やH3はどう使い分ければいい？」
「AFFINGER7らしい見出しデザインに変更したい」
と迷っていませんか？
見出しは、記事の内容を分かりやすく整理するための重要な要素です。
適切に見出しを設定すると、読者が記事の内容を把握しやすくなり、読みたい情報も探しやすくなります。
AFFINGER7では、通常の見出しブロックを使ってH2・H3などを簡単に設定できるほか、見出しのデザイン・色・アイコン・サブタイトルなども変更できます。
AFFINGER7の基本設定や記事作成、カスタマイズ方法をまとめて確認したい方は、AFFINGER7の使い方【まとめ】も参考にしてください。
この記事では、AFFINGER7で見出しを作成する方法から、H2・H3・H4の正しい使い分け、見出しデザインを変更する方法まで初心者向けに分かりやすく解説します。
見出しとは？
見出しとは
記事の内容が一目でわかるようにつけた表題のことです。
例えば「ウサギの飼育方法」という記事を書こうと思った際に
- ウサギの種類
- ウサギの購入方法
- ウサギを飼育するのに必要なもの
- ウサギの基本的な飼育方法
- ウサギ飼育時の注意点
- ウサギの餌について
- ウサギのしつけについて
といった内容について書こうかなと思いますよね。
これが「見出し」です。
AFFINGER7で見出しを作成する方法
まずは基本的な見出しの作成方法から見ていきましょう。
見出しを追加する
投稿編集画面を開きます。
「＋」ボタンをクリックし、「見出し」を選択してください。
見出しブロックが追加されたら、タイトルを入力します。
見出しレベルを選択する
見出しレベルはH1～H6まで選択することができます。
下画像の丸部分ですね。
見出しレベルの注意点
見出しの使い方には約束ごとがあるので、初心者の方はしっかりと覚えておきましょう。
① H1はタイトル専用。本文では絶対に使わない
WordPress記事では、H1は記事タイトルのみ に使用されます。
本文内で H1 を使うと、
- SEOに悪影響
- 目次が崩れる
- 読者が混乱する
といった悪影響がある為、絶対に使わないようにしてください。
② H2・H3・H4 の正しい使い分け方をする
一般的なブログ記事では、
- H2：大きなテーマ
- H3：H2の詳細説明
- H4：さらに細かい説明
という形で使います。
使ってもH4までで、H5・H6は使わなくて大丈夫です。
悪い例：
H2 → H4（H3を飛ばす）
H2 → H2 → H4（不規則）
このような“階層ジャンプ”は Google にとって理解しにくくなり、記事構造が崩れます。
初心者の方はわかりにくかもしれないので具体的に例をあげておきます。
例えば「ウサギの飼育方法」という記事を書く場合
「ウサギの飼育方法」という記事タイトルはH1になり、記事内容の見出しはH2を設定します。
「ウサギの種類」を説明するにあたって
- 飼育しやすい種類
- 飼育が難しい種類
といった表題で説明することができると思います。
そこで、この表題はH2で設定した「ウサギの種類」について説明した１段階低いレベルの表題としてH3を設定します。
このように、見出しをしっかりと階層分けしてあげるとSEO的にも読みやすさ的にもプラスです。
見出しのスタイルを変更する
AFFINGER7では見出しのスタイルを13種類から選択することができます。
※ AFFINGER6では12種類でした。
※ また、アップデート等でスタイルは変更となる可能性があります。
スタイルを変更するには、投稿編集画面右側から「スタイル」の項目を選択します。
例えば、「ふきだし」のスタイルを設定するとこんな感じです↓
見出しのテキスト色や背景色を変更する
スタイルの項目で見出しのテキスト色や背景色を変えることもできます。
スタイルの色の項目で設定することが可能です。
例えば、背景：黒 テキスト：白に変更するとこんな感じです↓
見出しにアイコンを設定する
見出しにアイコンを設定することもできます。
ただし、見出しのスタイルによってはアイコンを表示できないスタイルもあります。
例えば、ハートのアイコンを設定するとこんな感じです↓
見出しにサブタイトルを設定する
AFFINGER7では、見出しブロックにサブタイトルを設定できます。
たとえば、
- AFFINGER7の見出し設定
- Heading Settings
のように、通常の見出しに補足となるサブタイトルを組み合わせることができます。
こんな感じです。
見出し作成時の注意点
見出し作成時の注意点をいくつかまとめておきます。
長すぎる見出しは避ける
見出しは簡潔で分かりやすくすることが大切です。
目安としては20〜35文字程度がおすすめです。
見出しだけで内容が分かるようにする
読者はまず見出しを流し読みします。
この見出しは○○についての内容と読者がすぐに判断できることで、読み進めてくれる可能性が高くなります。
また、目次機能を使っているなら見出しが目次の内容になります。
目次を見た読者が自分の求める情報であることが判断できる見出しにすることが重要です。
色は2〜3色に統一する
色を使いすぎると記事全体が見づらくなります。
サイトカラーを中心に統一感を持たせましょう。
H2とH3の差をつける
H2とH3のデザインが似ていると階層が分かりにくくなります。
- H2：背景色あり
- H3：下線のみ
などデザインに差をつけるのがおすすめです。
装飾しすぎない
派手なデザインは一時的に目立ちますが、長い記事では読みにくくなります。
シンプルなデザインの方が読者に好まれる傾向があります。
AFFINGER7の見出し設定でよくある質問
AFFINGER7の記事本文でH1は使いますか？
基本的には使用しません。
WordPressでは記事タイトルがH1として出力されるため、記事本文はH2から始めるのが分かりやすい構成です。
H1は記事タイトル、H2以降を記事本文の構造として考えておけばよいでしょう。
H2の下にH4を使ってもいいですか？
基本的には、
H2→H3→H4
の順番で使用するのがおすすめです。
見出しは文字の大きさではなく記事構造を示すために使います。
H2の内容を分ける場合はH3、H3をさらに細かくする場合はH4と覚えておきましょう。
見出しの色は記事ごとに変更できますか？
変更できます。
AFFINGER7では、ブロック側から個別に見出しのデザインや色を設定できます。
ただし、通常の記事ではサイト全体のデザインを統一したほうが読みやすくなります。
基本デザインはカスタマイザーで設定し、必要な場合だけ個別変更する方法がおすすめです。
H2とH3のデザインは別々に設定できますか？
設定できます。
AFFINGER7ではH2・H3・H4など、それぞれの見出しデザインを設定できます。
H2は目立つデザイン、H3は少し控えめなデザインというように階層が分かるデザインにすると、記事を読みやすくできます。
見出しデザインは途中から変更しても大丈夫ですか？
変更して問題ありません。
サイト運営を続けていると、「もう少しシンプルなデザインにしたい」「サイトカラーに合わせたい」と感じることもあります。
サイト全体の見出しデザインを変更する場合は、既存記事の見え方も確認しながら調整しましょう。
AFFINGER7でFAQを作る方法は？
AFFINGER7には、よくある質問を作成しやすいFAQブロックも用意されています。
見出し設定を覚えたら、FAQ部分も専用ブロックを使って整理すると記事を読みやすくできます。
詳しい設定方法については、AFFINGER7のFAQブロックの使い方を参考にしてください。
まとめ｜AFFINGER7なら初心者でも簡単に見出しを設定できる
今回は、AFFINGER7で見出しを作成する方法について解説しました。
AFFINGER7で記事を書く際は、
- H1は記事タイトル
- 記事本文はH2から始める
- H2の内容を細分化するときはH3
- H3をさらに細分化するときはH4
- H2→H3→H4という階層を意識する
という基本を覚えておけば大丈夫です。
また、AFFINGER7では見出しの作成だけでなく、デザイン・文字色・背景色・アイコン・サブタイトルなども設定できます。
サイト全体のH2・H3などについてはカスタマイザーから設定できるため、まず基本デザインを決めてから、必要な場所だけ個別に変更すると管理しやすくなります。
見出しは記事の内容を分かりやすく整理するための重要な要素です。
最初から難しく考えすぎず、「大きなテーマがH2、その中を細かく分けるのがH3」と覚えるところから始めてみてください。
見出しを作れるようになったら、次はボタン・ボックス・FAQ・テーブルなど、AFFINGER7の記事作成機能も少しずつ覚えていきましょう。
次に設定したい機能を探している方は、AFFINGER7の使い方【まとめ】から確認できます。
また、AFFINGER7の特徴や購入プランなども含めて詳しく知りたい方は、AFFINGER7の特徴・使い方を詳しく見るも参考にしてください。