Luxeritasの目次カスタマイズでハマる

このサイトでも利用させてもらってるWordpress無料テーマLuxeritasの目次挿入機能のカスタマイズでハマったのでメモしておきます。Luxeritasの見出しカスタマイズで不思議な現象で悩んでいる人は参考になるかもしれません。

この記事で分かること

Luxeritasの目次機能の先頭数字をCSSで消そうとしたら一部しか消えなかった

目次の行頭につく数字をレベル1だけ残して、レベル2をCSSで消そうとして以下のようなCSSを書きました。

.toc_number.toc_depth_2{display:none;}

このCSSを書いたのは、レベル1、2、3と階層毎に以下のようなルールでclassが付与されると考えたからです。

結果、実際の記事ではレベル2の数字が不規則に消えてしまう現象が起きました（上記の見出し構造とは違います）。具体的には、見出し番号1-1が消えません。見出し番号2-1が消えるという。

ページのソースを確認すると、見出し番号1-1に付与されるclassがtoc_depth_1になっていて、toc_depth_2ではありませんでした。

真面目に調べてみると、以下のようなclassの割り付けになってるようでした。

レベル2だけ、規則が違うように見えます。なぜそうなってるのかソースを見てもわかりませんでしたが、CSSで消えない理由は、レベルを2のclass名が想定と違って共通じゃないのが原因でした。レベル3もなぜかdepth_2となっていてちょっとカオス。

見出しの数だけCSSで消せば良さそうですが、それもめんどいので、以下のように全ての数字を消して、レベル1の数字を振り直すことにしました。

.toc_number{display:none;}

正直、不具合なのか仕様なのかわかりませんが、想像と違っていたのでメモしておきました。