【Cocoon】初心者向け目次の設定方法とかんたんなカスタマイズ

WordPressのテーマ「Cocoon」は、記事に見出しを入れると自動的に目次が作成されます。

目次を作るためのプラグインは必要ありません。

その見出しを作るには、見出しにしたい文をドラッグして「段落▼」から見出し2～6を選びます。

基本的に「見出し1」は使いません。「見出し2」から使用して下さい。

（「見出し1」は主に記事のタイトルで使用します。）

【WordPress】見出しの付け方とルールをかんたんに解説

また、本文に「見出し2」が一つもないと目次は表示されません。

目次が自動で作成されるのは便利ですが、Cocoonの目次はいたってシンプルです。

なので、「もくじのデザインをちょっとだけ変更したい」なんて思うことがあります。

今回はCocoonの目次の基本的な設定方法と、ごく簡単なカスタマイズの方法を説明させていただきます。

目次の設定
目次のかんたんなカスタマイズ
最後に

目次の設定

Cocoonで目次の設定を行うには「Cocoon設定」をクリックします。

上に並んでいるタブの中から「目次」をクリックします。

目次の表示（または非表示）

目次の表示：目次を自動で表示するにはチェックを入れます。チェックを外すと目次は表示されません。

目次のタイトルと開閉ボタン

目次タイトル：目次の一番上に表示されるタイトルです。たとえば、タイトルをひらがなにする場合は「もくじ」と入力します。

目次切り替え：目次に「開閉」ボタンをつけることができます。開閉ボタンが必要であれば「目次の表示切替機能を有効にする」にチェックを入れます。

ページを開いた際に、目次を閉じた状態にしたい場合は「最初から目次内容を表示する」のチェックを外します。

表示条件・表示の深さ・ナンバーの有無

表示条件：見出しの数がいくつ以上で目次を表示するかを設定します。

目次表示の深さ：見出し2から6（H2～H6）の、どの階層まで目次で表示するかを設定します。

目次ナンバーの表示：各項目の前に数字を表示するかどうかです。

見出しに番号をつける場合は「数字（デフォルト）」を選択すると目次項目の番号が2重になるので「表示しない」を選択しましょう。

目次の中央表示：チェックを入れると目次が左側でなく、中央に表示されます。

以上の設定がすべて完了したら、一番下にある「変更をまとめて保存」を押して下さい。

目次のかんたんなカスタマイズ

ここからは目次にごく簡単な変更を加える方法です。

これがCocoonのデフォルトの目次です。

このシンプルな目次をカスタマイズします。

管理画面の「外観」→「テーマエディター」へ進んで下さい。

このCocoon Child（子テーマ）の「スタイルシート」を使って編集していきます。

CSSの変更には、何か不具合が生じた際はすぐに元に戻せるよう、必ずバックアップを取るようにしましょう。

目次タイトルのカスタマイズ

まず、タイトル文字を太字にして、色を変更してみます。

※タイトルの内容を変える（たとえば漢字の「目次」を、ひらがなの「もくじ」にする）には、さきほどの「Cocoon設定」で行って下さい。

タイトル部分のセレクタは「.toc-title」です。

これに「font-weight」と「color」というプロパティで文字の太さと色を指定します。

セレクタやプロパティについて詳しく知りたい方は、サルワカさんのこちらの記事をご覧になってみて下さい。

初心者向けCSS（スタイルシート）入門：基本的な書き方を総まとめ！

初心者でも理解できるよう0からCSSについて解説します。CSSとは何か？からCSSの書き方まで丁寧に図解していきます。

それでは「目次」の文字を太字にして、色を変えてみましょう。

.toc-title {
    font-weight: bold;
	color: #0693cd;
}

「font-weight:bold;」は、文字を太字にします。

「color:#英数字6ケタのカラーコード(または3ケタ);」で色を決めています。

基本的なカラーコードは、こちらのカラーコード表を参考にして下さい。

もっと細かく色を調整したい方は下のサイトが役立つと思います。

HTMLカラーコード

HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。

#のあとの英数字6ケタを変えると色が変わります。（#をつけるのをお忘れなく。）

そして、上のコードを先ほどの “Cocoon Child: スタイルシート (style.css) ”にベターっと貼り付けます。

貼り付ける場所はどこでも構いませんが、もし不安でしたら「子テーマ用のスタイルを書く」の直後に貼り付けて下さい。

最後に「ファイルを更新」を押します。

これでタイトル文字の太さと色が変わっているはずです。

背景色・枠線のカスタマイズ

次に目次の背景色と枠線を変更してみましょう。

目次全体のセレクタは「.toc」で、

プロパティ「background」（背景色）、「border」（枠線）で指定します。

.toc-title {
    font-weight: bold;
	color: #0693cd;
}
 
.toc {
	background: #f4f5f7;
	border: 5px solid #000000;
}

「border」で枠線の太さを「5px」、線の種類を「solid (実線)」、線の色を「#000000 (黒)」で指定しました。

線の太さは数が大きいほど太くなります。「0px」にすると枠線はなくなります。

線の種類は「solid」の他にも「dashed (破線)」「double (二重線)」などがあります。

線の太さと種類は指定した通りに変わりましたが、線の色が「黒」になりませんでした。

これはCocoonの「サイトキーカラー」が影響しているものと思われます。

【Cocoon】スキンやサイトキーカラーでデザインを設定しよう

変わらない場合は「!important」をコードの最後につけて強制的に変更します。

.toc-title {
    font-weight: bold;
	color: #0693cd;
}
 
.toc {
	background: #f4f5f7;
	border: 5px solid #000000!important;
}

強制したので黒い線にはなりましたが、あまりにもセンスがないですね（笑）

また「!important」をつけても変化がない場合は、コード自体を間違えている可能性もあります。

コードにおかしい箇所があると、一番左にこんなエラーマークがついたりします。

文字の色と大きさのカスタマイズ

最後はタイトル以外の文字の色と大きさを変更する方法です。

セレクタは「.toc a」で、

プロパティ「color」（文字の色）と「font-size」（文字の大きさ）で指定します。

.toc-title {
    font-weight: bold;
	color: #0693cd;
}
 
.toc {
	background: #f4f5f7;
	border: 5px solid;
}
 
.toc a {
	color: #0693cd;
	font-size: 20px;
}

項目の文字色と大きさは変わりましたが、番号の色と大きさがそのままなので、タイトル文字の大きさも含めて目次全体の設定を変更します。

.toc-title {
    font-weight: bold;
}
 
.toc {
	background: #f4f5f7;
	border: 5px solid;
	color: #0693cd;
	font-size: 20px;
}
 
.toc a {
	color: #0693cd;
}

（PCやタブレットで見ると）ちょっとデカすぎる気もしますが、極端な例なので…(^_^;)

最後に

ブログに目次があると読者の利便性が向上して、結果的にSEOにも効果があるようです。

冒頭でもお伝えした通り、Cocoonは見出しを入れると自動的に目次が作成されます。

SEO的にはそれだけでも十分なので凝りすぎる必要もないと思いますが、カスタマイズすることによりブログ全体に統一感が生まれます。

割と簡単にできるので、よろしければチャレンジしてみてはいかがでしょうか。