当ブログでは、サイドバーに目次を表示させて、その目次がページをスクロールしても追尾してくるように設定しています。
本記事ではWordPressテーマCocoonを使用しているあなたへ、目次をサイドバーに表示させスクロールしても追従してくる方法を詳しくご説明していきます。
ウィジェットでペっと設定すれば終了です！とっても簡単なので、5分もあればできますよ！
有名ブロガーさんも目次の重要性をツイートしていますので、ぜひあなたのブログでもサイドバーで追従させちゃってください。
サイドバーをカスタマイズしてボックスナビを設置したいかたはこちらの【Cocoon】ボックスメニューでサイドバーのカテゴリー表示をカスタマイズしようを参照してみてください。
それでは早速設定方法を見ていきましょう。
サイドバーで目次を追従させる方法
事前準備・確認
サイドバーで目次を追従させる設定をする前に事前にワードプレスの設定状況を確認しておきましょう。
あなたの設定と私の設定のもともとが違ったら大変ですからね。ではワードプレスの管理画面からCocoon設定→目次を確認してみましょう。
私の設定状況はこうなっていました。
- 目次の表示→チェック
- 表示ページ→全チェック
- 目次タイトル→目次
- 目次切り替え→チェック（開く/閉じる）
- 表示条件→２つ以上見出しがあるとき
- 目次表示の深さ→H３見出しまで
- 目次ナンバーの表示→数字
- 目次の中央表示→チェック
- 目次の表示順→ノーチェック
- 見出し内タグ→ノーチェック
重要な項目は「目次の表示」ですね。表示の設定していなければ表示されませんから。あとはサイドバー追従について、特に重要なのはないかと思います。
サイドバーに表示するのには関係ありませんが、私の目次は上記設定に加えてCSSでカスタマイズをしています。
そちらに興味があるかたは【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】を参照してくださいね。
具体的な設定方法
いよいよ目次サイドバー追従設定をしていきます。この機能はウィジェットで設定可能ですので、ワードプレスの編集画面から外観→ウィジェットと進みましょう。
そしたら
- 目次を選択
- サイドバースクロール追従を選択
- ウィジェットを追加
するとサイドバースクロール追従のところに目次が追加されますので
- 目次のプルダウンメニューを選択しタイトルと目次表示の深さを決めて
- 保存
僕はタイトルを「クリックできる目次」
目次表示の深さを「H3見出しまで」にしています
以上で設定終了です。
サイドバー目次スクロール追従の効果
サイドバー追従で目次を設定するとどんな効果があるのか、私のブログで見てみましょう。
これはクリックを色で表現しているもので青い部分がクリックされたところです。
ちょこちょこクリックされていますね！
- 一気に飛ばしたいとき
- ちょっと戻りたいとき
- 興味のひく項目があったとき
- 長い記事の一部分だけ読みたいとき
サイドバーに目次があると便利ですよね。
私のブログに関して言えばデータも証明していますし、読者のことを考えてサイドバー追従に目次を設置しています。
あなたもサイドバーに目次を設置してみよう
本記事では、【Cocoon】サイドバーで目次を追従させる方法【初心者向け】
ということで目次をサイドバーに設置し、それをスクロールしても追尾してくるように設定する方法をご紹介してきました。
読者の気持ちになって、わかりやすい目次・わかりやすい項目を心がけて私はブログを作っています。
あなたも読者にやさしいブログになるようにぜひいろんな工夫をしてみてください。この記事がその助けになれば、私はとてもうれしく思います。
ありがとうございました
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
外観・デザインをカスタマイズ
特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です。
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ
コメント