こんにちは "osaboo"
です。"@osaboo_Bot"
SWELL 見出しタグ（Hタグ）の使い方｜目次に表示させない見出しを作る方法
SWELLの見出しタグ（Hタグ）の基本から、特定の見出しを目次に表示させない方法まで、初心者にもわかりやすく解説します。
QuestionSWELLの見出しって、どう書くのが正解？
この見出し、目次には出したくないんだけど…
- テキスト：見出し
WordPress標準のブロックエディター機能です。
見出しタグは「h2・h3」を目次に表示させる設定が多くみられます。（当サイト含む）
SWELLの見出しタグ（Hタグ）は、記事の読みやすさやSEOにも関わる重要な要素です。
正しい見出し構成を理解しておくことで、記事全体を整理しつつ、必要に応じて特定の見出しだけを目次に表示させないといった調整もできるようになります。
この記事では、SWELLにおける見出しタグの基本的な使い方から、目次に表示させない見出しを作る方法まで、初心者の方にもわかりやすく解説します。
こんな方におすすめ！
- SWELLの見出しタグ（Hタグ）の正しい使い方を知りたい
- 見出しの一部を目次に表示させずに調整したい
- 記事構成を整理して、読みやすくしたいブロガーの
- SWELLを使い始めたばかりで見出し設定を迷っている
この記事でわかること！
- SWELLにおける見出しタグ（Hタグ）の基本的な考え方
- 見出しを使った正しい記事構成の作り方
- 特定の見出しを目次に表示させない方法
- 見出し設定でつまずきやすい注意点と対処法
それではご覧ください。
目次 "Contents"
SWELLの見出しタグ（Hタグ）とは？基本をわかりやすく解説
見出しタグ（Hタグ）とは、記事の内容を階層構造で整理するためのHTMLタグのことです。
WordPressでは主に H2〜H6 が使われ、SWELLでもこの見出し構造がそのまま反映されます。
見出しを正しく使うことで…
- 記事の内容がひと目で理解しやすくなる
- 読者が必要な情報を探しやすくなる
- 検索エンジンに記事構成を正しく伝えられる
といったメリットがあります。
見出しタグ（H2〜H6）の役割
SWELLでは、以下のような役割分担で見出しを使うのが基本です。
- H2：記事内の大きな章（話題の切り替わり）
- H3：H2の内容を補足・分解する項目
- H4以下：さらに細かい説明や補足（使いすぎ注意）
なお、H1は記事タイトルとして自動的に設定されているため、本文内で使う必要はありません。
SWELLで見出しが重要な理由
SWELLはデザイン性の高いテーマですが、見た目だけで見出しを使ってしまうと…
- 目次が不自然に長くなる
- 意図しない見出しまで目次に表示される
- 記事構造がわかりにくくなる
といった問題が起こりがちです。
そのため、「見出しとして使う部分」と「見た目だけ区切りたい部分」 を分けて考えることが重要になります。
SWELLで正しい見出し構成を作る基本ルール
SWELLで記事を書くときは、デザインよりも先に見出しの構造を意識することが大切です。
見出し構成が整っていれば、記事全体が読みやすくなり、目次やSEOの面でも良い影響があります。
ここでは、初心者の方がまず押さえておきたい基本ルールを紹介します。
H1は記事タイトルに自動設定されている
SWELLでは、記事タイトルが自動的に H1タグ として設定されています。
そのため、本文中でH1を使う必要はありません。
本文は必ず H2からスタート するのが基本です。
H1を重複して使うと、記事構造が崩れる原因になるため注意しましょう。
見出しはH2・H3を中心に使うのが基本
初心者のうちは、見出しは H2とH3だけ を意識すれば十分です。
- H2：話題の大きな区切り
- H3：H2の内容を整理・補足する項目
この2段階で構成すると、記事全体の流れが自然になり、読者も内容を追いやすくなります。
H4以下は、どうしても細かく分けたい場合のみ使うようにしましょう。
見出しレベルを飛ばしてはいけない理由
見出しタグは、必ず 順番どおりに使う ことが重要です。
例えば…
- H2の直下にいきなりH4を置く
- H3を使わずにH2→H4にする
といった使い方はおすすめできません。
これは、検索エンジンやスクリーンリーダーが「記事の構造」として正しく理解できなくなるためです。
見出しは「見た目」ではなく、文章の構造を表すものとして使う意識を持ちましょう。
SWELLの目次はどの見出しが表示される？
SWELLでは、見出しタグを使うと自動的に目次が生成されます。
ただし、すべての見出しが無条件で表示されるわけではありません。
ここでは、SWELLの目次に表示される見出しの仕組みを整理しておきましょう。
目次に表示される見出しの条件
SWELLの目次には、基本的に以下の条件を満たした見出しが表示されます。
- 見出しタグ（H2〜H6）が使われている
- 目次設定で表示対象になっている階層である
- 非表示設定がされていない
つまり、Hタグとして認識されている限り、原則は目次に表示されると考えておくとわかりやすいです。
見出しレベルと目次表示の関係
多くのサイトでは、目次には H2とH3のみ表示 される設定になっています。
- H2：必ず目次に表示される
- H3：H2の中の小見出しとして表示される
- H4以下：設定によっては非表示になることも多い
ただし、これはSWELLの初期設定や目次プラグインの設定によって異なる場合があります。
「思っていた見出しが目次に出ない」「逆に出したくない見出しが出てしまう」と感じた場合は、見出しレベルと目次設定の両方を確認することが大切です。
見出しタグと目次に表示する階層の設定方法
目次の表示設定では、見出しタグ「h2・h3・h4・h5」の中から、どの階層まで目次に表示するかを設定できます。デフォルトでは「h3」までが表示対象です。
詳しくは以下の記事をご覧ください。
あわせて読みたい
SWELLで目次をカスタマイズする方法｜基本設定・デザイン・CSSでおしゃれに仕上げよう！
SWELLの目次機能をもっと使いこなそう！基本設定からデザイン調整、CSSでのおしゃれなカスタマイズ方法までやさしく解説します。
目次が長くなってしまうよくある原因
目次が必要以上に長くなってしまう原因の多くは、見た目を整える目的で見出しタグを使っていることです。
たとえば…
- 注意書きや補足説明を見出しタグで書いている
- 区切り線代わりに見出しを使っている
- 見出しとして扱う必要のない文章にHタグを使っている
こうした場合、目次に不要な項目まで表示されてしまいます。
このあと解説する「目次に表示させない見出しの作り方」を理解しておくことで、目次をスッキリ保ったまま、見た目も整えることができるようになります。
SWELLで目次に表示させない見出しを作る方法
SWELLでは、見出しタグを使う限り、基本的にその見出しは目次に表示されます。
そのため「目次に出したくない見出し」がある場合は、見出しタグを使わない工夫が必要になります。
ここでは、初心者の方でも使いやすい方法から、少し応用的な方法まで順番に紹介します。
方法① 見出しタグを使わずに見出し風にする（初心者向け）
もっともシンプルでおすすめなのが、Hタグを使わずに、見出し“風”の表現を作る方法です。
たとえば次のようなケースでは、見出しタグを使う必要はありません。
- 注意書き
- 補足説明
- 章の中のちょっとした区切り
この場合は、以下のような代替手段が使えます。
- 太字（ボールド）
- 装飾ブロック
- ボックス・ラベル系ブロック
見た目は見出しでも、HTML上は本文扱いになるため、目次には表示されず、構造も崩れません。
方法② HTMLを使って目次に表示されない見出しを作る
もう少し細かく調整したい場合は、HTMLを使って、見出し風のデザインを自作する方法もあります。
たとえば、div や span を使って見た目だけを見出し風にする方法です。
ただしこの方法は…
- HTMLに慣れていないと管理が大変
- テーマやCSS変更の影響を受けやすい
といったデメリットがあります。
「目次に出さない」こと自体が目的であれば、無理にHTMLを使う必要はありません。
方法③ SWELLの装飾機能を使って見出しを代用する
SWELLには、見出し以外にも使いやすい装飾機能が用意されています。
たとえば…
- ラベル風の装飾
- ボックス・囲み枠
- セクション区切り用のブロック
これらを使えば、見出しタグを使わなくても視覚的な区切りを作れます。
見た目と構造を分けて考えることで、「目次はスッキリ、本文は読みやすい」状態を保てます。
【応用】見出しを目次に出さず、見た目だけ強調するテクニック
「ここは見出しっぽく見せたいけど、目次には出したくない」
そんなときに役立つのが、見た目と構造を分けて考えるという考え方です。
見出しタグは使わず、本文扱いのまま視覚的な区切りを作ることで、目次をスッキリさせつつ、読みやすさも保てます。
目次に表示させない方がよい場面とは？
このテクニックが向いているのは、次のような場面です。
- 注意点や補足を目立たせたいとき
- 手順の途中で話題を軽く区切りたいとき
- 章の最後にまとめや補足を入れたいとき
これらをすべて見出しタグにしてしまうと、目次が細かくなりすぎてしまいます。
見出し風デザインにおすすめの表現方法
具体的には、次のような方法が使えます。
- 太字＋改行で小見出し風にする
- SWELLのボックス・ラベルブロックを使う
- 背景色付きの囲みで視線を集める
見た目は「見出し」、HTML上は「本文」なので、目次には影響しません。
やりすぎるとSEOに悪影響になるケース
注意したいのは、本来見出しとして使うべき場所まで本文扱いにしてしまうことです。
たとえば…
- 記事の主要な話題
- 内容が大きく切り替わるポイント
こうした部分は、きちんとH2やH3を使った方が、検索エンジンにも読者にも伝わりやすくなります。
あくまで「目次に出したくない補助的な要素だけ」 に使うようにしましょう。
【応用】見出しの一部を目次に表示させない方法
SWELLの装飾機能にある「注釈」を使えば、見出しの一部を目次に表示させずに表現できます。
注釈は文字が小さく表示されるので、目次に表示させない見出しの補足やキャッチコピーに適しています。
この表現には複数のバリエーションがあるので、順番に解説していきます。
基本操作手順
見出しの一部を目次に表示させない
まず、目次に表示させたくない見出しを確認します。
目次を見ながら、見出しが長くなっている部分を選択してください。
このサンプルでは、3項目目にある「目次に表示されないテキスト目次に表示されるテキスト」というH2見出しの一部を非表示にします。
対象のH2見出しを選択し、上部に表示されるブロックツールバーから設定します。
- 非表示にしたい部分『目次に表示されないテキスト（青色部分）』を選択します。
- ブロックツールバーの「SWELL装飾」をクリックします。
- 表示されたドロップダウンメニューから『注釈』を選択します。
このサンプルでは、見出しを2行に分けて表示し、見た目を整えます。（※ 任意の参考例です）
注釈と標準テキストの境目にカーソルを置き、『Shift + 改行』を押します。
これで、注釈を上・通常テキストを下にした2段のH2見出しが完成です。
SWELLで見出しの一部を目次に表示させない設定後の見出しと、サイドバー目次を確認してみましょう。
SWELLで見出しの一部を目次に表示させない設定後のメイン目次を確認してみましょう。
見出しのスタイルを「デフォルト」ではなく「セクション用」に設定すると、前側の注釈は上の行へ、後側の注釈は下の行へ自動的に配置されます。
設定前
前側のテキストを注釈に変更
前側のテキストを注釈に変更
SWELLで見出しを目次に表示させないときの注意点
目次に表示させない見出しを作れるようになると、記事の見た目は整えやすくなります。
ただし、使い方を間違えると、逆に読みづらくなったり、SEO面で不利になることもあります。
ここでは、注意しておきたいポイントを整理しておきましょう。
見出し構造が崩れないように注意する
目次に表示させたくないからといって、本来H2やH3として使うべき部分まで見出しタグを使わなくなるのはおすすめできません。
記事の大きな流れや話題の切り替わりは、見出しタグでしっかり構造化することが前提です。
「見出しにするか迷ったら、まずはHタグを使う」そのうえで、補足的な部分だけを本文扱いにする、という考え方が安全です。
SEOを意識しすぎて不自然にならないようにする
目次やSEOを意識するあまり、キーワードを詰め込んだ見出しを大量に作ってしまうと、読者にとってはかえって読みにくくなります。
見出しは検索エンジンのためだけでなく、読者が内容を把握しやすくするためのものです。
不自然な調整はせず、「読んでいて違和感がないか」を基準に判断しましょう。
読みやすさを最優先で考える
最終的に大切なのは、目次がスッキリしているかどうかよりも、記事が読みやすいかどうかです。
- 情報を探しやすいか
- 流れが理解しやすいか
- 途中で迷わないか
これらを意識して見出しを調整すれば、自然とバランスの取れた構成になります。
SWELLの見出し・目次設定でよくある質問
ここでは、SWELLの見出しタグや目次に関して、初心者の方からよく聞かれる疑問をまとめました。
H4以下の見出しは使っても問題ない？
結論から言うと、使っても問題ありません。ただし、使いすぎには注意が必要です。
H4以下は、内容をかなり細かく分けたい場合に使う見出しです。初心者のうちは、H2とH3だけで構成できるかをまず考えましょう。
目次が見づらくなってきたと感じたら、H4以下を使いすぎていないかを見直すのがおすすめです。
記事ごとに目次を非表示にすることはできる？
はい、SWELLでは記事ごとに目次を非表示にすることが可能です。
記事下や短い記事など、そもそも目次が不要な場合は、個別に非表示設定を使うとスッキリします。
ただし、この記事で紹介している方法は「目次は表示したまま、特定の見出しだけ除外したい場合」向けです。
目的に応じて使い分けましょう。
他のWordPressテーマでも同じ方法は使える？
基本的な考え方は、他のテーマでも同じです。
- 見出しタグを使えば目次に反映される
- 見た目だけ整えたい場合はHタグを使わない
という点は共通しています。
ただし、目次の表示条件や装飾機能はテーマによって異なるため、細かい操作方法はテーマごとに確認してください。
まとめ！SWELLの見出しは「構造」と「見せ方」を分けて考えよう
SWELLで記事を書くときは、見出しタグは文章の構造を作るもの、装飾や区切りは見た目を整えるものと分けて考えることが大切です。
見出しタグ（Hタグ）を正しく使えば…
- 記事の流れが整理される
- 目次が見やすくなる
- 読者が必要な情報を探しやすくなる
といったメリットがあります。
一方で、注意書きや補足説明など、目次に表示させる必要のない部分まで見出しタグを使ってしまうと、目次が不自然に長くなってしまいます。
そんなときは、見出しタグを使わず、装飾ブロックや太字で代用することで、目次をスッキリ保ちながら読みやすさを維持できます。
迷った場合は、「これは記事の流れを作る見出しか？」「それとも見た目を整えるための区切りか？」と考えてみてください。
この判断ができるようになれば、SWELLの見出し設定で悩むことはほとんどなくなるはずです。
この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
