Table of Contents Plusの目次を中央にしてデザインをカスタマイズ

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

ワードプレス(WordPress)の目次を自動生成してくれる便利なプラグインが「Table of Contents Plus」です。

機能自体は非常に優れていますが、プラグインだけの設定では目次が左側に偏っていたり、デザインも思ったようにカスタマイズすることができないことが難点です。

そこで「スタイルシート (style.css)」を使って目次の配置を中央に変更、デザインをもっとキレイにカスタマイズしていきたいと思います。

「Table of Contents Plus」で表示した目次は、記事の目に止まる大事な機能の１つなのでユーザーの方に好印象を与えられるようなデザインを目指しましょう。

デフォルトの目次デザイン

「Table of Contents Plus」導入時の目次デザインは以下のようなものになります。

見出しタグ「h2・h3・h4」の表示になりますが、これはこれでシンプルなのでいいとは思いますが、何か物足りない感があります。

もっと自分流のものにアレンジしたいので、ここからスタイルシート (style.css)をカスタマイズしてキレイなデザインにしていきます。

まずは左に偏っている目次をCSSで中央に調整します。

目次の位置を中央揃えにする

プラグイン設定では目次が左寄せとなっていて、プラグイン側では位置を設定する項目がないので、ワードプレス管理画面から「外観」⇒『テーマの編集』をクリックします。

親テーマではなく子テーマ(Child)のstyle.cssに、以下のコードを一番下に追加します。

/*-- 目次の中央揃え --*/
#toc_container {
    margin-left: auto;
    margin-right: auto;
}

これで目次が左寄りから中央揃えに変更されました。

style.cssで目次をキレイにカスタマイズする

子テーマ(Child)のスタイルシート(style.css)を編集して目次デザインを変更していきますが、「Table of Contents Plus」にCSSコードが上書きされないように設定する必要があります。

カスタマイズ前に必要な設定

CSSカスタムを行う前にワードプレス管理画面メニューの「設定」⇒『TOC+』をクリックします。

「基本設定」内の上級者向けの欄を開いて、「CSS ファイルを除外」の項目にチェックして『設定を更新』をクリックします。

プラグインのCSSが除外され、「STINGER8」の場合は目次が以下のように変化します。

これでstyle.cssのコードが反映されるようになったので、いよいよ目次のカスタマイズを行っていきます。

style.cssで目次をデザイン

CSSコードと少し難しく感じるかもしれませんが、基本的にはコードをそのままコピー＆ペーストするだけでいいので、難しい操作は特にありません。

編集したCSSが正常に反映されない時は、ブラウザキャッシュを削除してから改めて更新してみて下さい。

ワードプレス管理画面から「外観」⇒『テーマの編集』をクリックします。

子テーマのスタイルシート(style.css)に、以下のコードをそのまま追加して下さい。

/*-- TOC+ 目次デザイン --*/
#toc_container {
	width: 80%;/*ボックスの幅*/
	background-color: #f0f8ff;/*ボックス背景色*/
	border: 3px solid #dcdcdc;/*ボックスの外枠*/
	border-radius: 1px;/*角を丸める*/
	font-size: 16px;/*目次の文字サイズ*/
	box-sizing: border-box;/*はみ出しを自動調節*/
	padding: 1em 2em 0em ;/*ボックスと項目間の余白*/
}

#toc_container .toc_title {
	text-align: center;/*タイトルを中央揃え*/
    font-size: 20px;/*タイトルの文字サイズ*/
	background-color: #f0f8ff;/*タイトルボックスの背景色*/
	border-radius: 1px;/*タイトル枠の角を丸める*/
	border: 2px solid #f0f8ff;/*タイトルボックスの外枠*/
	color: #2f4f4f;/*タイトル文字色*/
	padding: 0em;/*タイトルボックスの上下幅*/
	position: auto;/*タイトルボックスの位置*/
}

#toc_container ul {
    list-style: none;/*目次のスタイル*/
    margin-bottom: 0em;/*項目間の高さ*/
}

#toc_container ul li {
    margin: 0em;/*項目の幅*/
    padding-left: 0;
    text-indent: 0;
}

#toc_container .toc_list > li > a {
    font-weight: bold; /*見出しh2を太字に*/
	border-bottom: 3px solid #f9c;/*見出しh2の下線サイズ・色*/
	font-size: 16px;/*見出しh2の文字サイズ*/
}

#toc_container ul a {
	display: block;/*項目をブロック形式で均等に*/
	text-decoration: none;/*項目文字の下線なし*/
	color: #c09;/*項目の文字色*/
	border-bottom: 2px dotted #f9c;/*見出しh3の下線サイズ・色*/
}

#toc_container ul ul {
	padding: 1em 0 1em 1em;/*見出しh3の余白*/
}

#toc_container li {
	padding-bottom: 0.2em;/*項目下の余白*/
}

色々なCSSコードがありますが説明文の記載していますので、お好みに合わせて背景色や文字色、サイズなどをカスタマイズされるといいかと思います。

以上のコードを追加すると以下のような目次デザインになります。