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

2017-03-192020-05-08Web制作

WordPressで便利なプラグイン、Table of Contents Plus。

インストールして有効化するだけで、自動的に記事内の目次を生成してくれます。

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

組み合わせて使ってみてください。

Contents

1. Table of Contents PlusをCSSでカスタマイズする前に行うこと
2. Table of Contents Plusのためのパーツデザイン（カスタマイズCSS）
3. おまけ：当ブログで使用しているTable of Contents Plusデザイン

Table of Contents PlusをCSSでカスタマイズする前に行うこと

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

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

Table of Contents Plusのためのパーツデザイン（カスタマイズCSS）

目次全体をボーダーで囲む

基本形です。

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

CSS

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

目次全体のボーダーのスタイルを変更する

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

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

CSS

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

目次全体のボーダーの角を丸める

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

CSS

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

線と目次との余白を広げる

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

CSS

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

目次全体に影をつける

CSS

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

目次のリンク色を変更

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

CSS

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

#toc_container a {
	color: #c60019;
}

目次タイトルを中央配置

CSS

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

.toc_title {
	text-align: center;
}

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

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

CSS

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

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

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

目次タイトルに下線をつける

CSS

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

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

目次タイトルの文字色を変更

CSS

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

.toc_title {
	color: #c60019;
}

.toc_toggle {
	color: #019c96;
}

見出しリストの余白を調整

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

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

CSS

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

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

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

見出しリストマークを削除

CSS

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

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

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

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

アイコンフォントは、Font Awesomeを使用してます。

CocoonやLuxeritasをお使いの方はテーマ側で設定しているので、このCSSをコピペするだけで問題なく使用できます。

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

参考Font Awesome Icons

CSS

#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で非表示にしてます。

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

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

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

CSS

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

目次を中央に配置する

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

CSS

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

おまけ：当ブログで使用しているTable of Contents Plusデザイン

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

CSS

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

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

CSS,WordPress,カスタマイズ,プラグイン

独身貴族？そんなに優雅じゃない！独身戸建て住まいで大変なこと

絵が下手！プリンタもない！それでもオシャレにラベリングする方法

コメント一覧

chanより:
2017-06-15 15:27
とみーさん、はじめまして。
フラワー以外のスキンをダウンロードしようとしてたら、他の記事も面白くて見入ってしまいました。
ここの目次の記事なんですけど、目次の字の色を変えるのは、CSSをどういじったら良いでしょうか?
コピーさせて貰ったのは、リストマークをアイコンフォントに変更のcssなんですが、
Font Awesomeの説明サイトは、少しだけ見て静かに閉じました^^;　　せめて文字だけ色を変えれればと思います。
tommyより:
2017-06-17 15:50
chanさん、初めまして。コメントありがとうございます。
目次の色の字を変更するサンプルを追記してみましたが、お分かりいただけますでしょうか？
（リンク色を変更　or　タイトルの文字色を変更）
それともアイコンフォントの色を変えたいというお話でしょうか。
それでしたら、color: #aaa;の箇所を変更すればOKです。
chanより:
2017-06-20 11:37
tommyさん、回答ありがとうございます!
よくよくみると「おまけ」というのがあって、それが一番良いなと思って使わせて貰ってます。
とても、かわいいですね。
folwer-popも使わせて貰ってます。
ただ、子テーマのstyle.cssの見出しとダブってしまってます。
わいひらさんからは、
.article h2::beforeや.article h2::afterもきちんと上書きされて、以前の設定がキャンセルされるようにで書く必要があるかと思います。
と、回答を貰っているのですが、使い方が良く分ってないです。
もう少し勉強してみます! 為になる記事ありがとうございます!
tommyより:
2017-06-21 19:32
chanさん
おまけは最近追加しました。笑
可愛いとコメントいただけてとても嬉しいです！
chanさんのブログに適用させますとアイキャッチ画像との間が詰まってしまいますので
div#toc_containerの中にmargin-top: 〇px;（〇は任意の数字）を追加しますとより良くなると思いますよ！
chanより:
2017-06-24 14:18
tommeさん、500回くらい読んで、ようやく意味がわかりました^^;
アイキャッチ画像との隙間のことなんですね。
1pxずつ、増やしていたら、全然かわらなくて(@_@)
20pxにして、ようやく離れてくれました。
大変ありがとうございます!
見出しのダブりの件も、なんとか自分なりの方法でクリアーしましたが、やり方があっているのかは??? です。
子テーマのstyle.cssの見出しはコメントにして、カスタマイザーで指定したスキンのstyle.cssに子テーマの見出しを書きました。
こうすることで、スキン使用時には、各作者さんの作成してくれた見出しを使用。
それ以外は、自分の作成した見出しの利用となりました。
また、可愛らしいスキン期待してますヽ(^o^)丿
tommyより:
2017-06-25 22:24
chanさん
分かりづらい説明書いてしまってすみません (´；ω；`)
無事解決できたようで何よりです。
新しいスキンも少しずつ作成中ですので、気長～にお待ちください！笑
くりのんより:
2018-02-02 14:25
とみーさん、はじめまして。
くりのんと申します。
CSSを参考にさせていただいています。とても可愛くて気に入っています。
Luxeritasの目次にこちらのサイトで現在おつかいのCSSを適用したいと思い、自分なりにいろいろ頑張ってみたのですが、どうしても○数字の部分がうまくいきません。
おまけにあるCSSをまるっとコピーして子テーマCSSに貼り付けると、中見出しの部分にも数字のないただの○がかかってしまいます。
Luxeritas見出しはTOCと違ってテーマカスタマイズに「数字消す」がないため、自分で調べて
数字をけすことには成功しました。
あとは先頭部分にのみ○数字がつけば！なのですが……。
tommyより:
2018-02-04 18:19
くりのんさん、初めまして。
お問い合わせの件ですが、
ul.toc_list li ul.toc_list li:before { content: none; }
でいかがでしょうか？
きちんとテストしてないので、これで見出し3以降の〇が消えればいいのですが・・・！
くりのんより:
2018-02-05 17:48
とみーさん、返信ありがとうございます。
今はちょっと時間がないので、時間ができたらためしてみようと思います。