SWELLの目次は、プラグインを入れなくても標準機能だけで設置・カスタマイズできます。結論、「SWELL設定」から表示する見出しレベルやデザインを調整するだけ。よくある「目次が表示されない」という悩みも、原因はだいたい決まっています。この記事で設定からトラブル対処まで一気に解決します。
ブログ歴6年・SWELL歴5年の僕が、目次の表示設定・デザイン変更・表示されない時の対処を、つまずきポイント込みで解説します。
- 目次の表示設定（出す見出しレベル・表示位置）
- 目次のデザインを変える方法
- 「目次が表示されない」時の原因と対処
目次プラグインを入れている人は、まず外しましょう。SWELLの目次と二重になって表示が崩れる原因になります。
目次
SWELLの目次は標準機能｜プラグインは不要
SWELLには目次の自動生成機能が最初から入っています。記事内の見出し（h2・h3など）を読み取って、自動で目次を作ってくれます。「Table of Contents Plus」などの目次プラグインは不要どころか、二重表示や競合の原因になるので入れないでください。
どのプラグインを入れる・入れないかは、プラグイン記事にまとめています。
目次の表示設定（出す見出し・位置・タイトル）
目次の設定は、管理画面の「SWELL設定」→「目次」タブから行います。主な設定項目は次のとおりです。
- 目次を表示する最低の見出し数：見出しがこの数未満だと目次は出ません
- 目次に含める見出しレベル：h2まで／h3まで など
- 表示位置：最初の見出しの前に自動表示するなど
- 目次のタイトル：「目次」「もくじ」「Contents」など自由に変更可
- 開閉ボタン：最初から閉じておく／開いておく
管理画面の「SWELL設定」→「目次」タブを開きます。
目次に含めるのをh3までにするか、表示する最低見出し数をいくつにするかを設定します。
目次のタイトルや開閉の初期状態を決めて保存。記事を開いて表示を確認します。
画像挿入：SWELL設定の目次タブのスクリーンショット
目次のデザインを変える
目次の色や見た目は、サイトのメインカラーに自動でなじむようになっています。さらに細かく変えたい場合は、「外観」→「カスタマイズ」→「追加CSS」で調整します。たとえば目次の枠線や背景色を変えるなら、次のように書きます（色は自分のサイトに合わせて変更してください）。
/* 目次の枠と背景を変える例 */ .swell-toc { border: 2px solid #4c93e3; background: #f7fbff; border-radius: 6px; }見出しと目次の色をそろえると統一感が出ます。見出しデザインのカスタマイズはこちらにまとめています。
目次が表示されない時の原因と対処
「目次が出ない」という相談はとても多いですが、原因はだいたい次のどれかです。上から順に確認してください。
| 原因 | 対処 |
|---|---|
| 見出し数が「最低表示数」未満 | SWELL設定の最低見出し数を下げる、または見出しを増やす |
| 見出しが「段落の太字」になっている | ブロックを「見出し（h2/h3）」に変更する |
| 記事ごとに目次を非表示にしている | 投稿編集画面の目次設定を確認する |
| 目次プラグインと競合している | 目次プラグインを停止・削除する |
| キャッシュが残っている | ブラウザとSWELLのキャッシュをクリアする |
一番多いのは「見出しに見えるけど、実は段落の太字」パターンです。目次は正式な見出しブロック（h2・h3）しか拾わないので、ここを直すだけで解決することが多いです。
特定の記事だけ目次を消したいとき
全体では目次を出しつつ、特定の記事（お知らせやLPなど）だけ非表示にもできます。投稿の編集画面にある目次の表示設定をオフにするだけです。記事ごとに切り替えられるので、用途に合わせて使い分けましょう。
ランディングページや問い合わせページは、目次があると邪魔になりがち。こういうページだけオフにすると読みやすくなります。
よくある質問（FAQ）
- SWELLの目次に目次プラグインは必要ですか？
不要です。SWELL標準の目次機能で十分です。むしろ目次プラグインを併用すると二重表示や競合が起きるので、入れないでください。
- 目次に表示する見出しはどこまでがおすすめですか？
記事の長さによりますが、h3までにすると全体像がつかみやすくなります。h4以降まで入れると目次が長くなりすぎるので、h2〜h3を目安にしましょう。
- 目次を最初から閉じた状態にできますか？
できます。SWELL設定の目次タブで、開閉ボタンの初期状態を「閉じる」に設定すれば、読者がタップしたときだけ開く形になります。
まとめ：目次はSWELL設定だけで完結する
SWELLの目次は、標準機能だけで設置・カスタマイズが完結します。プラグインは不要で、表示レベル・タイトル・開閉を「SWELL設定」で調整するだけ。表示されない時は「見出しが正式なh2・h3になっているか」をまず確認すれば、ほとんど解決します。他のカスタマイズも、使い方ガイドの早見表から逆引きで進められます。
これからSWELLを導入する方へ。目次のように、他テーマではプラグインが必要だった機能が標準で揃っているのがSWELLの強みです。買い切りで複数サイトに使えます。
