(この記事は執筆中です)
WordPress最高峰の無料テーマ「Cocoon」には目次機能までついていて、とっても便利です。
ただ、どうしても記事ごとに表示範囲を変更したくなりました。「普段はH3まで表示させるけど、この記事はH2までしか表示させたくない…」という感じです。
そこで、以前から別のテーマ「Luxeritas」で使い慣れていて記事ごとの変更が可能なプラグイン「Easy Table Of Contents」をCocoonで動かしてみたのですが…カスタマイズが思うように出来なかったので、試行錯誤の結果を残します。
Cocoonの目次を切る
Cocoon標準目次機能と目次プラグインとのバッティングが生じるようなので、「Cocoon設定」「目次」で目次の表示をオフにします。
プラグインのインストール・設定
プラグインの新規追加から「Easy Table Of Contents」を検索して、インストール後有効化します。
ダッシュボード「設定」「目次」から基本的な設定をしていきますが、特に注意するのは次の2つです。
❶「ツリー表示」は見やすいのと後のカスタマイズのためにチェックを入れたままにしておきます。
❷「カウンター表示」は3つのタイプを表示して好みのものを選んで下さい。「小数点(デフォルト)」か「なし」がオススメです。ここでの選択によって後に行うCSSカスタマイズの記述が少し変わります。
基本設定が済んだら、目次がそこそこあるような記事を選んで、「Easy Table Of Contents」の目次が表示されているかを確認します。
CSSでの指定方法
表示が確認できたらカスタマイズの開始です！
Cocoon以前にLuxeritasを使用しているときは「#ez-toc-container」というIDを指定すればカスタマイズが出来ていました。
そのCSSをCocoonの子テーマにコピペして「Easy Table Of Contents」を表示させてみても、別の記述に打ち負かされていてカスタマイズが出来ませんでした。
デベロッパーツールで調べてみると、目次全体が「div=”#ez-toc-container” class=”counter-hierarchy counter-decimal”」と表示されています。「counter-hierarchy」は「ツリー表示」がオン、「counter-decimal」は「カウンター」が小数点という意味のようです。
((画像))
そこで「#ez-toc-container.counter-hierarchy.counter-decimal」と指定してみると無事にカスタマイズが出来ました♪
ちなみに最初の設定時に「カウンター」を「無し」にした場合は「#ez-toc-container.counter-hierarchy」と指定してカスタマイズを行うことになります
カスタマイズの例
位置を変える
周りの余白を変える
中の余白を変える
タイトルの位置・余白を変える
行間の広さを変える
文字の色・背景色を変える
最後まで
お読みいただきありがとうございました。
良かったら他の記事も読んでいって下さいね。