【Cocoon】サイドバーの目次カスタマイズ例｜デザインサンプル

サイドバーへ目次を追加する方法

Cocoonでは特別なソースコードを追加で記載しなくても、Word Pressの機能の一つ、ウィジェットにて「目次」をサイドバーへと追加することができます。

サイドバーへと目次を追加する方法は以下の通りです。

左メニューの「外観」から「ウィジェット」を選択する。

左メニュー内に項目「目次」があることを確認する。

左メニュー内の項目「目次」をドラッグし、希望する右メニューの項目内に入れる。以下の画像では「サイドバースクロール追従」項目内に入れています。

以上がサイドバーへの「目次」の追加方法です。

詳しい設定方法や、記事下の目次を削除する方法については以下のリンクで解説しています。

【Cocoon】記事の目次をサイドバースクロールで追従させる方法

Cocoonの機能に含まれるCocoonでは記事内の目次をサイドバーに設定することができます。その機能はCocoonの機能に含まれており、設定さえすれば誰でも利用することができます。また、目次をウィジェット「サイド...

zeroga.com

2022.04.07

サイトバーに目次を設置した例（デフォルト）

サイドバーに目次を設置すると以下のようになります。

尚、カスタマイズを加えていないデフォルトの状態です。

大見出しは《H2》、中見出しは《H3》、小見出しは《H4》です。小見出し《H4》までを表示させる場合は、設定したウィジェット「目次」にて《H4》までを表示するを選択してください。

詳しくは、項目「サイドバーへ目次を追加する方法」のリンク先にて解説しています。

目次の要素を知る

元々、目次に設定されてあるタグ、属性、親要素と子要素は以下の通りです。

まず、大見出し（H2）は、

#sidebar .toc-content > ol > li > a{
/*ここにソースコードを追加*/
}

次に、中見出し（H3）は、

#sidebar .toc-content > ol > li > ol > li > a{
/*ここにソースコードを追加*/
}

最後に、小見出し（H4）は、

#sidebar .toc-content > ol > li > ol > li > ol > li > a{
/*ここにソースコードを追加*/
}

また、《H5》以降を追加したい際には《a》の前に《ol》と《li》を追加する数、入力してください。基本的には、これで動作すると思います。

リストの番号を削除する場合

また、リストの番号を削除したいには《list-style-type: none;》を《ol》に指定します。

リストの点線を削除したい場合のソースコードは以下の通り。

大見出し（H2）の番号を削除する場合は、

#sidebar .toc-content > ol{
	list-style-type: none;
}

中見出し（H3）の番号を削除する場合は、

#sidebar .toc-content > ol > li > ol{
	list-style-type: none;
}

小見出し（H4）の番号を削除する場合は、

#sidebar .toc-content > ol > li > ol > li > ol{
	list-style-type: none;
}

また、《H5》以降の番号を削除したい際には末尾に《ol》と《li》を追加してください。

とりあえず、サンプル例を記載していきます。

サンプル例「シンプル目次」

一つ目のサンプル例は「シンプル目次」

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

間隔が狭かったので間隔を広げました。また、一律だった文字の大きさを見出しの大きい順に徐々に小さくしています。Cocoonのデザインを崩さないシンプルさが良いと思います。

#sidebar .toc a:hover {
	text-decoration: none;
}
#sidebar .toc-content > ol > li > a{
	font-size: 17px;
}
#sidebar .toc-content > ol > li > ol > li > a{
	font-size: 16px;
}
#sidebar .toc-content > ol > li > ol > li > ol > li > a{
	font-size: 15px;
}
#sidebar .toc-content ol > li{
	margin-top: 5px;
	margin-bottom: 5px;
}

サンプル例「ホバーカラーシンプル目次」

二つ目のサンプル例は「ホバーカラーシンプル目次」

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

マウスを項目に当てると背景が表示されます。また、文字は白色、背景は黒色で作成してみました。文字を折り返す場合は必要に応じて改行する《break-word》を、そして、改行された文をまとめるために《display: block》を利用してます。

#sidebar .toc a{
	width: 100%;
	word-wrap: break-word;
	display: block;
}
#sidebar .toc a:hover {
	border-radius: 1px 10px 10px 1px;
	text-decoration: none;
	background-color: #696969;
	color: #ffffff;
}
#sidebar .toc-content > ol > li > a{
	padding:3px;
	font-size: 17px;
}
#sidebar .toc-content > ol > li > ol > li > a{
	padding:2px;
	font-size: 16px;
}
#sidebar .toc-content > ol > li > ol > li > ol > li > a{
	padding:1px;
	font-size: 15px;
}
#sidebar .toc-content ol > li{
	margin-top: 5px;
	margin-bottom: 5px;
}

サンプル「シンプル角丸」

三つ目のサンプル例は「シンプル角丸」

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

目次の背景をそのまま利用される方向けに作ってみました。さり気無く目次を表示でき、それぞれはブロック要素化しているので横列のどこでも目次をクリックすることができます。また、よりシンプルさを追求するために番号を消し、見出し文字が多くても違和感が無いように左寄せにしてます。

#sidebar .toc a{
	display:block;
}
#sidebar .toc a:hover {
	border-radius: 10px 10px 10px 10px;
	text-decoration: none;
	background-color: #f5f5f5;
	color: #000000;
}
#sidebar .toc-content > ol > li > a{
	padding:5px;
	font-size: 17px;
}
#sidebar .toc-content > ol > li > ol > li > a{
	padding:4px;
	font-size: 16px;
}
#sidebar .toc-content > ol > li > ol > li > ol > li > a{
	padding:3px;
	font-size: 15px;
}
#sidebar .toc-content ol > li{
	margin-top: 5px;
	margin-bottom: 5px;
}
#sidebar .nwa .toc {
	padding-left: 0px;
}
#sidebar .toc .toc-list{
	padding-left: 0px;
}
#sidebar .toc-content > ol{
	list-style-type: none;
}
#sidebar .toc-content > ol > li > ol{
	list-style-type: none;	
}
#sidebar .toc-content > ol > li > ol > li > ol{
	list-style-type: none;	
}

サンプル「アイコンシンプル目次」

四つ目のサンプル例は「アイコンシンプル目次」

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

Webアイコンを利用しています。また、左いっぱいに寄せています。黒色と灰色がベースなのでCocoonのシンプルさは失われてないはず。ここら辺は好みなので微妙な場合はソースコードを削ってください。

#sidebar .toc{
	padding:0 0;
}
#sidebar .toc-list{
	padding-left: 0px;
}
#sidebar .toc a{
	width: 100%;
	word-wrap: break-word;
	display: block;
}
#sidebar .toc a:hover {
	border-radius: 1px 10px 10px 1px;
	text-decoration: none;
	background-color: #f5f5f5;
	color: #000000;
}
#sidebar .toc-content > ol > li > a{
	padding:3px;
	font-size: 17px;
}
#sidebar .toc-content > ol > li > a:before{
	font-family: "Font Awesome 5 Free";
	color: #000000;
	margin-right:7px;
	content: "\f152";
	font-weight: 900;
}
#sidebar .toc-content > ol > li > ol > li > a{
	padding:2px;
	font-size: 16px;
}
#sidebar .toc-content > ol > li > ol > li > a:before{
	font-family: "Font Awesome 5 Free";
	color: #000000;
	margin-right:7px;
	content: "\f101";
	font-weight: 900;
}
#sidebar .toc-content > ol > li > ol > li > ol > li > a{
	padding:1px;
	font-size: 15px;
}
#sidebar .toc-content > ol > li > ol > li > ol > li > a:before{
	font-family: "Font Awesome 5 Free";
	color: #000000;
	margin-right:7px;
	content: "\f105";
	font-weight: 900;
}
#sidebar .toc-content ol > li{
	margin-top: 5px;
	margin-bottom: 5px;
}
#sidebar .toc-content ol {
	list-style:none;
}

サンプル「カラーアイコン目次・見出しを添えて･･･」

四つ目のサンプル例は「カラーアイコン目次・見出しを添えて･･･」

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

見出しをカラフルに。また、目次もカラフルにファイル型にしました。

.sidebar h3{
	background-color: #FFFFFF;
	font-size:18px;
	border-bottom:dashed 1px #87ceeb;
	border-left:2px solid #0000ff;
    padding: 12px;
    margin: 16px 0;
    border-radius: 2px;
}

#sidebar .toc{
	padding:0 0;
}
#sidebar .toc-list{
	padding-left: 0px;
}
#sidebar .toc a{
	width: 100%;
	word-wrap: break-word;
	display: block;
}
#sidebar .toc a:hover {
	border-radius: 1px 10px 10px 1px;
	text-decoration: none;
	background-color: #f5f5f5;
	color: #000000;
}
#sidebar .toc-content > ol > li > a{
	padding:3px;
	font-size: 17px;
}
#sidebar .toc-content > ol > li > a:before{
	font-family: "Font Awesome 5 Free";
	color: #0000ff;
	margin-right:7px;
	content: "\f065";
	font-weight: 900;
}
#sidebar .toc-content > ol > li > ol > li > a{
	padding:2px;
	font-size: 16px;
}
#sidebar .toc-content > ol > li > ol > li > a:before{
	font-family: "Font Awesome 5 Free";
	color: #3cb371;
	margin-right:7px;
	content: "\f15c";
	font-weight: 900;
}
#sidebar .toc-content > ol > li > ol > li > ol > li > a{
	padding:1px;
	font-size: 15px;
}
#sidebar .toc-content > ol > li > ol > li > ol > li > a:before{
	font-family: "Font Awesome 5 Free";
	color: #daa520;
	margin-right:7px;
	content: "\f15b";
	font-weight: 900;
}
#sidebar .toc-content ol > li{
	margin-top: 5px;
	margin-bottom: 5px;
}
#sidebar .toc-content ol {
	list-style:none;
}

尚、サイドバーの見出しをカスタマイズする際は以下のリンクを参考にしてください。

《Cocoon》カテゴリー（見出し、項目）のカスタマイズ方法｜デザイン例

Cocoonのカテゴリー（見出し、項目欄）とはカテゴリーとは、ウィジェット欄に存在するジャンルを示すものです。カテゴリー自体は見出し、項目とは全く関係はありません。このページで指す、カテゴリーは一例で、カテゴリーや...

zeroga.com

2022.04.04

サイドバーの目次をカスタマイズしてみよう！

サイドバーへの目次の追加、また、サイドバーの目次のカスタマイズ方法について解説しました。

記事下の目次に同じデザインを使いたい場合は《#sidebar》を全て削除してください。基本的には記事下の目次とサイドバーの目次に使用されている要素に違いはありません。ただし、微調整は必須です。

テストした環境はCocoonのデフォルトの状態なので、恐らく動くと思います。