ねかつちう。

お金や節約に敏感な20代30代のための物欲系雑記ブログ

Easy Table of Contentsで親階層を番号、子階層に記号を設定する方法

こんにちは、ねかぱんです。

この記事では、WordPressで人気の目次作成プラグイン「Easy Table of Contents」で、目次の階層別にリストマーカー(番号や記号)を自在に設定する方法を紹介します。

まず、Easy Table of Contents(以下EToC)で作成したデフォルトの目次をご覧ください。

野暮ったい!

f:id:nekatsu:20191027075451p:plain

こちら、プラグインの設定で、数字をローマ数字に変えたり、子階層以下の数字を小数点入りにすることもできます(リストマーカーを削除することもできます)。

しかし、ここが重要なポイントですが、EToCでは親階層と子階層に別々のリストマーカーを設定することができません。たとえば、親階層では数字(decimal)、子階層にはdisc(黒丸)というような設定ができません。

EToCの設定でリストマーカーに数字を選ぶと、上の例のように、やや野暮ったい目次になってしまうわけです。

親階層と子階層に別々のリストマーカーを設定する方法

ここでは、親階層と子階層に別々のリストマーカーを設定するための、最もシンプルなサンプルコードをご紹介します。

  1. /* 親階層・子階層ともリストマーカーにdisc(黒丸)を指定 */
  2. #ez-toc-container .ez-toc-list li {
  3. list-style-type: disc;
  4. }
  5. /* 親階層のみリストマーカーにdecimal(数字)を指定 */
  6. #ez-toc-container .ez-toc-list > li {
  7. list-style-type: decimal;
  8. }

すでにお気づきと思いますが、このサンプルコードでは、「CSSは後から書いたコードが前のコードを上書きする」という、CSSの特性を利用しています。

このように面倒なことをする理由は、EToCで出力されるHTMLコードでは、子階層の目次にクラス名が設定されていないという、CSSでカスタマイズするには致命的な問題があるためです。

こんな感じに!

f:id:nekatsu:20191027080358p:plain

というわけで以上です。

上記のコードを参考にしていただければ、リストマーカーに任意の画像を読み込んだり、FontAwesomeのアイコンを使ったりということも簡単にできます。