フロントページのメインビジュアルに、プラグイン「grayish MV add」を使用中!詳しくはここをClick!
PR

投稿・固定ページ:目次の設定

マニュアル
記事内に広告が含まれています。

この記事では、主に投稿・固定ページで利用されるCocoon設定の目次の設定について説明します。

ハート
ハート

Cocoonでは目次表示のためのプラグインは不要だよ!

スポンサーリンク

Cocoon設定の目次タブでお好みで変更

Cocoon設定の目次タブを開きます。

目次はデフォルトで表示されるようになっています。

Cocoon設定 > 目次

公式の目次のマニュアルもご一読ください。

上記ページより以下、引用です。

Cocoonの見出し機能は、H見出しを元に作成されます。本文中内でH2~H6の見出しが使われていないと、目次は表示されません。

https://wp-cocoon.com/toc/

ハート
ハート

目次を適切に表示するためにも、見出しにH2〜H6を使用して記事を書くようにしましょう!

目次のタイトルなど、お好みで変更可能です。

目次の設定変更

当サイトでは、目次タイトルをIndexに、目次切り替えの開閉のテキストをOpen/Closeに変更しています。

目次表示の深さはスキン制御

どの見出しの深さまで表示するか、の設定はスキン制御により、

H3まで

としております。

目次表示の深さはスキン制御してます

スキン制御をはずしてH4以降を設定された場合、スタイルは当たりませんのでご注意ください。

目次ナンバーの表示を選ぶ

Cocoon設定では以下の選択肢があります。デフォルトは数字となっています。

Cocoon設定の目次ナンバー選択肢
  • 表示しない
    スキンスタイル:アイコン表示による装飾
  • 数字(デフォルト)
    スキンスタイル:数字の装飾
  • 数字詳細
    特にスタイルなし
  • ドット(黒丸)
    特にスタイルなし
  • ドット(白丸)
    特にスタイルなし
  • 黒四角
    特にスタイルなし

grayishでは、「表示しない」と「数字(デフォルト)」について独自スタイルを当てています。
その他の選択肢については、崩れない程度に調整したのみとなってます。

特にこだわりがなければ、表示しない又は数字をご利用ください。

表示しないの場合

先頭にアイコンが追加されるスタイルです。

数字(デフォルト)の場合

H2の数字を見やすく装飾しています。

Cocoon設定の変更を行ったら、必ず「変更をまとめて保存」ボタンをクリックしてください。

サイドバースクロール追従に目次を表示する

目次の設定ができたら、投稿・固定ページのサイドバーに目次が表示されるようにウィジェットで設定しましょう。

目次はサイドバースクロール追従エリアに設定するのが一般的だと思います。

ハート
ハート

記事が長くなるケースときに、サイドバー追従に目次があると読みやすくなるね!

WordPress管理画面 > 外観 > ウィジェットで設定します。

目次ウィジェットをサイドバースクロール追従に設定します。

目次表示の深さは、上記のCocoon設定のスキン制御により、ここで設定を行っても強制的にH3までの表示になりますのでご注意ください。

WordPress管理画面 > 外観 > ウィジェット

ウィジェットの設定後、保存ボタンのクリックを忘れずに!

投稿・固定ページのサイドバースクロール追従エリアに目次が設定されます。

投稿ページの例

【スキン独自】目次がある程度長い場合は自動でスクロール表示

grayishでは、目次がある程度長くなる場合、自動でスクロール表示になります。

記事を頑張って書いて、H2/H3見出しを沢山使った場合、サイドバーの目次も長くなります。

目次が長くなって使いづらくなることを避ける為、ある程度の長さになると自動で目次内がスクロール表示になります。

長い目次になるとき、自動で目次内がスクロール表示になる


この記事は以上になります。

タイトルとURLをコピーしました