Easy Table of Contentsのカスタマイズ・CSSで目次をデザインする

当サイトはアフィリエイト広告を利用しています。

→ サイトを見てみる

この記事では、目次プラグイン「Easy Table of Contents」のデザインを変更できるCSSを書きました。

コピペでも使えますし、自分で細かい調整ができるようにコードの解説もしています。

注意

以下のチェックが外れているか確認してください。

大枠のデザインはCSSを使わず、プラグインの設定でできます。

クリックで拡大

クリックで拡大

詳しくは以下で解説しています。（余計なコードを書かなくて済むように、まず設定からしっかりしておきましょう。）

Easy Table of Contentsの設定と使い方を完全解説【目次プラグイン】

Easy Table of Contentsのカスタマイズコード

「閉じるボタン」がいらない方は青字コードを削除してください。

style.css
copyする

/* スマホ用コード */
@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.css
copyする

div#ez-toc-container {
  border-width: 3px;
}

枠線を太くするとカジュアルに仕上がります。

目次の角を丸くしたい

style.css
copyする

div#ez-toc-container {
    border-radius: 5px;
}

角を丸くすると可愛く仕上がります。

目次の見出しに下線を引きたい

style.css
copyする

/* 見出し全体に下線を引く */
.ez-toc-list li a{
display: block;	
   border-bottom:1px solid #555;				
}

/* h2見出しだけ下線を太くする */
 .ez-toc-list > li > a {
   border-bottom: 2px solid #555; 
}

上記は普通の下線ですが、点線にしたりと各自調整できます。

border線の種類別ーHTML&CSSデザイン14選

目次タイトルを枠線の外側にしたい

style.css
copyする

#ez-toc-container.counter-hierarchy {	
margin-top:40px; /* コンテンツや広告と被るため目次全体の上に余白を作る */	
}

/* 目次タイトルを枠線の外に出す */
#ez-toc-container  p.ez-toc-title{
position:relative;
bottom:35px;
}

目次タイトル前にアイコンを設置したい

style.css
copyする

#ez-toc-container .ez-toc-title-container:before{
 font-family: "Font Awesome 5 Free";
 content:"\f15c";
 font-weight:400;
 color:#000;	
}

Easy Table of Contentsカスタマイズコード【まとめ】

「Easy Table of Contents」は、超使いやすい目次プラグインで気に入っているのですが、正直デフォルトのデザインはイケてないなと思います。やっぱりカスタマイズすると映えますよね。

サイドバーの目次もデザインしたい人はこちら

Easy Table of Contents・サイドバーに固定する目次用CSS

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

Easy Table of Contentsの設定と使い方を完全解説【目次プラグイン】

→ サイトを見てみる