サブブログ|デスク環境構築サイト運営中

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

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

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

注意

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

目次の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線デザイン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; }
補足

「SANGO」を使用している方はもともとアイコンが設定されているので、そちらをお使いください。

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

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

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

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

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

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

コメントはお気軽にどうぞ

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