Table of Contents Plus プラグインで表示が崩れたときに確認するポイント

WordPressのプラグインの中でも、利用者数が多いであろう「Table of Contents Plus(TOC+)」プラグイン。
記事に自動的に目次を作成・追加してくれる便利なプラグインですが、当サイトで表示崩れが起きていたので原因と解消方法をメモ。

症状

一部の見出しにだけ以下のような表示崩れが見られたら、TOC+プラグインによるものかもしれません。

  • なんか線が入っている
  • 背景に色がついている
  • 文字の大きさが違う
  • 幅が違う …など

表示崩れの原因は、idの自動付与

TOC+プラグインでは、それぞれの見出しにIDを自動的に付与します。
各見出しに付与したIDへのリンクを目次に設置することで、目次から記事中の読みたい場所へ移動できるようになっています。

idがCSSと重複していないか確認

idが付与される、ということは、付与されたidにスタイルが設定されている場合、自動的にスタイルが適用されてしまうということです。
そのため、見出しに使用する文字列が、CSSで使用するidと重複しないように気をつける必要があります。
見出しに自動付与されているidは、ブラウザの開発者ツールなどで確認しましょう。

半角英文字から始まる見出しは注意

また、「半角英文字+日本語」の見出しの場合、先頭の半角英文字だけがidとして使用されるようです(2017/09/30現在)。

例) 見出し:「tocの使い方」 → id:「toc」

表示崩れの直し方

上記の原因であれば、原因を取り除くことで表示崩れを修正することが可能です。
大きく以下の3通りの方法が考えられます。

直し方1 見出しを変更する

見出しに使用している文字列を変えることで、付与されるidが変わるため重複がなくなります。

直し方2 CSSを修正する

idを直接指定してのスタイル設定は優れた方法とは言えません。
もしCSSを自分で作成したサイトなどであれば、修正を考慮しても良いかもしれません。

直し方3 TOC+を停止する

事情により見出しの変更ができず、CSSの修正も行えない場合、該当ページをTOCの除外ページリストに追加しましょう。
見出しの生成がなくなってしまいますが、同時にidの付与もされなくなるため、表示崩れは修正できます。

今回のように、プラグインが正常に動作していても特定の条件でテーマと競合してしまうこともあります。
導入時はもちろんですが、導入後もきちんと動作しているか、表示が正常かどうかなど欠かさずチェックしておきたいですね。