【cocoon記事内】目次をショートコードで好きな場所に*目次の項目設定も

ワードプレス
スポンサーリンク
銀ペン
銀ペン

もくじって結構大事だよな

cocoonの目次は特に指定をしたりコードを入れなくても自動で見出し(h2〜)を抽出してもくじとして設置してくれます。

sabo
sabo

素晴らしい!

デフォルトだと、最初のh2タグの前に入る仕様なのですが、コレを別の好きな場所に表示したいという方もいると思います。
ここではcocoonのもくじ設定についてご紹介します。

スポンサーリンク

もくじはショートコードで簡単に別の場所に表示できる

もくじのショートコードは下記です。

[toc]

これを記事内のあなたが目次を表示したいところに挿入すると、任意の箇所に表示が可能です。
また、デフォルトよりもこちらが優先されます。

銀ペン
銀ペン

簡単カンタン♪

目次に表示する項目設定

cocoon設定に入ります。

タブメニューで目次を選択

上部にキャプチャがでます。
その下から項目設定が可能です。

目次の設定項目

▼目次の表示
目次の表示/費表示が設定できます。
▼表示ページ
目次を表示させるページが選択できます。
▼目次タイトル
saboputでは「もくじ」としています。好きな文字に変更できます。
▼目次切り替え
目次の表示切り替え機能を有効にするに設定するとユーザーが邪魔だと思えば、閉じることができるようになります。また、初見の時に閉じておくか開いておくか設定することができます。
▼表示条件
○つ以上見出しがあるときなど設定することができます。
▼目次表示の深さ
表示する見出しの深さを設定できます。H6まで
▼次ナンバーの表示
数字の目次ナンバーの表示/非表示が設定できます。
▼目次の中央表示
目次の表示位置を設定できます。
▼目次の表示順
広告の手前などの設定ができます。
▼見出し内タグ
見出しのhタグの表示/費表示が設定できます。

設定が終わったら変更をまとめて保存しましょう。

目次は記事に何が書いてあるかの道標

目次はユーザーが欲しい情報があるか最初の段階で確認でき、尚且つリンク付き(その見出しに飛べる)なのでとてもユーザビリティの高いものです。

簡潔に分かりやすく、「私が知りたい情報はここに書いてありそう!」と思わせるような見出しを心がけましょう。

sabo
sabo

って言っても結構ムズかしいんだけどね・・・

銀ペン
銀ペン

長くなりすぎたりしちゃうよな

スポンサーリンク
ワードプレス
スポンサーリンク
saboをフォローする
saboput

コメント

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