アレアレ

お役立ち情報、お悩み解決情報を発信!

WordPress

Table of Contents Plusの目次に余計な点が表示される場合の対応方法

Table of Contents Plusの目次に余計な点が表示される場合の対応方法

今回は、Wordpressでブログ運営している方のうち、これから、プラグインのTable of Contents Plusを利用する人に伝えたい情報です。

テーマによっては余計な点が表示される

このプラグインで生成される記事の目次ですが、自分が利用するWordpressのテーマ次第では、余計な点が表示されます。次の通りです。

この問題は、使っているテーマのスタイルシートにおいて、li要素に::beforeの擬似要素を使っているために、発生しています。

その擬似要素が、このプラグインで生成した目次のリストにも反映されてしまっているというわけですね。

スタイルシートで該当する擬似要素をクリアする

従って、スタイルシートで、その擬似要素をクリアするようにしてやれば、この問題は解決します。

具体的には、Table of Contents Plusのプラグインが生成するスタイルのうち、liのbeforeの擬似要素を次のようにしてクリアします。

#toc_container li:before {content:none;}

すると、次のように、余計な点が表示されなくなります。

このプラグインが生成するスタイルシートでは、li要素にデフォルトで表示される点が、消えるように設定されています。具体的には、ulに対して、「list-style:none;」がすでに設定されているということです。

一方、擬似要素を使って、liの点を表現している場合は、その設定をしても表示されてしまいます。なので、さらに擬似要素をクリアしてやる必要があります。

Return Top