Cocoonの目次の作り方｜プラグインなしで簡単設定【初心者向け】

Cocoonの目次の作り方がわからない

こんな悩みを解決していきます。

結論は、「Cocoon設定」で解決することができるので、本記事を読んでみてください。

こんにちは、はやとです。

目次は記事の概要を伝えるために有効ですので、設置しておくことをおすすめします。

この記事を読んでスッキリ解決しましょう！

Cocoonで目次を設定する方法

まずは目次を作る前にそのための設定をしましょう。

Cocoonで目次を設定する流れを画像付きで解説していきます。

①WordPress管理画面で「Cocoon設定」をクリックする

管理画面の左に「Cocoon設定」があるのでクリックしてください。

②Cocoon設定の目次をクリック

様々な項目が出てきますが、その中から「目次」というところを選んでください。

③各項目を設定する

目次を選択すると「目次設定」が開きます。

こちらの画像のような画面ですね。ひとつずつ解説していきます。

目次の表示

目次を表示させるかどうかの設定ですのでチェックを入れてください。

表示ページ

目次を表示させるページを決めることができます。

表示させたくないページがあればチェックを外してください。

目次タイトル

目次のタイトル名を設定できます。

下の画像の赤枠の部分になります。

タイトル名には「目次」や「Contents」が使われることが多いです。

目次切り替え

目次の「開く or 閉じる」ボタンを設置するかの設定です。

切り替えボタンがあれば、読者が自分で目次を表示するかどうかを選択することができます。

使用しない理由もないので、設定しておくといいと思います。

手順は以下のとおりです。

①「目次の表示切り替えを有効にする」にチェックを入れます。

②ボタンのキャプションを設定します。

「開く」「閉じる」の他には「show」「hide」、「表示する」「表示しない」などがよく使われています。

③「最初から目次内容を表示する」はチェックを入れます。
※目次を閉じた状態にしておきたいときはチェックを外してください。

表示条件

目次が作成される条件が設定できます。

見出しが2つ or 3つ以上で目次を作成する場合が多いです。

目次表示の深さ

少し難しい表現ですが、どの見出しまで目次として表示するのかということを設定できます。

デフォルトでは見出し6までが目次に表示される設定となっていますが、見出し3 or 見出し4までが表示されれば十分ではないかと思います。

見出し3までの設定にすると以下のように表示されます。

目次ナンバーの表示

目次ナンバーとは目次の前の数字のことです。

それぞれ以下のように表示されます。

【表示しない】

こちらの場合には、自分で数字をつけるなどして、見やすくなるように工夫をしたほうがいいでしょう。

【数字】

こちらの場合は、数字が自動で付くので使いやすいと思います。

ただ、見出し2、見出し3も同じように数字が付くのでメリハリは付きにくいかもしれないです。

【数字詳細(ex1.1.1)】

こちらでは、見出しの前にさらに細かく数字が振られます。

細かく書かれているほうが分かりやすいなという方は設定してみてください。

目次の中央表示

目次を画面のどの位置に表示させるかを決めることができます。

チェックを入れると以下の画像のように中央に表示することができます。

画面左に表示させたい場合はチェックを外してください。

設置する項目は以上となります。

たくさんあるように感じますが、ひとつひとつゆっくり設定していけば問題ないです

続いて、実際に目次を作っていきます。

Cocoonの目次の作り方

目次は見出しを作ることで自動で作られます。

なお、今回の解説では旧バージョンの投稿画面・Classic Editorを利用しています。

こちらも画像付きで解説していきます。

①WordPressの管理画面から「投稿」⇨「新規追加」をクリックする

②投稿画面で見出しを作成する

まず、投稿画面の「段落」を選択します。

そして、見出し2〜見出し6のいずれかを選択してください。

※見出し１はタイトルで使用しているので、通常使用しません

見出しを作成すると以下のようになります。

③目次ができているか確認する

先ほどのCocoon設定の「表示条件」で指定した数値以上の目次を作成したら、下書き保存して「プレビュー」で確認してみましょう！

下書き保存とプレビューは画面右側の公開設定から行ってください。

プレビューで確認して、以下のようになっていればOKです！

Cocoonで目次を作る方法は以上となります。

目次があれば、記事内で書かれていることを読者に伝えることができるので、ぜひ設定してみてください！

目次をページ毎に非表示にする方法

ここまで目次の設定方法を解説して来ましたが、中には「目次を表示したくない！」というページもあると思います。

そこで、ページ毎に目次の表示、非表示を設定する方法を解説します。

非表示の設定は投稿画面の右側にある「ページ設定」からすることができます。

以下の画像のように「目次を表示しない」にチェックを入れるとそのページでは目次は表示されなくなります。

プレビュー画面で確認して、目次が表示されなければ完了です。

なお、ページ設定が見つからないという場合は、投稿画面上部の「表示オプション」から「ページ設定」にチェックを入れると表示されます。

Cocoonで目次を表示をページ毎に設定する方法は以上となります。

まとめ

今回はCocoonで目次を設定する方法について画像付きで解説しました。

Cocoonではプラグインを使用しなくても「Cocoon」設定から簡単に目次の設定をすることができます。

・表示位置の設定

・ページ毎の非表示設定

といった細かい設定もすることができるので、お好みで設定してみてください。