にほんブログ村
SWELLというブログテーマには自動で目次を配置できる機能があります。
目次専用のプラグインを追加しなくて済むので重宝して使っていますが、つい先日こんな不具合に出くわしました。
目次の中に記事本文が入っていて変なブログ記事になっている
ブログを運用し始めて初めてのケースだったためかなり混乱しました。ネットで同じ悩みを抱えている人も検索しましたが、出てきません。
keri ちびver.自分で解決するしかない・・・。
紆余曲折悩みまくりましたが、ChatGPTを使ってなんとか解決することができました。
本記事では同じ境遇で困っている人、今後遭遇するかもしれないので予習しておきたい人にとって役に立ちますことをお祈りしながら丁寧に解説していきます。
※紹介する方法は万人に効果があるわけでは無い可能性があります。あくまで私のブログでは解決しただけということをご了承ください。
H2見出しを置いたら「目次に本文が混ざる」？
症状としては、次のような状態でした。
- 目次の中に本文の1行目が入ってしまう
- 目次タイトル（「もくじ」など）が消える
- H2見出しの拾われ方が不自然になる
一見するとCSSやプラグインの干渉のように見えますが、
実際にはSWELLの目次スクリプトの構造解析が関係しています。
【原因】タイトル(H1)の直後にH2を置いたこと
結論から言うと、
原因は「記事タイトル（H1）の直後にH2見出しを置いた」ことでした。
SWELLの自動目次は、HTML構造をもとに本文開始位置を判断しています。
しかし、タイトルのすぐ下にH2見出しが来ると、
SWELLが「本文の始まり」を正しく認識できず、
本文をH2ブロックの一部として扱ってしまうことがあるのです。
【NG構成の例】
記事タイトル
見出し1
ここが本文なのに、目次に混ざってしまう！
keri ちびver.この状態だと、「目次の中に本文が入る」現象が発生します。
解決策：H1の下に1行の本文または画像を入れるだけ
この不具合は、HTML構造を整えるだけで簡単に解決できます。
具体的には、タイトルの下に1行だけでも「本文（pタグ）」を挿入してください。
OK構成の例
記事タイトル
この記事では、SWELLの目次不具合の直し方を紹介します。
見出し1
ここから本文が始まります。
または、画像を1枚配置するだけでも同様の効果があります。
これでSWELLが「本文の開始位置」を正しく認識し、
目次が正常に動作するようになります。
SWELLの「投稿ページに目次を表示」との関係
SWELLのカスタマイザー設定で「投稿ページに目次を表示」がONになっている場合、
テーマが自動で目次を挿入します。
このとき、ページ冒頭の構造が崩れていると、
自動目次が本文を巻き込むなどの不具合が発生しやすくなります。
したがって、この設定を利用している人ほど、
H1 → 本文（pタグ or 画像） → H2
という順序を守ることが重要です。
実はSWELLのアップデートでも影響があった？
SWELLはアップデートによって内部構造（ラッパー構成）が変更されることがあります。
そのため、以前は問題なかった記事でも、
最新版では目次の認識が微妙に変わるケースがあります。
もし過去の記事で突然目次が崩れた場合も、
まずはこの「H1の直下にH2を置いていないか」をチェックしてみてください。
まとめ：CSSでは直らない、構造の問題
| 項目 | 内容 |
|---|---|
| 不具合内容 | 目次に本文が混ざる／タイトルが消える |
| 主な原因 | H1直下にH2を置いた構造 |
| 解決方法 | タイトル下に本文または画像を1つ入れる |
| 関連設定 | 「投稿ページに目次を表示」ON時に発生しやすい |
| CSS対応 | 効果なし。HTML構造の調整が必 |
これからSWELLで記事を書く人へ
SWELLの目次はとても高機能ですが、「構造の正しさ」に敏感です。
再発防止のために、次のルールを意識すると安心です。
- 記事タイトルのすぐ下には導入文を1行入れる
- 自動目次と手動目次を併用しない
- 見出し階層（H2 → H3 → H4）を正しく使う
これだけで、今後の目次トラブルはほぼ防げます。
コメント