“Table of Contents plus” を超簡単カスタマイズ（可愛くガーリーに）

今回の記事は、WordPressのプラグイン “Table of Contents plus” を使用した目次デザインを独自にカスタマイズしていきます。（第３弾）

なお、下の記事で他のデザイン集を掲載してますので、ご覧下さい。

目次デザイン例（まとめ）

目次デザイン例シックでシンプルな白黒デザインクールでシンプルな緑デザイン可愛くガーリーなピンクデザインおしゃれでポップな淡い青デザインカジュ […]

記事の目次

1 ピンクをベースにした可愛いデザイン（完成図）
2 まとめ

ピンクをベースにした可愛いデザイン（完成図）

まずは、完成図がどのような感じになるかのデモを最初にご紹介します。

下がデモになります。クリック時の動きなどもご確認ください。

DEMO

Contents [hide]

1 デザイン完成（サンプル）
2 まとめ
- 2.1 当デザインの注意点
- 2.2 今後の作成デザイン

目次の表示するサイズを小さめにして目立たないようにしてあります
カーソルを持って行くと文字がピンクで表示されます
見出しごとに下線（実線、点線）を引いてあります

”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;
}

いくつか不要かと思われるコードがあるんですが、様々なテーマに対応できるように冗長なコードを含めています。