このブログはCocoonというWordPressテーマをベースにしているのですが、標準の目次(TOC)デザインがどうも今ひとつだったので、CSSでカスタマイズしました。見た目自体はシンプルに直せると思っていたのですが、実際にはCSSの詳細度(specificity)の沼にハマったので、その顛末をまとめておきます。
標準デザインの何が気になったか
Cocoon標準の目次は、シンプルな枠線とテキストだけの構成で、正直「いかにもテーマ標準」という印象が拭えませんでした。番号も飾り気のない数字がそのまま並ぶだけで、サイト全体のブランドカラー(白ベース+黒+水色アクセント)ともトーンが合っていませんでした。
やりたかったことは大きく3つです。
- カード風の見た目(角丸・薄い影)にする
- 開閉トグルの「[開く]/[閉じる]」というテキスト表示を、回転するシェブロンアイコンに差し替える
- 番号をただの数字ではなく、丸型のバッジにする
まず何が動いているか調べるところから始めた
いきなりCSSを書き始める前に、まず現状のDOM構造を確認しました。目次のブロックは<div id="toc" class="toc tnt-number toc-center border-element">のような形で、中に開閉用の<input type="checkbox">とタイトルの<label>、記事の見出しを並べた<ol>が入っている構造でした。この時点でクラス名や構造をひと通り把握しておいたおかげで、後のCSS上書き作業がかなりスムーズになりました。テーマの上書きカスタマイズをするときは、いきなり見た目から入るのではなく、まず構造を理解する方が結局早いというのは、今回改めて実感した点です。
最初のつまずき: content指定が上書きできない
開閉テキストをシェブロンアイコンに差し替えようとして、子テーマのCSSで.toc-title::afterにcontent: ""を指定したのですが、実際に表示を確認すると「[閉じる]」の文字が変な角度で表示されたまま崩れる、という現象が起きました。
原因を調べてみると、Cocoon本体側が管理画面の設定値を反映するために、動的に生成したインラインの<style>タグで.toc-checkbox:checked + .toc-title::after{ content: '[閉じる]'; }のようなルールを出力していることが分かりました。テーマ本体のCSSファイルではなく、PHPで都度生成されるインラインスタイルだったので、静的なCSSファイルをいくら読んでも気づけない仕組みになっていたのが厄介でした。
詳細度で殴って解決する
この手の「本体が動的に出しているCSSに勝てない」問題は、闇雲に!importantを使うより先に、セレクタの詳細度を上げて素直に上書きする方が事故が少ないです。今回は目次を囲む要素にid="toc"が振られていたので、子テーマのCSSをすべて#tocから書き始める形にしました。
#toc .toc-title::after {
content: "" !important;
/* シェブロン用のborderをここで指定 */
}IDセレクタはクラスセレクタより詳細度が高いため、これで確実に本体側のインラインスタイルに勝てるようになりました。contentプロパティだけは値の食い違いで文字化けのような表示になっていたので、念のため!importantも併用しています。
開閉の仕組みを壊さないよう気をつけたこと
Cocoonの目次はJavaScriptを使わず、<input type="checkbox">と<label>の組み合わせだけで開閉を実現しています。CSSだけでアコーディオンUIを作る、よく知られたテクニックです。デザインを変える際にこの構造自体は絶対に崩さないよう、見た目の変更はあくまで既存の要素(.toc-titleや.toc-content)へのスタイル追加にとどめ、要素の削除や構造変更はしませんでした。
番号バッジも、CSSカウンター(counter-reset / counter-increment)を使って実現しています。HTMLに連番を直接書き込むのではなく、CSS側で自動採番することで、見出しの追加・削除があっても数字がずれる心配がありません。
ネストした見出しの扱い
記事によってはh3などの小見出しがネストして目次に含まれることがあります。番号バッジを全階層につけると視覚的にうるさくなるため、ネストした階層だけは番号バッジを消してインデントのみにする、という調整もCSS側で行いました。
デザイン変更前に必ずやったこと
今回のような「テーマ標準コンポーネントの見た目を変える」作業は、事前にブラウザの開発者ツールで実際のDOM構造とCSSの出どころ(どのファイル・どのインラインスタイルが効いているか)を確認してから着手するのが結局一番早いと感じました。見た目だけを真似て自己流のクラスを新設するより、既存の構造・クラス名にきちんと乗っかって上書きする方が、テーマのアップデートにも強くなります。
デザイン確定までに試した案
実は最初から今の「カード+シェブロン+丸型番号バッジ」というデザインに決めていたわけではありません。番号部分は最初、単純に文字の色を変えるだけの案も試したのですが、見出しの文字列自体が長い記事だと数字が埋もれてしまい、目次としての一覧性が下がってしまいました。丸型のバッジにして背景色を敷くことで、数字だけがぱっと目に入るようになり、結果的に一覧性も良くなったと感じています。デザインは頭の中で考えるより、実際にブラウザで見比べながら決めた方が早いです。
まとめ
今回のTOCカスタマイズは、デザイン自体よりも「テーマ本体が動的に出しているCSSにどう勝つか」という部分でつまずきました。同じようにCocoonや他の高機能テーマをベースにカスタマイズしている方は、見た目が変わらないときは静的なCSSファイルだけでなく、ページのソースに直接埋め込まれているインラインスタイルも疑ってみることをおすすめします。
高機能なテーマほど、管理画面の設定を反映するために動的にCSSを生成する仕組みを持っていることが多いです。「効いているはずなのに反映されない」ときは、まずブラウザの開発者ツールでそのプロパティがどのルールから来ているかを一つずつ確認する。地味な作業ですが、結局これが一番の近道でした。
