プラグイン情報
| プラグイン名 | Easy Table of Contents |
|---|---|
| 動作環境 | ワードプレスバージョン：5.3以降 PHPバージョン：5.6.20以降 |
| 詳細・ダウンロード | https://ja.wordpress.org/plugins/easy-table-of-contents/ |
1. カスタマイズの前にやっておくこと その１：「Easy Table of Contents」の設定の確認
カスタマイズを無駄なく行う（相殺するcssの記述をできるだけ減らす）ため、以下の設定にしておく。
- 設定「目次」 > 外観 > Theme Options（㉓ テーマ）>『カスタム』を選択。
- 設定「目次」 > 外観 > カスタムテーマ（㉔ 背景色／㉕ 枠線色／㉖ タイトル色／㉗ リンク色／㉘ ホバー時のリンク色／㉙ 訪問済みリンク色）を好きな色に設定。
※本来であれば、プラグインのcssの相殺を行わないで済むように
設定「高度」 > 外観 > ㉞ CSS > をONにして、『プラグインのCSSの読み込みを無効』にしたいところだけど……。諸事情あってこれができないので……。
↓詳しくはこの記事にて↓
2. カスタマイズの前にやっておくこと その2：「Easy Table of Contents」の目次のHTML・CSSの確認
目次のHTML
<div id="ez-toc-container" class="ez-toc-v2_0_45 counter-hierarchy ez-toc-counter ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title">目次</p>
<span class="ez-toc-title-toggle"></span>
</div>
<nav>
<ul class='ez-toc-list ez-toc-list-level-1 ' >
<li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#1_1. 見出し01" title="1. 見出し01">1. 見出し01</a></li>
<li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#2_2. 見出し02" title="2. 見出し02">2. 見出し02</a></li>
<li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-3" href="#3_3. 見出し03" title="3. 見出し03">3. 見出し03</a>
<ul class='ez-toc-list-level-3'>
<li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-4" href="#3-1. 小見出し01" title="3-1. 小見">3-1. 小見出し01</a></li>
<li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-5" href="#3-2. 小見出し02" title="3-2. 小見出し02">3-2. 小見出し02</a></li>
<li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-6" href="#3-3. 小見出し03" title="3-3. 小見出し03">3-3. 小見出し03</a></li>
</ul></li>
</ul>
</nav>
</div>目次のCSS
div#ez-toc-container p.ez-toc-title {font-size: 18px;}
div#ez-toc-container p.ez-toc-title {font-weight: 400;}
div#ez-toc-container ul li {font-size: 16px;}
div#ez-toc-container nav ul ul li ul li {font-size: 16px!important;}
div#ez-toc-container {background: #fff;border: 1px solid #ffffff;width: 100%;}
div#ez-toc-container p.ez-toc-title {color: #3333333;}
div#ez-toc-container ul.ez-toc-list a {color: #82b72d;}
div#ez-toc-container ul.ez-toc-list a:hover {color: #6b9724;}
div#ez-toc-container ul.ez-toc-list a:visited {color: #82b72d;}3. いざ！カスタマイズ
と意気込んでみたものの、「目次であることを分かりやすくする」「詰まり気味だった行間を広げる」「角丸をとってシャープにする」とやりたいことはこの３点だったため、簡単なカスタマイズで終了。
↓カスタマイズした目次でデザインはこちら↓
上書きCSS
この記述を子テーマのstyle.cssに追加して作業終了。
div#ez-toc-container { padding: 20px; border-radius: 0;}
.ez-toc-title-container { display: flex; align-items: center; height: 34px; margin-bottom: 20px; padding: 0 10px; background: #e6f1d5; border-radius: 4px;}
div#ez-toc-container nav ul li { line-height: 1.8;}
div#ez-toc-container nav ul li a { font-weight: bold;}
div#ez-toc-container nav ul li ul li a { font-weight: normal;}