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

サイドバー目次追従 Cocoon

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

▼こんな感じ▼
サイドバー追従のgif

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

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

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

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

サイドバーをカスタマイズしてボックスナビを設置したいかたはこちらの【Cocoon】ボックスメニューでサイドバーのカテゴリー表示をカスタマイズしようを参照してみてください。

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

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

事前準備・確認

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

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

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

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

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

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

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

具体的な設定方法

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

外観→ウィジェット

そしたら

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

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

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

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

以上で設定終了です。

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

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

ヒートマップの結果

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

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

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

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

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

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

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

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

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

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

ありがとうございました

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

外観・デザインをカスタマイズ

特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ

上記記事でまとめています

  • 吹き出し
  • フォント・文字サイズ
  • サイドバー
  • ファビコン(サイトアイコン)
  • ヘッダー
  • グローバルナビメニュー(ヘッダーメニュー)
  • Twitterシェア時に表示する画像の設定
  • 本文の幅・サイドバーの幅
  • トップページの表示形式
  • パンくずリスト
  • 行間と段落の間隔
  • 表(テーブル)
  • 目次
  • SNSシェアボタン・フォローボタン
  • Twitterの設置・連携
  • アイキャッチ画像
  • ブログカード
  • ヘッダー周りのアピール設定
  • フッター
  • モバイル(スマホ)表示メニュー
  • ボックスメニュー
  • 見出し
  • オリジナル画像の設定

コメント