Wordpress

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

記事内に商品プロモーションやアフィリエイトを含む場合があります

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

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

目次のBefore/After

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

大前提として「Table of Contents Plus」(TOC+)というWordpressの目次プラグインを入れている必要がある。そしてこのカスタマイズはプラグインのpost/pageに挿入される目次ではなく、サイドバーに表示されるウィジットの目次だ。間違えないように。

コピペ用コード全文

/*サイドバー目次*/
.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;」も削除。

ABOUT ME
ゼノン / Xenonhyx (管理人)
愛知県出身。趣味は自作PCとゲーム。 略歴:エンジニア兼マーケター→フリーライター→エンジニア

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です