《Cocoon》目次のカスタマイズ方法｜参考サンプル有り

目次について

目次の役割をシンプルに説明すると、

• 記事内のページで何を解説しているのかを項目毎（リスト上）で表したもの

目次には種類がありますが、Cocoonの目次は知りたい内容の項目をクリックすることで、同一ページ内の内容の冒頭へと移動することができます。

目次があると、目的の記事へとたどり着けるスピードが速くなることから、訪問者にとっては見やすくなります。ただし、目次があることによって記事を読み終える速度も速くなることから、直帰率が増してしまうとも言われています。

ただ、目次がない記事というのは本当に少なく、多くのブロガーやサイト運営者が目次を取り入れているように思えます。もしも、訪問者目線で考えるサイトを作りたい際には目次の取り入れを検討してみてはいかがでしょうか。

ここでは、Cocoonの目次のカスタマイズ方法やサンプルを載せています。

目次の要素

目次に使われている各要素を見てみます。

まず、記事下の目次を指定する要素として、

.entry-content

目次全体として、

.entry-content #toc{
}

文字「目次」に該当するラベル、IDとして、

.entry-content .toc-title{
}

リスト全体として、

.entry-content #toc .toc-list{
}

リスト全体《ol》の各《li》要素として、

.entry-content #toc .toc-list li{
/*大見出し*/
}

リスト全体《ol》の各《a》要素として、

.entry-content #toc .toc-list a{
}

その《a》要素の一つにクリックを乗せた処理として、

.entry-content #toc .toc-list a:hover{
}

全体のリストを更に内部のリストに迫る方法として、

.entry-content #toc .toc-list li {
/*大見出し*/
}

その内部のリストの《a》要素に対する処理として、

.entry-content #toc .toc-list li ol li a{
}

中見出し、小見出し、極小見出し、超極小見出しに対する処理として、

.entry-content #toc .toc-list li ol li {
/*中見出し*/
}
.entry-content #toc .toc-list li ol li ol li {
/*小見出し*/
}
.entry-content #toc .toc-list li ol li ol li ol li {
/*極小見出し*/
}
.entry-content #toc .toc-list li ol li ol li ol li ol li {
/*超極小見出し*/
}

見出し内の各《a》要素を指定する場合は、

.entry-content #toc .toc-list li ol li a {
/*中見出し*/
}
.entry-content #toc .toc-list li ol li ol li a {
/*小見出し*/
}
.entry-content #toc .toc-list li ol li ol li ol li a {
/*極小見出し*/
}
.entry-content #toc .toc-list li ol li ol li ol li ol li a {
/*超極小見出し*/
}

こんな感じだと思います。

Font Awesome 5 を使用する場合（Webフォント）

見出し前にWebアイコンを使用する場合はCocoonの設定を少し変える必要があります。

もちろん、Font Awesome 4のアイコンを利用される場合はそのままでも構いません。

Font Awesome 5の手順に従い、Webアイコンを利用される場合はFont Awesome 5へと切り替える必要があります。

以下のリンクで詳しく解説しています。

《Cocoon》Font Awesome 5 の変更手順【初心者向け】

Font AwesomeとはFont Awesomeは、予めWebアイコンとして設定されたアイコンをアイコンフォント（文字）として利用できるようにした一種のツールです。ハートマーク、丸型、箱型といった基本的なアイコンから、初心者マーク、猫、...

zeroga.com

2022.04.04

Cocoonの目次（デフォルト）

Cocoonの目次（デフォルト）は以下の通り。

分かりやすくてシンプルなデザインです。

このままでも素敵ですが、カスタマイズされたい方もいると思うので以下にカスタマイズサンプルを載せてみました。もし宜しければ参考にして頂ければと思います。

サンプル「大サイズ目次・順小」

一つ目のサンプル例は「大サイズ目次・順小」

実際に表示させてみると以下の画像のようになります。

文字を大きくし、よりハッキリと目次を伝えるために横幅を枠いっぱいに広げています。

また、見出し毎に文字を小さくしています。見出し毎のバランスが取れており、シンプル好きには良いと思います。

.entry-content #toc{
	width:100%;
}
.entry-content #toc .toc-list{
	margin-left:30px;
}
.entry-content #toc .toc-list li{
	font-size:20px;
}
.entry-content #toc .toc-list li ol li{
	font-size:18px;
}
.entry-content #toc .toc-list li ol li ol li{
	font-size:16px;
}
.entry-content #toc .toc-list li ol li ol li ol li{
	font-size:14px;
}
.entry-content #toc .toc-list li ol li ol li ol li ol li{
	font-size:12px;
}

サンプル「アンダーライン目次」

二つ目のサンプル例は「アンダーライン目次」

実際に表示させてみると以下の画像のようになります。

文字サイズを統一し、点線を表示させています。また、枠内を寄せて調整しました。

ごちゃごちゃせず、ハッキリと文字を見せることができるので、またまた良い感じです。

.entry-content #toc{
	width:100%;
	font-size:18px;
}
.entry-content #toc .toc-list{
	margin-left:30px;
	margin-right:50px;
}
.entry-content #toc .toc-list a{
	border-bottom:1px dashed #DCDCDC;
	display:block;
}
.entry-content #toc .toc-list a:hover{
	text-decoration: none;
}

スマホにも適応させるため、以下のソースコードを指定の箇所に追加してください。

@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
	.entry-content #toc .toc-list{
		margin-left:0px;
		margin-right:0px;
	}
}

サンプル「ホバー灰色・目次」

三つ目のサンプル例は「ホバー灰色・目次」

実際に表示させてみると以下の画像のようになります。

マウスを項目に重ねるとその項目に背景が出現します。

最前列の目次にはホバー時の色と合わせています。その他、サイズの変更、また、ホバー時に背景が目立つように間隔を調整しています。

.entry-content #toc{
	width:100%;
	font-size:18px;
}
.entry-content .toc-title{
	background-color:#f5f5f5;
}
.entry-content #toc .toc-list{
	margin-left:30px;
	margin-right:50px;
}
.entry-content #toc .toc-list a{
	border-bottom:1px dashed #DCDCDC;
	padding:2px;
	display:block;
}
.entry-content #toc .toc-list a:hover{
	background-color:#f5f5f5;
	text-decoration: none;
}

スマホにも適応させるため、以下のソースコードを指定の箇所に追加してください。

@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
	.entry-content #toc .toc-list{
		margin-left:0px;
		margin-right:0px;
	}
}

サンプル「矢印ホバー・目次」

四つ目のサンプル例は「矢印ホバー・目次」

実際に表示させてみると以下の画像のようになります。

マウスを項目に重ねるとその項目に背景が出現。

Font Awesomeを使ってアイコンを表示しています。

.entry-content #toc{
	width:100%;
	font-size:18px;
}
.entry-content #toc .toc-list{
	list-style:none;
	margin-left:30px;
	margin-right:50px;
}
.entry-content #toc .toc-list li{
	list-style:none;
}
.entry-content #toc .toc-list a{
	border-bottom:1px dashed #DCDCDC;
	padding:2px;
	display:block;
}
.entry-content #toc .toc-list a:hover{
	background-color:#DCDCDC;
	text-decoration: none;
}
.entry-content #toc .toc-list li a:before{
	color: #696969;
	margin-right:7px;
	font-family: "Font Awesome 5 Free";
	content: "\f152";
	font-weight: 900;
}
.entry-content #toc .toc-list li ol li a:before{
	color: #808080;
	margin-right:7px;
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	font-weight: 900;
}

スマホにも適応させるため、以下のソースコードを指定の箇所に追加してください。

@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
	.entry-content #toc .toc-list{
		margin-left:0px;
		margin-right:0px;
	}
}

サンプル「カラーアイコン・目次」

五つ目のサンプル例は「カラーアイコン・目次」

実際に表示させてみると以下の画像のようになります。

見出し毎にアイコンを変更しています。《H5》と《H6》に関してはご自分でソースコードを追加してください。下記のソースコードでは空要素を追加しています。

また、項目に重ねるとその項目に背景が出現させ、右側は丸みを帯びるようにしています。

.entry-content #toc{
	width:100%;
	font-size:18px;
}
.entry-content #toc .toc-list{
	list-style:none;
}
.entry-content #toc .toc-list li{
	list-style:none;
}
.entry-content #toc .toc-list a{
	border-bottom:1px dashed #DCDCDC;
	padding:2px;
	display:block;
}
.entry-content #toc .toc-list a:hover{
	border-radius:0px 10px 10px 0px;
	background-color:#DCDCDC;
	text-decoration: none;
}
.entry-content #toc .toc-list li a:before{
	color: #4682b4;
	margin-right:7px;
	font-family: "Font Awesome 5 Free";
	content: "\f46c";
	font-weight: 900;
}
.entry-content #toc .toc-list li ol li a:before{
	color: #3cb371;
	margin-right:7px;
	font-family: "Font Awesome 5 Free";
	content: "\f101";
	font-weight: 900;
}
.entry-content #toc .toc-list li ol li ol li a:before{
	color: #d2b48c;
	margin-right:7px;
	font-family: "Font Awesome 5 Free";
	content: "\f105";
	font-weight: 900;
}
.entry-content #toc .toc-list li ol li ol li ol li a:before{
	color: #d2b48c;
	margin-right:7px;
	font-family: "Font Awesome 5 Free";
	content: " ";
	font-weight: 900;
}
.entry-content #toc .toc-list li ol li ol li ol li ol li a:before{
	color: #d2b48c;
	margin-right:7px;
	font-family: "Font Awesome 5 Free";
	content: " ";
	font-weight: 900;
}

スマホにも適応させるため、以下のソースコードを指定の箇所に追加してください。

@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
	.entry-content #toc .toc-list{
		margin-left:0px;
		margin-right:0px;
	}
}

Cocoonの目次をカスタマイズしてみよう！

記事タイトル下に表示される目次のカスタマイズ方法について解説しました。

要素さえ、分かってしまえばコーティング作業は楽に行うことができます。

その要素を知る場合はファンクションキー《F12》で調べることが可能です。試しに、自分のブログ、サイトの文字をクリックし、ファンクションキー《F12》キーを押してみましょう。

以下でも詳細を解説しています。

また、サイドバーに目次を追加、追従して表示されたい場合は以下のリンクを参考にしてください。