見出しから自動で目次を作成する(プラグイン不要)

Cocoonでは見出し(h2～h6が設定された文)から自動で目次を作成する機能が用意されています。目次を作成する時によく利用されている「Table Of Contents Plus(TOC+)」プラグインは必要ありません。ここではここではWordPressのテーマとしてCocoonを使用している場合に見出しから目次を作成する手順に関して解説します。

(Last modified: 2023年01月11日)

目次の自動生成を行うかどうかの設定

Cocoonでは初期値で記事に含まれる見出しから目次を自動で生成します。その為、Cocoonを利用する前に手動で目次を作成していた場合やプラグインを使って自動生成していた場合は目次が2つになってしまいます。

今後はCocoonが自動生成する目次を使用する場合は手動で作成した目次を削除することになりますし、既存の目次を利用する場合はCocoonで目次を自動生成しないように設定します。最初にCocoonで目次を自動生成しないように設定をしてみます。

画面左側の「Cocoon設定」メニューの中にある「Cocoon設定」メニューをクリックして下さい。

「Cocoon 設定」画面が表示されます。

画面上部にあるタブ一覧の中から「目次」タブをクリックして下さい。

「目次」に関する設定画面が表示されます。

目次を表示するかどうかは「目次の表示」項目で設定します。また目次を表示する場合でも「表示ページ」項目で「投稿ページ」および「固定ページ」についてそれぞれ表示するかどうかを設定できます。

例としてCocoonの機能による目次の表示を停止してみます。「目次の表示」項目で「目次を表示する」の前にあるチェックを外して下さい。

設定を変更した場合には画面上部または下部に表示されている「変更をまとめて保存」をクリックして下さい。

ブログを表示してみると、個別の記事のページに表示されていた目次のうち、Cocoonによって自動生成されたいた目次が表示されなくなりました。

-- --

これ以降の設定については、Cocoonが自動生成した目次を使用しますので、「目次を表示する」に改めてチェックを行い設定を保存したあと、手動で生成していた目次を削除しておきました。

モバイルから閲覧した場合も同じように目次が表示されます。

目次に「閉じる」「開く」を表示し、利用者が表示の切り替えをできるようにする

初期値では目次に「閉じる」というリンクが表示されています。この「閉じる」を利用者がクリックすると目次を閉じることができます。(「開く」をクリックすると再び表示されます)。

モバイルから閲覧したあとで「閉じる」をタップした場合も目次が閉じます。

この表示切替の機能を無効にする場合は、先ほど同じく「目次」に関する設定画面の中の「目次切り替え」項目で行うことができます。

表示切替の機能を利用しない場合は「目次の表示切替機能を有効にする」の前のチェックを外して下さい。

画面上部または下部に表示されている「変更をまとめて保存」をクリックしたあと、改めてブログを表示してみると目次に「閉じる」のリンクが表示されなくなりました。

どの見出しまで目次に含めるかどうかを設定する

初期設定では記事の中にある見出しの中でh2からh6までの見出しが自動的に目次になります。h2からh4までの見出しが含まれるサンプル記事を作成してみたところ、次のような目次が自動で作成されました。

モバイルから閲覧した場合も同じように目次が作成されます。

目次ではh2、h3、h4となるに従ってインデントされて表示されています。

初期値ではh6まで目次に反映されますが、範囲を限定してh2からh4までとか、h2だけのように設定ができます。目次に含める見出しの範囲を変更する場合は「目次表示の深さ」項目の右に表示されているドロップダウンメニューで設定して下さい。

例として「H2見出しまで」を選択してみます。

画面上部または下部に表示されている「変更をまとめて保存」をクリックしたあと、改めてブログを表示してみると目次はh2の見出しだけが表示されました。

目次に表示される数字のフォーマットを設定する

目次を表示すると初期設定では各項目の前に数字が表示されます。

数字が表示されないようにしたり、数字の表示の仕方を変更するには「目次ナンバーの表示」項目の右に表示されているドロップダウンメニューで設定して下さい。

例として「表示しない」を選択してみます。

画面上部または下部に表示されている「変更をまとめて保存」をクリックしたあと、改めてブログを表示してみると目次の各項目の前に表示されていた数字が表示されなくなりました。

今度は「数字詳細」を選択してみます。

画面上部または下部に表示されている「変更をまとめて保存」をクリックしたあと、改めてブログを表示してみると目次の各項目に表示される数字が階層が分かる形に変更されて表示されるようになりました。

-- --

Cocoonを利用しているブログで、Cocoonの機能を使って見出しから目次を自動生成する場合の使い方について解説しました。