今回の記事は、WordPressのプラグイン “Table of Contents plus” を使用した目次デザインを独自にカスタマイズしていきます。（第３弾）
なお、下の記事で他のデザイン集を掲載してますので、ご覧下さい。
ピンクをベースにした可愛いデザイン（完成図）
まずは、完成図がどのような感じになるかのデモを最初にご紹介します。
下がデモになります。クリック時の動きなどもご確認ください。
DEMO
- 目次の表示するサイズを小さめにして目立たないようにしてあります
- カーソルを持って行くと文字がピンクで表示されます
- 見出しごとに下線（実線、点線）を引いてあります
”Table of Contents plus” の設定方法
「プラグイン」→「インストール済みプラグイン」をクリックします。
「Table of Contents plus」の下にある「設定」をクリックします。
「見出しテキスト」と「階層表示」と「番号振り」をそれぞれ下のように設定してください。
標準で読み込まれるCSSファイルを対象から外すため、チェックを入れます。
「追加CSS」内にCSSを記載する
「外観」→「カスタマイズ」をクリックします。
「追加CSS」をクリックすると、テキストを入力できる欄が表示されますので、そこで下の内容を追記します。
追加するCSS
#toc_container {
display: block !important;
margin: 16px auto;
padding: 5px 10px;
}
#toc_container .toc_title{
font-size:20px;
background-color:#f76a8c;
color:white;
padding-top:2px;
padding-left:10px;
-webkit-border-radius:10px;
width:210px;
line-height: 210%;
margin: 0 0 0;
}
#toc_container .toc_title:before {
font-family: "Font Awesome 5 Free";
content: '\f0ca';
font-weight: 900;
margin-right: 10px;
margin-left:5px;
font-size:20px;
}
#toc_container .toc_toggle{
font-size:16px;
}
#toc_container .toc_toggle a{
padding-left:2px;
padding-right:2px;
color:white;
box-shadow:none;
}
#toc_container ul {
list-style: none;
margin-bottom: 0em;
padding-left:10px;
}
#toc_container ul li {
margin: 0em;
padding-right:10px;
}
#toc_container .toc_list > li > a {
border-bottom: 2px solid #f76a8c;
font-size: 16px;
font-weight:bold;
}
#toc_container ul a {
display: block;
text-decoration: none;
color: #5f6769;
font-size: 15px;
border-bottom: 1px dotted #f76a8c;
box-shadow:none;
}
#toc_container .toc_number {
font-weight: bold;
margin-right: 5px;
padding-left:5px;
color:#f76a8c;
}
#toc_container ul ul {
padding-left: 20px;
}
#toc_container li {
padding-bottom:10px;
}
#toc_container li ul{
margin-top: 10px;
margin-bottom: -5px;
}
#toc_container ul.toc_list {
padding-top: 20px;
padding-bottom: 20px;
border:1px solid #ffe3ed;
margin-top:0px;
-webkit-border-radius:10px;
}
#toc_container .toc_list li a:hover {
color:#f76a8c;
}#toc_container {
display: block !important;
margin: 16px auto;
padding: 5px 10px;
}
#toc_container .toc_title{
font-size:20px;
background-color:#f76a8c;
color:white;
padding-top:2px;
padding-left:10px;
-webkit-border-radius:10px;
width:210px;
}
#toc_container .toc_title:before {
font-family: "Font Awesome 5 Free";
content: '\f0ca';
font-weight: 900;
margin-right: 10px;
margin-left:5px;
font-size:20px;
}
#toc_container .toc_toggle{
font-size:16px;
}
#toc_container .toc_toggle a{
padding-left:2px;
padding-right:2px;
color:white;
}
#toc_container ul {
list-style: none;
margin-bottom: 0em;
padding-left:10px;
}
#toc_container ul li {
margin: 0em;
padding-right:10px;
}
#toc_container .toc_list > li > a {
border-bottom: 2px solid #f76a8c;
font-size: 16px;
font-weight:bold;
}
#toc_container ul a {
display: block;
text-decoration: none;
color: #5f6769;
font-size: 15px;
border-bottom: 1px dotted #f76a8c;
}
#toc_container .toc_number {
font-weight: bold;
margin-right: 5px;
padding-left:5px;
color:#f76a8c;
}
#toc_container ul ul {
padding-left: 20px;
}
#toc_container li {
padding-bottom:10px;
}
#toc_container li ul{
margin-bottom: -5px;
}
#toc_container ul.toc_list {
padding-top: 20px;
padding-bottom: 20px;
border:1px solid #ffe3ed;
margin-top:0px;
-webkit-border-radius:10px;
}
#toc_container .toc_list li a:hover {
color:#f76a8c;
}
いくつか不要かと思われるコードがあるんですが、様々なテーマに対応できるように冗長なコードを含めています。
デザインの変化【before→after】
【before】目次デザイン
【after】目次デザイン
最初に載せた完成図のような目次になりましたね。
まとめ
今回は、ピンクをベースにしてかわいらしいデザインで作成してみました。
もう少しクリックしたときや、カーソルをもっていったときの動きを付ける事ができたらもっとおしゃれになるかと思います。
作成してほしい内容がありましたら、コメント頂ければと思います。
