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

サイドバー目次追従Cocoon

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

▼こんな感じ▼

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

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

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

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

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

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

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

事前準備・確認

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

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

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

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

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

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

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

具体的な設定方法

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

そしたら

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

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

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

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

以上で設定終了です。

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

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

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

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

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

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

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

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

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

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

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

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

ありがとうございました

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ブログをツイッターと連携する具体的な手順
【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】おすすめカードでトップページ等をカスタマイズしよう!
【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント