この記事では、目次プラグイン「Easy Table of Contents」のデザインを変更できるCSSを書きました。
コピペでも使えますし、自分で細かい調整ができるようにコードの解説もしています。
注意
以下のチェックが外れているか確認してください。
大枠のデザインはCSSを使わず、プラグインの設定でできます。
詳しくは以下で解説しています。(余計なコードを書かなくて済むように、まず設定からしっかりしておきましょう。)

Easy Table of Contentsのカスタマイズコード
「閉じるボタン」がいらない方は青字コード
を削除してください。
style.csscopyする/* スマホ用コード */ @media(max-width:700px) { /* 目次タイトル */ div#ez-toc-container p.ez-toc-title{ font-size:18px; /* フォントサイズ */ position:relative; /* 目次タイトルの位置決め */ left:20px; /* 目次タイトルを右側にズラす */ } /* 目次の閉じるボタンの位置 */ #ez-toc-container .ez-toc-title-toggle{ bottom:41%; left:0; } } /* 目次の枠線周りの角調整 */ #ez-toc-container{ border-radius:0; } /* 目次タイトル周りの調整 */ #ez-toc-container p.ez-toc-title{ display: block; /* 目次タイトルを固める */ text-align: center; /* 目次タイトルをセンターへ */ padding:5px; /* 目次タイトルの内側余白 */ background:#3d3d3d; /* 目次タイトルの背景色 */ } #ez-toc-container,#ez-toc-container .ez-toc-title-container{ margin:0; /* 目次タイトルと枠線の余白をなくす */ padding:0; /* 目次タイトルの背景色の位置調整 */ } /* 目次見出し内側余白を調整 */ div#ez-toc-container ul li { padding:10px 0; } /* 見出しにマウスを乗せた時のアンダーラインを消す */ #ez-toc-container ul a:hover { text-decoration: none; } /* 目次枠線内の余白を調整 */ #ez-toc-container .ez-toc-list { margin:20px 30px ; } /* 目次の閉じるボタン調整 */ .ez-toc-title-toggle{ position:absolute; bottom:45%; left:10px; } /* 目次の閉じるボタンデザイン */ .ez-toc-btn { border:none; background:#fafafa; border-radius:0; } /* 目次の閉じるボタンの下に文字を入れる */ #ez-toc-container .ez-toc-title-toggle:before{ content:"閉じる"; position:absolute; top:20px; left:6px; width:70px; font-size:12px; color:#fafafa; font-weight:normal; } /* SANGO専用・目次アイコンを消す */ #ez-toc-container .ez-toc-title-container:before{ display:none; }
最後の赤字コード
は、SANGO専用です。上記アイコンを消すためのもの。
Easy Table of Contentsのカスタマイズコードを解説
細かい調整をしたい方向けに使えそうなコードを載せておきます。
目次の枠線を太くしたい

style.csscopyするdiv#ez-toc-container { border-width: 3px; }
枠線を太くするとカジュアルに仕上がります。
目次の角を丸くしたい

style.csscopyするdiv#ez-toc-container { border-radius: 5px; }
角を丸くすると可愛く仕上がります。
目次の見出しに下線を引きたい
style.csscopyする/* 見出し全体に下線を引く */ .ez-toc-list li a{ display: block; border-bottom:1px solid #555; } /* h2見出しだけ下線を太くする */ .ez-toc-list > li > a { border-bottom: 2px solid #555; }
上記は普通の下線ですが、点線にしたりと各自調整できます。

目次タイトルを枠線の外側にしたい
style.csscopyする#ez-toc-container.counter-hierarchy { margin-top:40px; /* コンテンツや広告と被るため目次全体の上に余白を作る */ } /* 目次タイトルを枠線の外に出す */ #ez-toc-container p.ez-toc-title{ position:relative; bottom:35px; }
目次タイトル前にアイコンを設置したい
style.csscopyする#ez-toc-container .ez-toc-title-container:before{ font-family: "Font Awesome 5 Free"; content:"\f15c"; font-weight:400; color:#000; }
補足
「SANGO」を使用している方はもともとアイコンが設定されているので、そちらをお使いください。
Easy Table of Contentsカスタマイズコード【まとめ】
「Easy Table of Contents」は、超使いやすい目次プラグインで気に入っているのですが、正直デフォルトのデザインはイケてないなと思います。やっぱりカスタマイズすると映えますよね。
サイドバーの目次もデザインしたい人はこちら

目次プラグインを使いこなしたい人はこちら

※日本語が含まれていないコメントは投稿できません。(スパム対策)