オシャレな目次に! Table of Contents PlusをCSSでデザインカスタマイズ

2017-03-19Web制作

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

こんにちは、とみーです。

WordPressで便利なプラグイン、Table of Contents Plus。
インストールして有効化するだけで自動的に記事内の目次を生成してくれます。

デフォルトでいくつかデザインが用意されていますが、もっとカスタマイズしたい! という方のためにいくつかのパーツデザインを作成しました。
組み合わせて使ってみてください。

スポンサーリンク

事前準備

WordPress管理画面の設定 → TOC+ で、上級者向け項目内にある「CSS ファイルを除外」のチェックボックスにチェックを付けます。

チェックをオンにすることでCSSが0からのスタートとなるので、この記事を参考に装飾していってください。

Table of Contents Plusのためのパーツデザイン

ボーダーで囲む

基本形です。

○pxの数字を変更すると線の太さ、#の後ろのアルファベットを変更すると色を変えることができます。

#toc_container {
	border: 1px solid #ddd;
}

ボーダーのスタイルを変更する

doubleという箇所をsolidに変えると実線、dashedにすると破線、dottedだと点線になります。

参考border-style …… ボーダーのスタイルを指定する – HTMLクイックリファレンス

#toc_container {
	border: 5px double #ddd;
}

ボーダーの角を丸める

border-radius: 〇px; の数字を大きくすると角の丸みも大きくなります。

#toc_container {
	border: 1px solid #ddd;
	border-radius: 5px;
}

余白を広げる

paddingの最初の数字で上下の余白、2番目の数字で左右の余白を指定してます。

#toc_container {
	border: 1px solid #ddd;
	padding: 10px 20px;
}

影をつける

#toc_container {
	border: 1px solid #ddd;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

リンク色を変更

目次だけリンク色を変更する場合です。

#toc_container {
	border: 1px solid #ddd;
}

#toc_container a {
	color: #c60019;
}

タイトルを中央配置

#toc_container {
	border: 1px solid #ddd;
}

.toc_title {
	text-align: center;
}

タイトルに背景色をつける

display: inline-block; を削除すると枠の端から端まで背景色がつきます。

#toc_container {
	border: 1px solid #ddd;
}

.toc_title {
	background-color: #ddd;
	display: inline-block;
}

ちなみに、目次全体に背景色をつけたい場合は、#toc_container の中に background-color: を入れればOKです。

タイトルに下線をつける

#toc_container {
	border: 1px solid #ddd;
}

.toc_title {
	border-bottom: 1px solid #ddd;
}

タイトルの文字色を変更

#toc_container {
	border: 1px solid #ddd;
}

.toc_title {
	color: #c60019;
}

.toc_toggle {
	color: #019c96;
}

リストの余白を調整

テーマによりますがリスト左側の余白が広い場合は狭めることが可能です。

ul.toc_listで大見出しの余白を、.toc_list ulで中見出しと小見出しの余白を指定してます。

#toc_container {
	border: 1px solid #ddd;
}

ul.toc_list {
	padding-left: 30px;
}

.toc_list ul {
	padding-left: 10px;
}

リストマークを削除

#toc_container {
	border: 1px solid #ddd;
}

ul.toc_list,
.toc_list ul {
	list-style: none;
}

リストマークをアイコンフォントに変更

WordPress管理画面の設定 → TOC+ で、番号振りのチェックをオフにしてます。

アイコンフォントは、Font Awesomeを使用してます。
SimplicityやLuxeritasをお使いの方はテーマ側で設定しているので、このCSSをコピペするだけで問題なく使用できます。

アイコンフォントが表示されないよ! という方は、FontAwesome 使い方 icon-external-link でググると幸せになれると思います。

参考Font Awesome Icons

#toc_container {
	border: 1px solid #ddd;
}

ul.toc_list,
.toc_list ul {
	list-style: none;
}

ul.toc_list > li:before {
	color: #aaa;
	content: '\f138';
	font-family: FontAwesome;
	margin-right: 5px;
}

.toc_list ul > li:before {
	color: #aaa;
	content: '\f105';
	font-family: FontAwesome;
	margin-right: 5px;
}

.toc_list ul ul > li:before {
	color: #aaa;
	content: '\f101';
	font-family: FontAwesome;
	margin-right: 5px;
}

リストに下線を表示

下線を引く場合、リストマークは非表示がおすすめ。(マークにまで下線が表示されないため)
CSSで非表示にしてます。

#toc_container {
	border: 1px solid #ddd;
	padding: 0px 10px;
}

ul.toc_list,
.toc_list ul {
	list-style: none;
	margin: 0px 0px 10px 0px;
	padding: 0px;
}

ul.toc_list li a {
	border-bottom: 2px solid #ddd;
	display: block;
	margin-bottom: 3px;
}

.toc_list ul li a {
	border-bottom: 1px solid #ddd;
	display: block;
	margin: 0px 0px 3px 10px;
}

.toc_list ul ul li a {
	border-bottom: 1px dashed #ddd;
	display: block;
	margin: 0px 0px 3px 20px;
}

非表示/再表示しても同じ幅にする

見出しを非表示/再表示すると、文字数に応じて幅も狭くなってしいます。それを回避して常に同じ幅で表示する指定方法です。

#toc_container {
	border: 1px solid #ddd;
	width: 100% !important;
}

見出しを中央に配置する

画像だと分かりづらいですが、左右のmarginをautoにすることによって中央に配置してます。

#toc_container {
	border: 1px solid #ddd;
	width: 90% !important;
	margin-left: auto;
	margin-right: auto;
}

おまけ

2017年6月現在、第0版で使用している目次のデザインソースコードです。

div#toc_container {
	border: 1px solid #ccc;
	border-radius: 5px;
	display: block !important;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	width: 90% !important;
}
p.toc_title {
	border-bottom: 1px dotted #ccc;
	margin-bottom: 10px;
	padding: 5px 10px;
}
#toc_container span.toc_toggle {
	font-weight: 400;
	font-size: 90%;
}
ul.toc_list {
	margin-bottom: 0;
}
.post ul.toc_list {
	counter-reset: my-counter;
	list-style: none;
	padding-left: 30px;
}
.post .toc_list ul {
	list-style: none;
	padding-left: 10px;
}
ul.toc_list >li {
	position: relative;
}
ul.toc_list >li:before {
	content: counter(my-counter);
	counter-increment: my-counter;
	background-color: #ecacb5;
	color: #fff;
	display: block;
	float: left;
	line-height: 22px;
	margin-left: -30px;
	text-align: center;
	height: 22px;
	width: 22px;
	border-radius: 50%;
}
ul.toc_list >li,
.toc_list ul > li,
.toc_list ul ul > li {
	padding: 1px 0;
}
.toc_list ul > li:before {
	color: #ecacb5;
	content: '\f105';
	font-family: FontAwesome;
	margin-right: 5px;
}
.toc_list ul ul > li:before {
	color: #ecacb5;
	content: '\f101';
	font-family: FontAwesome;
	margin-right: 5px;
}

 

他にも「ここをこうしたい!」等ありましたら、質問受け付けてます。

こちらの記事もおすすめです