こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6の見出し タグカスタマイズ方法を解説します。
カスタマイザーでの設定や投稿（エディター）画面での調整、キャッチコピーの付け方までを初心者向けに優しくご紹介します。
AFFINGER6の見出しデザインはどう設定する？
キャッチコピーはどう書くの？
それではご覧ください。
AFFINGER6の見出しタグとは？
AFFINGER6の見出しタグは、記事の構造を整理するだけでなく、読者の目を引きつけるデザインにカスタマイズできる機能です。
標準の見出し（H2・H3など）に装飾を加えたり、キャッチコピーを入れたりすることで、単調になりがちな記事の印象を大きく変えることができます。
見出しの基本機能
- 記事内での階層構造を示す
- 見出しデザインを変えられる
- 目次に自動反映される（H2 / H3）
AFFINGER6でできるカスタマイズ例
- 色の変更（文字色・背景色）
- ボーダーや枠線の追加
- アイコンの表示
- キャッチコピーの挿入
特にキャッチコピーを活用すると、読者が「続きを読みたい」と思う見出しを簡単に作ることができます。
AFFINGER6の見出しをカスタマイズする方法
AFFINGER6では、見出しタグ（H2・H3など）を自由にカスタマイズできます。文字の大きさや色、ボーダー、アイコン、キャッチコピーなどを設定することで、記事の印象を大きく変えられます。
ここでは、基本的なカスタマイズ方法と操作手順を順を追って解説します。
それでは順番に見ていきましょう。
見出しタグ｜デフォルト設定の変更方法
見出しタグのデフォルト設定は、カスタマイザーで行います。
カスタマイザー起動
カスタマイザーを起動します。
Menu 『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。
カスタマイザーが起動すると、画面の左側に以下の画面が表示されます。
『見出しタグ（hx）/ テキスト』をクリックして進みます。
見出しタグ（hx）/ テキスト
➡︎
詳細設定
⬇︎
各々の見出しタグのデフォルトを確認してお好みのスタイルに変更しましょう。
以下では、「大見出し（H2タグ）」の詳細メニューを選択し、下側にスクロールした画面です。
文字色
- カラーパレットより選択 → #RRGGBB（デフォルト）
背景色
- カラーパレットより選択 → #RRGGBB（デフォルト）
グラデーション上部
- カラーパレットより選択 → #RRGGBB（デフォルト）
グラデーションを横向きにする → OFF（デフォルト）
ボーダー
- カラーパレットより選択 → #RRGGBB（デフォルト）
サブ
- カラーパレットより選択 → #RRGGBB（デフォルト）
- 上下のみにする → OFF（デフォルト）
- 下をサブカラーにする → OFF（デフォルト）
- 太さ（px）→ 未記入（デフォルト）
デザインスタイル
背景画像
- 画像を選択
横位置
- 『左・真ん中・右』から選択
縦位置
- 『上・真ん中・下』から選択
- 背景画像を繰り返さない
調整
- 左の余白（px）→ 未記入（デフォルト）
- 上下の余白（px）→ 未記入（デフォルト）
- 上下のマージン（px）→ 未記入（デフォルト）
- テキストを中央寄せ
- デザインを幅一杯に
- 背景や吹き出しの角を丸くする
- カスタマイザーのCSSを無効化
- チェックを入れて選択
大見出し（H2）〜小見出し（H5）の設定容量は同じため省略します。
※ 見出しによって設定項目が多少変わります。
見出しタグ｜デフォルトスタイルを変更したサンプル
ここでは、設定のイメージがしやすいように、見た目を確認できるサンプルをご紹介します。
ぜひ、お気に入りのデザインを見つけてみてください。
吹き出しデザイン
吹き出し下線デザイン（EXのみ）
囲み&左ラインデザイン
2色アンダーライン
グラデーションアンダーライン
センターライン
ショートライン
囲みドットデザイン
ストライプデザイン
破線アンダーライン
左ラインデザイン
チェックボックスデザイン
- 上記サンプルには「EX」バージョンが含まれます。
見出しタグ｜記事単位での設定方法
デフォルト設定をしていても、記事に合わせて「見出しタグのスタイル」をその都度変更できます。
- 投稿（エディター）画面での作業になります。
エディター画面右側の「ブロック」タブから設定できます。（赤破線部）
設定メニューの場所は、投稿（エディター）画面の右側に表示される『設定＞ブロック』タブメニューです。
表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。
『ブロックタブメニュー＞スタイル』詳細
色
- テキスト（カラーパレット設定）
- 背景（カラーパレット設定）
タイプグラフィ
- サイズ
- 『S・M・L・XL』から選択
サイズ +
- パディング設定
アイコン
- アイコンリストから設定
『ブロックタブメニュー＞設定』詳細
SUGOI MOKUJI（すごいもくじ）
- 目次での表示名
高度な設定
- HTML アンカー
- 省略します。
- 追加 CSS クラス
- 省略します。
見出しタグ｜記事ごとに変更できるスタイルのサンプル
ここでは、設定のイメージがしやすいように、見た目を確認できるサンプルをご紹介します。
ぜひ、お気に入りのデザインを見つけてみてください。
キャッチコピーを使った見出しタグの2段表示方法
ここでは、AFFINGER6でキャッチコピーを使って見出しタグを2段にする手順をご紹介します。
- 投稿（エディター）画面での作業になります。
キャッチコピーは、ツールバーで設定します。
キャッチコピーを見出しの下に表示
先頭の文字を選択していない場合、キャッチコピーは見出しの下に表示されます。
投稿（エディター）画面で、キャッチコピーを付けたい見出しを選択します。
キャッチコピーは、見出しの下に表示されます。
キャッチコピーを見出しの上に表示
先頭の文字を選択すると、キャッチコピーは見出しの上に表示されます。
投稿（エディター）画面で、キャッチコピーを付けたい見出しを選択します。
キャッチコピーは、見出しの上に表示されます。
キャッチコピーを「すごいもくじ」に表示する方法
ここでは、キャッチコピーを「すごいもくじ」に反映させる設定を紹介します。
キャッチコピーは通常、目次には反映されない設定になっています。
ただ、場合によってはキャッチコピーを目次にも表示したいことがありますよね。
そんなときは『キャッチコピー＋目次』を選択すればOKです。設定手順は「キャッチコピー」と同じです。
「すごいもくじ」について こちらの記事で詳しくご紹介しています。あわせてご覧ください。
-
-
AFFINGER6 限定特典！無料で使える SUGOIMOKUJI LITEの導入・設定・使い方を徹底解説
AFFINGER6を購入すると期間限定で無料でもらえるプラグイン「SUGOIMOKUJI LITE（すごいもくじ）」の導入手順・設定方法・カスタマイズ方法を初心者向けに解説！目次を見やすく最適化し、記事の読みやすさを向上させましょう。
まとめ！AFFINGER6 見出しタグのカスタマイズ方法｜キャッチコピーで読まれる見出しを作るコツ
AFFINGER6では、カスタマイザーと投稿（エディター）画面の両方から、見出しタグのデザインを柔軟にカスタマイズできます。デフォルト設定を整えておくと統一感が出ますが、記事ごとにスタイルを変えて個性を出すことも可能です。
また、見出しにキャッチコピー（サブタイトル）を追加することで、内容がより伝わりやすくなり、読者が文章を読み進めやすくなります。キャッチコピーは、必要に応じて「すごいもくじ」にも反映できます。
ポイントは以下の3つ
- 全体の見出しデザインはカスタマイザーで設定
- 記事ごとの細かな調整はエディター画面から簡単に変更可能
- キャッチコピーを活用して検索意図やポイントを補足すると、読まれる見出しに仕上がる
AFFINGER6の見出しカスタマイズを活用して、読者にとって読みやすく、SEOにも強い記事を作りましょう。
この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
見出しの書き方を詳しく！あわせてご覧下さい。
