【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

サイドバー目次追従ブログ

当ブログでは、サイドバーに目次を表示させて、その目次がページをスクロールしても追尾してくるように設定しています。

▼こんな感じ▼

本記事ではWordPressテーマCocoonを使用しているあなたへ、目次をサイドバーに表示させスクロールしても追従してくる方法を詳しくご説明していきます。

ウィジェットでペっと設定すれば終了です!とっても簡単なので、5分もあればできますよ!

有名ブロガーさんも目次の重要性をツイートしていますので、ぜひあなたのブログでもサイドバーで追従させちゃってください。

▼マクリンさんのツイートより▼

サイドバーをカスタマイズしてボックスナビを設置したいかたはこちらの【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスナビは意外と難しくないを参照してみてください。

それでは早速設定方法を見ていきましょう。

サイドバーで目次を追従させる方法

事前準備・確認

サイドバーで目次を追従させる設定をする前に事前にワードプレスの設定状況を確認しておきましょう。

あなたの設定と私の設定のもともとが違ったら大変ですからね。ではワードプレスの管理画面からCocoon設定目次を確認してみましょう。

私の設定状況はこうなっていました。

  • 目次の表示→チェック
  • 表示ページ→全チェック
  • 目次タイトル→目次
  • 目次切り替え→チェック(開く/閉じる)
  • 表示条件→2つ以上見出しがあるとき
  • 目次表示の深さ→H3見出しまで
  • 目次ナンバーの表示→数字
  • 目次の中央表示→チェック
  • 目次の表示順→ノーチェック
  • 見出し内タグ→ノーチェック

重要な項目は「目次の表示」ですね。表示の設定していなければ表示されませんから。あとはサイドバー追従について、特に重要なのはないかと思います。

サイドバーに表示するのには関係ありませんが、私の目次は上記設定に加えてCSSでカスタマイズをしています。

そちらに興味があるかたは【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】を参照してくださいね。

具体的な設定方法

いよいよ目次サイドバー追従設定をしていきます。この機能はウィジェットで設定可能ですので、ワードプレスの編集画面から外観ウィジェットと進みましょう。

そしたら

  1. 目次を選択
  2. サイドバースクロール追従を選択
  3. ウィジェットを追加

するとサイドバースクロール追従のところに目次が追加されますので

  1. 目次のプルダウンメニューを選択しタイトルと目次表示の深さを決めて
  2. 保存

僕はタイトルを「クリックできる目次」
目次表示の深さを「H3見出しまで」にしています

以上で設定終了です。

サイドバー目次スクロール追従の効果

サイドバー追従で目次を設定するとどんな効果があるのか、私のブログで見てみましょう。

これはクリックを色で表現しているもので青い部分がクリックされたところです。

ちょこちょこクリックされていますね!

  • 一気に飛ばしたいとき
  • ちょっと戻りたいとき
  • 興味のひく項目があったとき
  • 長い記事の一部分だけ読みたいとき

サイドバーに目次があると便利ですよね。

私のブログに関して言えばデータも証明していますし、読者のことを考えてサイドバー追従に目次を設置しています。

あなたもサイドバーに目次を設置してみよう

本記事では、【Cocoon】サイドバーで目次を追従させる方法【初心者向け】

ということで目次をサイドバーに設置し、それをスクロールしても追尾してくるように設定する方法をご紹介してきました。

読者の気持ちになって、わかりやすい目次・わかりやすい項目を心がけて私はブログを作っています。

あなたも読者にやさしいブログになるようにぜひいろんな工夫をしてみてください。この記事がその助けになれば、私はとてもうれしく思います。

ありがとうございました

関連記事

当ブログではCocoonにかかわる記事をほかにもいくつか投稿しています。ぜひほかの記事も読んでみてください。

初心者向け

カスタマイズ

コメント

プロフィール
峠

とうげです。30代サラリーマンです。地方進学校→一浪→大学理工学部→就職。行動することを大切にしています。投資、アフィリエイト、ブログやってます。インデックス投資で1000万円運用中。本業は地方に長期出張する施工管理→技術職へ異動。小さいときはロボット作り屋さんになりたかった。

峠をフォローする
タイトルとURLをコピーしました