【WordPress】目次(TOC+)サイドバーのCSSカスタマイズ

これは当ブログでは随分前に実装しているのだが、参考になればと思い公開しておく。

事の発端はWordpressで「TOC+」という目次プラグインは定番だが、サイドバーウィジットの階層構造が分かりにくいことにある。設定でh2とh3を目次表示するようにしているが、インデントや太字といった見た目に関するカスタマイズが無いため、ただズラリと列挙された文字に困惑した方も多いのではないだろうか。

参考までに、私が利用しているテーマはひつじさんが販売している「JIN」だ。別にJINでなくてもカスタマイズは変わらないはず。

コピペ用コード全文

/*サイドバー目次*/
.toc_widget_list li{
	font-weight: bold;
	padding: 0.2em;
}
.toc_widget_list li ul a::before{	
	content: "\25B6";
}
.toc_widget ul {
	max-height: 30em;
	overflow-y: auto;
}
.toc_widget_list li ul{		
	margin-left: 1.0em;
	max-height: 1000px;
	font-size: 0.9em;
}
.toc_widget_list li ul li a {
	font-size: 1em;
	font-weight: normal;
}

さらなる簡単なカスタマイズの解説

第二階層の先頭アイコン

.toc_widget_list li ul a::before{	
	content: "\25B6";
}

下階層の先頭に付くアイコンの表示。「content: “\25B6“;」の参照元を変更することでアイコンの変更が可能。リンク先はアドレスでなく、”〇”や”－”でも可。アイコンを非表示にする場合は下記文を削除し、「.toc_widget_list li ul」クラスの中にある「text-indent:-1.0em;」も削除する。

ウィジットの最大height

.toc_widget ul {
	max-height: 30em;
	overflow-y: auto;
}

ウィジットの最大高さ(Height)を指定しているのは「max-height: 30em;」。目次がこの高さを超えると自動的にスクロールバーが出現するようになっている。ウィジットの大きさを変更する場合はこの値を変更する。

第一階層を太字にしない

.toc_widget_list li{
	padding: 0.2em;
}
.toc_widget_list li ul li a {
	font-size: 1em;
}

「font-weight: bold;」を削除した後、「.toc_widget_list li ul li a」クラスの「font-weight: normal;」も削除。