「TOC+」を中央寄せにした時の目次がクリックできなくなる不具合を修正

いま思えば、検索結果に表示されていた目次はどうだったのかも気になりますが、ひとまず問題は解決しました。

WordPressに簡単に目次を導入することができるプラグインに、「TOC+（Table of Contents Plus）」というものがありますが、いつの時期からか、なぞの不具合（バグ？）が発生するようになりました。

シンプルに、目次がクリックできないのです。

どうも不具合はPC版クローム（Chrome）だけで発生しているようで、そのうち直ることを期待して放置していたのですが、いつまで経っても直らなかったので、私は重い腰を上げて原因の究明を開始。すると、すぐに直ったので、今回はその不具合が発生した状況や、解決した方法などをお話しします。

「TOC+」の目次がクリックできない

当記事もすぐ上に目次が表示されていると思うのですが、PCのブラウザで表示していると、この目次に表示されている見出しの、しかも一部だけがクリックできないという、シンプルで、かつ非常に面倒な不具合が以前から発生していました。

最初にこの不具合を確認したのは、比較的最近（といっても1年以内くらい）のことだったようにも思われ、最初からそうだったわけではないことから、プラグイン自体がおかしいということは考えにくい状況。

また、不具合の発生状況から、どちらかというと記事を作成している私のほうが影響を受けるようなものでもあったので、いずれ直ってくれることを期待して放置していたのですが、これがまったく直らず、不具合による影響が直撃するようなことも少なくはなかったことから、私はだんだんと腹が立ってきたのです。

そこで、この「目次をクリックすることができない」というなぞの現象の原因を突き止め、そして解決するために、私は調査を開始することにしました。

不具合の詳しい発生状況

目次のクリックができないという不具合は、下書きを確認する「プレビュー」画面で頻発していて、おそらくこれの発生率は、体感でも最低で60～70％以上、下手すると80～90％以上はあったようにも思います。

目次が増えてきたときに発生しやすくなり、たとえば見出しの数が5つあったとすると、1～3つ目あたりの前半がクリックできず（しかし後半はクリックできる）、具体的には、マウスカーソルをあてても反応しない、もしくは一瞬だけ反応してすぐにまた反応しなくなる、というのが基本的な症状でした。

下書きを確認しながら記事を作成している際に、目次の見出しからとんで確認しようとすると、クリックができなくてスクロールせざるをえない、という、なかでも記事が長くなる場合に影響を受けていたわけです。

公開した記事に関しては、記事の一発目の読み込み時に同様の不具合が発生する可能性が高く、ページを更新すると直ることが多かったものの、一発目の読み込みで不具合が発生するというのが致命的で、ユーザビリティにも大きく関わるものとなっていました。

確認できたのは、私の確認不足もあるかもしれませんが、PC版のクロームのみ。

マイクロソフトのEdgeでは正常に動作していて、もしかすると、スマホでも発生していた可能性はありますが、こちらでも確認はできず、原因は不明となっていました。

原因の調査開始！するとすぐに特定に成功

一発目の読み込みで不具合が発生し、それ以降は直ることがあるという原因から考えるに、同じページの次回以降の読み込みを早くしてくれるキャッシュ系のプラグインが影響しているか、サーバーの設定に問題があるようにも思われました。

しかし、この手の不具合は、表示のカスタマイズが原因となっていることもよくある話なので、ひとまず私は、「TOC+」の表示をいじったスタイルシート（css）を確認してみることに。

すると、「TOC+」をいじっている部分は、たったの2つだけということが判明。

1. 目次の中央寄せ
2. 文字サイズと行の高さ

あやしいのは1番目の「中央寄せ」でしょうか。「TOC+」は初期状態では左寄せで目次が表示されるので、それを真ん中に寄せることによって、なにかが起きているのかもしれません。

ということで、この真ん中寄せを解除してみると、なんと、例の不具合はあっけなく消失。原因は、目次の中央寄せにあったのです！

中央寄せの指定方法を変更したら直った

これまで「TOC+」を中央寄せにしていたコードは、以下のようになっていました。

/*Table of Contents Plusを中央に表示*/
#toc_container {
	margin: auto;
}

マージン領域（余白のようなもの）を自動で適切にすることで、ある要素（目次）が中央に表示されるというわけです。

とくにおかしなことをしていたわけではないとは思うのですが、原因はこれにあるのはもうわかっているので、ためしに以下のように、指定の方法を変更してみることにしました。

/*Table of Contents Plusを中央に表示*/
#toc_container {
	margin-left: auto;
	margin-right: auto;
}

いや、なぞですね。これでクリックができない不具合が直ったのです。

さらに謎だったのは再現ができなくなったこと

こんなに簡単なことであれば、さっさとやっておけばよかったとしか思えなかったのですが、いちおう不具合の再現性を確認しておこうと、先ほどのコードを元に戻してみると、なんと今度は、不具合が発生しなくなったのです。

これには、なぞの深さしか感じられませんでした。

私の経験上、コードにあけたスペース（半角・全角の違い）が問題を引き起こすことが以前にもあったので、もしかすると以前のコードには、無駄なスペースが入っていたのかもしれません。

同じような現象が起きている方がいらっしゃるかどうかもあやしいところですが、「TOC+」でつくった目次を中央寄せにしていることで、見出しがクリックできないときは、指定の方法を変更するか、へんなスペースが入っていないかを確認してみるといいかもしれません。

今回のまとめ

目次はプラグイン導入時から中央寄せにしていて、問題のコードもいじったのは最初だけ。それ以降はさわっていなかったので、どこかのタイミングでなにかが起き、そして不具合が発生するようになってしまったのだと思うのですが、結局ほとんどはなぞのまま終わりました。

ただ、いま思えば、コードを書き直す際に、そういえば変なスペースが入っていたような気がするので、不具合の再現ができなかったことからも、やはりスペースが問題を起こしていたのではないかと思います。

最悪直らなければ、プラグインの変更か、目次の自作を考えていたので、今回はこれでよしとしましょう。

当ブログをごらんになる際に、これまで目次がクリックできないことがあったという方には、長いことご迷惑をおかけしました。とりあえず直りました。