今回の記事は、WordPressのプラグイン “Table of Contents plus” を使用した目次デザインを独自にカスタマイズしていきます。（第２弾）
なお、下の記事で他のデザイン集を掲載してますので、ご覧下さい。
淡い緑をベースにしたデザイン（完成図）
まずは、完成図がどのような感じになるかのデモを最初にご紹介します。
下がデモになります。クリック時の動きなどもご確認ください。
DEMO
- 少し浮かせた表示にしました
- カーソルを持って行くと緑で下線が左から右に表示されます
- 数字の左側にそれぞれの見出しレベルに合わせたアイコンを表示されます
”Table of Contents plus” の設定内容
「プラグイン」→「インストール済みプラグイン」をクリックします。
「Table of Contents plus」の下にある「設定」をクリックします。
「見出しテキスト」と「階層表示」と「番号振り」をそれぞれ下のように設定してください。
標準で読み込まれるCSSファイルを対象から外すため、チェックを入れます。
「追加CSS」内にCSSを記載する（コピペ可）
「外観」→「カスタマイズ」をクリックします。
「追加CSS」をクリックすると、テキストを入力できる欄が表示されますので、そこで下の内容を追記します。
追加するCSS
#toc_container {
display: block !important;
width: 100% !important;
background: #fff;
border: 1px solid #ccc;
font-size: 100%;
box-sizing: border-box;
line-height: 1.4;
margin: 16px auto;
padding: 0em 0em;
box-shadow: 3px 3px 3px #cccccc;
}
#toc_container .toc_title:before{
font-size:24px;
font-family: "Font Awesome 5 Free";
content: '\f0ca';
font-weight: 900;
padding-right:10px;
}
#toc_container .toc_title{
font-size:24px !important;
background-color:#7fdbb6;
color:white;
text-align:center;
line-height:210%;
margin:0px;
}
#toc_container .toc_toggle a{
color:white;
padding-left:2px;
padding-right:2px;
-webkit-box-shadow: none;
}
#toc_container .toc_toggle{
font-size:16px;
}
#toc_container .toc_number{
font-weight: bold;
margin-right: 5px;
color: #5f6769;
}
#toc_container .toc_list{
padding-left:15px;
margin-top:15px;
margin-bottom:15px;
}
#toc_container .toc_list li{
list-style: none;
line-height: 1.65em;
margin:10px 0px 10px 0px;
}
#toc_container .toc_list li ul{
padding-left:20px;
}
#toc_container .toc_list li a{
color:#5f6769;
position: relative;
display: inline-block;
text-decoration:none;
-webkit-box-shadow: none;
}
#toc_container .toc_list a::after{
position: absolute;
bottom: -2px;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #7fdbb6;
transform: scale(0, 1);
transform-origin: left top;
transition: transform .3s;
box-shadow:none;
}
#toc_container .toc_list li a:hover::after {
transform: scale(1, 1);
}
#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;
}
いくつか不要かと思われるコードがあるんですが、様々なテーマに対応できるように冗長なコードを含めています。
デザインの変化【before→after】
【before】目次デザイン
【after】目次デザイン
最初に載せた完成図のような目次になりましたね。
まとめ
今回は、淡い緑をベースにして作成してみました。
カーソルを合わせた時の挙動も少し変わった動きを付けて作成してみました。
