どうも”TL”です。
今回の記事は、WordPressのプラグイン “Table of Contents plus” を使用して目次を作成し、その目次をシンプルでかつおしゃれにカスタマイズする方法を紹介します。
なお、下の記事で他のデザイン集を掲載してますので、ご覧下さい。
シンプルでシックなデザイン（完成図）
まずは、完成図がどのような感じになるかのデモを最初にご紹介します。
下がデモになります。クリック時の動きなどもご確認ください。
DEMO
- 原色を使用せず、全体的に白黒でまとめました
- カーソルを持って行くと文字色が灰色に変更されます
- 数字の左側にそれぞれの見出しレベルに合わせたアイコンを表示されます
“Table of Contents plus” の設定方法
「プラグイン」→「インストール済みプラグイン」をクリックします。
「Table of Contents plus」の下にある「設定」をクリックします。
「見出しテキスト」と「階層表示」と「番号振り」をそれぞれ下のように設定してください。
標準で読み込まれるCSSファイルを対象から外すため、チェックを入れます。
デザインの変化【before→after】
【before】目次デザイン
「Table of Contents plus」の設定だけした状態では、下のような見た目になります。
WordPressのテーマによっては、自動で目次のデザインが変更されるものもありますが、今回はCSSをカスタマイズして自力でデザインを変更していきます。
【after】目次デザイン
なるべくシンプルになるようシックな色合いでデザインを考えてみました。
次に、カスタマイズするためのCSSコードを紹介していきます。
「追加CSS」内にCSSを記載する（コピペ可）
「外観」→「カスタマイズ」をクリックします。
「追加CSS」をクリックすると、テキストを入力できる欄が表示されますので、そこで下の内容を追記します。
追加するCSS
#toc_container {
display: block !important;
width: 100%;
border: 1px solid #ccc;
background: #f9f9f9;
font-size: 100%;
box-sizing: border-box;
line-height: 1.4;
margin: 16px auto;
padding: 1em 2em;
}
#toc_container .toc_title:before{
font-size:21px;
font-family: "Font Awesome 5 Free";
content: '\f46d';
font-weight: 900;
padding-right:9px;
}
#toc_container .toc_title{
font-size:20px;
text-align:center;
font-weight:bold;
}
#toc_container .toc_toggle{
font-size:16px;
}
#toc_container .toc_toggle a{
padding-left:2px;
padding-right:2px;
color:black;
text-decoration:none;
box-shadow:none;
}
#toc_container .toc_toggle a:hover {
color:#bbbbbb;
}
#toc_container .toc_number {
font-weight: bold;
margin-right: 5px;
color: #bbbbbb;
}
#toc_container .toc_depth_1:before{
font-family: "Font Awesome 5 Free";
content: '\f105';
font-weight: 900;
margin-right: 5px;
}
#toc_container .toc_depth_2:before{
font-family: "Font Awesome 5 Free";
content: '\f101';
font-weight: 900;
margin-right: 5px;
}
#toc_container .toc_depth_3:before{
font-family: "Font Awesome 5 Free";
content: '\f0da';
font-weight: 900;
margin-right: 5px;
}
#toc_container .toc_list{
padding-left:0px;
}
#toc_container ul.toc_list{
margin-top:5px;
margin-bottom:10px;
}
#toc_container .toc_list ul{
padding-left:20px;
}
#toc_container .toc_list li{
list-style: none;
line-height: 1.65em;
margin:10px 0px 10px 0px;
}
#toc_container .toc_list li a{
color:#1b262c;
font-size:16px;
box-shadow:none;
}
#toc_container .toc_list li a:hover {
color:#bbbbbb;
}
CSSに詳しい方は、この内容を元に好みに合わせてカスタマイズしてください。
まとめ
目次の自動生成プラグインを見つけて、すごく便利だと思っていましたが、目次デザインを思うように変更できなくて、試行錯誤しながら、CSSを作成しました。
シンプルなデザインで、どのサイトデザインにもマッチしやすいように考えました。
良かったらこのデザインで使用してみてください。
