Cocoonで特定ページの目次の見出しの深さを指定する方法

通常は目次にH3まで表示しているが、文字数の多いページでは目次が長くなりすぎるのでH2までに制限したい。

そういった場合にCocoonで特定のページの目次の見出しの深さを指定する方法を説明します。

見出しの深さを指定する手順

手順としてはまず目的のページで普段の目次を非表示にして、ショートコードで深さを指定した目次を挿入するだけです。

普段の目次を非表示にする

普段の目次はH3まで表示しているとします。

まずこの目次を非表示にします。

記事編集画面の右側の設定から「目次を表示しない」にチェックを入れます。

ショートコートで目次を挿入

ショートコートで見出しの深さを指定した目次を挿入します。

目次を表示したい場所に、ブロックエディタであれば「ショートコード」ブロックか「カスタムHTML」ブロックを作成します。

以下のショートコードを入力します。「depth=”2″」で表示する見出しを制限します。この場合はH2まで表示。

[toc depth="2"]

これで完了です。プレビューで目次の見出しがH2までになっているのが確認できます。

注意点

注意点は、例えば「depth=”4″」と指定しても、Cocoon設定の「目次」タブの「目次表示の深さ」でH4まで表示設定されていないと表示されません。

つまり普段の目次より浅くはできるけど、深くはできません。普段はH3までの場合は「depth=”4″」でH4まで表示することはできません。

またCocoon設定の「広告」タブで広告の表示位置を「本文上」にしている場合、通常は目次の上に広告が表示されますが、ショートコードで作成した目次では広告が下に表示される違いがあります。