【コピペOK】グラデ枠の目次デザインのCSS【TOC＋カスタマイズ】

こんなデザインの目次がつくれます

この記事ではワードプレスでTOC＋というプラグインを使って目次を表示させ、そのデザインを変更するやり方を解説します。初心者なのでコードが汚いのは許してください！なんでもしますから。（なんでもするとは言っていない）

[say]カスタマイズは自己責任でお願いします。（自己責任についてはBear faceさんの記事を参照）[/say]

１プラグインを導入
2CSSをコピペ
さいごに

１プラグインを導入

ダッシュボードからプラグイン＞新規追加＞Table of Contents Plusで検索＞インストールして有効にします。

[alert title=”注意”]TOCで検索して初めに出てくるプラグインではありません！Table of Contents Plusというプラグインをインストールしてください。[/alert]

有効にしたらプラグイン＞インストール済みのプラグインに行って、Table of Contents Plusの設定をします。

目次の上にタイトルを表示とプレゼンテーションをカスタムに最低限チェックをいれればOKです。

[open title=’わたしの設定’]

上級者向けの見出しレベルはH2とH3にチェックをつけています。

[/open]

2CSSをコピペ

[codebox title=”コード”]

/*TOC*/
p.toc_title {
display: none!important;
}
#toc_container {
box-shadow:none;
padding: 0px;
border:none;
background: #f1f1f136;
border-left: 2px solid #a8edea;
border-right: 2px solid #fed6e3;	
}
#toc_container:before,#toc_container:after {
content:"";
display:block;
height:2px;
width:100%;
background:-webkit-gradient(linear, left top, right bottom, from(#a8edea), to(#fed6e3));
background:-moz-linear-gradient(left, #a8edea, #fed6e3);
background:linear-gradient(left, #a8edea, #fed6e3);
}
#toc_container p.toc_title+ul.toc_list {
margin: 2em;
}
li {
font-weight: 500 !important;
}

[/codebox]

かならず外観＞カスタマイズ＞追加CSSにコピペしてください。読み込みCSSの優先順位の関係で子テーマのstylesheet.cssに書いても適用されない場合があるからです。サクッと説明すると、目次に上下左右４つに分けて線を引いて囲むCSSにしています。

左右はborder-left・border-rightで一色ずつ設定。上は#toc_container:beforeで細くしたグラデーションの背景を線として利用して、下は#toc_container:afterとして指定しました。