こんにちは、阿木人です。
WordPressの無料テーマのCocoon(コクーン)って便利ですよね。
WordPressで目次を作りたいけど、プラグインを入れるのはちょっと…という場合、Cocoonを使っていると簡単に目次を作ることが出来ます。
ちなみに「目次」ってこんなやつです。
特に、ブログを始めたばかりの初心者の方向けになるべく分かり易いよう、図を入れながら説明してみたいと思います。
Cocoonでの目次の設定方法
WordPressの管理画面で「Cocoon設定」をクリックします。
するとCocoonで設定出来る色んな項目が出てくるので、「目次」をクリック。
目次設定が表示されるので、各項目を確認、設定します。
設定項目の説明
こんな感じの項目が出てくると思います。
大体は表示されている説明を読めば分かると思うのですが、いくつか分かり辛いものがあると思います。黄色にした項目は、下でちょっと細かく説明しますね。
- 目次切り替え
- 目次表示の深さ
- 目次ナンバーの表示
目次の表示：目次を表示させたいのでチェックしましょう
表示ページ：目次を表示させたいページを選択
目次タイトル：目次上に表示させるテキスト
目次切り替え：目次を閉じたり開いたり出来る様にするかどうかと、その時に表示させる文字。
目次を最初から表示させるかどうか
表示条件：何個以上見出しがある時に見出しを表示させるか
目次表示の深さ：目次の階層表示の深さ設定
目次ナンバーの表示：目次を表示させた時の、項目の前に表示させる数字の設定
目次の中央表示：目次の表示位置
目次の表示順：広告やウィジェットの手前に目次を表示するかどうか
見出し内タグ：H見出し内のHTMLタグをそのまま出力するかどうか
目次切り替え
「目次の表示切替機能を有効にする」
チェックを入れると、目次を開いたり閉じたりする事が可能になります。
「開：」と「閉：」
目次を開く時、閉じる時の文字(キャプション)を変更出来ます。ただし変更すると分かり辛くなると思うので、「開く」「閉じる」が無難かと思います。
「最初から目次内容を表示する」
ユーザがそのページを閲覧する時に目次を開いた状態か閉じた状態かを設定出来ます。これは個人の好みですね。
目次表示の深さ
クリックすると、H2からH6(デフォルト)までの設定が出来るプルダウンメニューが出てきます。
次の画像が、見出しの深さと実際の目次の項目の対応が分かるものです。デフォルトだとH6見出しまでになりますが、H4見出しくらいまでで充分だと思います。
目次ナンバーの表示
目次ナンバーの表示は、「表示しない」「数字（デフォルト）」「数字詳細（ex:1.1.1）」の三種類があります。設定がどう反映されるか、一つずつ画像で説明しますね。
「表示しない」の場合
目次項目の頭に数字を何も表示しない設定です。これを使う場合は、自分で項目名(見出し名)の頭に、何か分かり易くする記述をした方が良いでしょう。
「数字（デフォルト）」 の場合
頭に数字が付きます。同じ深さ(H○○)毎に連番が付きますね。分かり易いと思います。
「数字詳細（ex:1.1.1）」 の場合
「数字（デフォルト）」 に似ています。こちらは項目の上の階層の数字も表示されます。何かの解説や説明系の、教科書っぽいブログ系だったらこの設定の目次が見やすいかなと思います。
Cocoonでの目次の作り方
さて、ここまでが目次の設定のやり方です。ここから実際の作り方を説明していきます。
目次を作るには、「見出し」を使います。見出しにしたい文章を投稿画面で書いたら、ブロックエディターで「見出し」を選択します。
「見出し」を選択したら、こんな感じでブロックが見出しに変換されます。
見出しの大きさの変え方はこんな感じ↓
まとめ
これで目次が作れますね。
おさらいとしては、
- Cocoonを使うと目次が楽に作れる
- 目次の設定はWordPress管理画面の「Cocoon設定」→「目次」タブから
- 文章のブロックで「見出し」を設定すると目次が作れる
という事でした。
それでは。
