ウィジェットでのEasy Table of ContentsのCSSカスタマイズ（ツリー表示させる）

WordPressの目次自動生成プラグイン「Easy Table of Contents」について。

プラグインの設定画面にて「ツリー表示」にチェックを入れると

記事本文エリアの目次では見出しの階層を字下げや文字サイズで表現してくれるのですが

サイドバーなどで表示させようとウィジェットとして挿入すると

ツリー表示にはならず、ノペッとした目次になってしまうんですね。

そこで、ツリー表示させるためのCSSサンプルを紹介します。

コピペ用CSSサンプルはこちら

.ez-toc-widget-container .ez-toc-heading-level-2 {
  border-bottom: 1px solid #bbb; /*見出し2の仕切り線*/
  padding-top: 8px;
  padding-bottom: 8px;
}

.ez-toc-widget-container .ez-toc-heading-level-2 .ez-toc-heading-level-3,
.ez-toc-widget-container .ez-toc-heading-level-2 .ez-toc-heading-level-4 {
  padding-left: 16px; /*見出し3、4で字下げ*/
  font-size: .9em; /*文字サイズを上の見出し階層に対して90%に*/
}

.ez-toc-widget-container .ez-toc-heading-level-2 .ez-toc-heading-level-3:not(:last-child),
.ez-toc-widget-container .ez-toc-heading-level-2 .ez-toc-heading-level-4:not(:last-child) {
  margin-bottom: 8px;
}

上記をまるっと、追加CSSなどに貼り付けていただければ適用されます。

「追加CSS」に追記する場合の手順

「外観」→「カスタマイズ」

「追加CSS」

1. 欄にコピーしたCSSを貼り付けて
2. 「公開」

ご注意点

すみません。本CSSサンプルはもともと自分用にカスタマイズしたものにつき、お使いのテーマやサイトの状態によっては、うまく表示されない場合があります。

バックアップを取るなどした上でお試しいただけたらと思います。

カスタマイズご依頼のご相談は、もちろんお気軽にお問い合わせください。

ご相談・お見積りはこちらから