漫画・小説・ビジネス書なんでも最大100冊分が半額

Easy Table of Contents・オシャレな目次のCSSカスタマイズ

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

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

補足

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

目次のCSS設定

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

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

目次プラグインの設定方法WordPressの目次プラグイン・Easy Table of Contentsの設定と使い方

タイトルに背景色を追加する目次カスタマイズ

目次デザイン変更部分

当サイトと同じデザインです。(「閉じるボタン」がいらない方は青字コードを削除してください。

style.css
/* スマホ用コード */
@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専用です。上記アイコンを消すためのもの。

目次デザインに使えるコードを解説

細かい調整をするために、使えそうなコードを載せておきます。

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

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

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

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

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

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

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

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

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

style.css
#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・サイドバーに固定する目次用CSS

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

目次プラグインの設定方法WordPressの目次プラグイン・Easy Table of Contentsの設定と使い方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です