サイト型トップページの作り方を公開しています!Check

Cocoonサイドバー目次を固定して垂直スクロールバーを設置する方法

アイキャッチ/サイドバー目次追従スクロール Cocoon
Cocoon
記事内に広告が含まれています
スポンサーリンク

Cocoonテーマでは、目次をサイドバーに固定して追従させることができます。しかし、目次の項目が多くなると、全ての項目が表示されずに使いにくくなることも。

この記事では、目次に垂直スクロールバーを設置してより使いやすくする方法をご紹介します。

Before
サイドバー目次追従スクロール
After
サイドバー目次追従スクロール
スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40
  • 2023年~有料記事公開
    • →累計300件(月間約20件)購入いただきました
はっちゃん
です
プロフィール

Cocoonで目次追従を設定する方法(簡単)

まず目次追従について。サイドバーに目次を表示したときに、記事を下にスクロールしても目次が固定されて表示される仕組みのことを言います。

記事が長いときなど、サイドバーの目次からすぐ見たいところへ移動できるので便利!

追従という言葉を聞くと難しそうな感じがしますが、実はこの目次追従を設定するのはCocoonだととても簡単です。

管理画面の外観→ウィジェット→サイドバースロール追従目次を追加するだけ!(ドラッグ&ドロップ)

この操作だけで追従するようになります。

追加した目次をクリックすると簡単な設定ができるようになっています。

  1. 表示するタイトル
  2. 表示する目次の階層
  3. 表示設定

スポンサーリンク

Cocoon目次追従が途中で見切れる原因

目次数が少ないときは問題ありませんが、目次の項目が多くなると全ての項目が表示されずにはみでた部分が見切れたようになってしまいます。

Cocoon目次追従にはプロパティposition:stickyが使われている

この現象が起こる原因として、サイドバーの目次追従にposition:stickyが使われていること。

CSSのプロパティのひとつです。

position:stickyの特徴
  • 画面をスクロールして目次の位置に到達するとそこに留まる
  • 長くなった続きの部分はある程度ページスクロールしてから、ようやく動きだして見えるようになる

このため、最後までスクロールされればきちんと目次の最後までは動いて全部が見えるのですが、はじめに目次の位置で留まった段階では途中で見切れているように見えてしまいます。

この動き方の特性上、見切れていると感じる人は多いはず…

対策

  1. 目次項目を少なくする
    • 記事の質を維持するために現実的ではない
  2. 表示する階層を制限する(例:h2のみ表示)
    • 目次階層を制限しても長くなる可能性あり
  3. 目次にスクロールバーを置く
    • 使いやすく、目次階層を変更する必要がない

見切れていると感じる対策として、③の目次の縦方向にスクロールバーを設置。目次に表示領域(高さ)を設定し、長い場合は目次内でスクロールができるようにします。

目次追従に垂直スクロールバーを設置するCSS

スクロールバーを設置するためにこちらのCSSを追加します。

.widget_toc{
	max-height: 800px; /* 目次の高さを調整 */
	overflow-y: auto; /* 垂直スクロールバーを有効にする */
}

子テーマのスタイルシートを使用します。

  1. 管理画面の「外観」から「テーマファイルエディター」をクリック
    • Cocoon Child: スタイルシート (style.css) のページが開きます
  2. 元から書いているコード(テーマ情報)は消さずにCSSを記述します
    • /* 子テーマ用のスタイルを書く*/から下の行に追加しましょう

子テーマ(Cocoon child)が選択されていることを確認します

CSS編集/スタイルシート

参考記事 Cocoonカスタマイズ/HTML・CSSの編集とワードプレスをバックアップする方法

このCSSコードは、目次の高さを800pxに制限し垂直スクロールバーを追加します。必要に応じて、max-heightの値を変更して、目次の高さを調整してください

  • overflow-y: auto; にすることで、max-height プロパティで設定した高さを超える場合にのみ垂直スクロールバーが表示されます。
  • 高さを調整しないとうまくスクロールバーが表示されないので注意しましょう。
スポンサーリンク

Cocoon目次追従に設置したスクロールバーの動作確認

このコードを追加すると、このようにサイドバー目次の右側に垂直スクロールバーが設置されます。

実際の動作確認は、目次数の多いこちらの記事をご覧ください。

スポンサーリンク

スクロールバーのスタイルを調整するカスタマイズ

必要に応じて、スクロールバーのスタイルもカスタマイズできます。

サイト内すべてのスクロールバーに適用

/* スクロールバーのスタイルを調整 */
::-webkit-scrollbar {
    width: 10px; /* スクロールバーの幅 */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーのトラックの背景色 */
}

::-webkit-scrollbar-thumb {
    background: #aaa; /* スクロールバーのつまみの色 */
}

::-webkit-scrollbar-thumb:hover {
    background: #999; /* スクロールバーのつまみのホバー時の色 */
}

サイドバー内目次に限定したスクロールバーに適用

上記CSSではサイト内すべてのスクロールバーに反映されるため、サイドバー目次に限定するときはセレクタ部分を変更してくださいね。

/* スクロールバーのスタイルを調整(サイドバー目次) */
.widget_toc::-webkit-scrollbar {
    width: 10px; /* スクロールバーの幅 */
}

.widget_toc::-webkit-scrollbar-track {
    background: #f1f1f1; /* スクロールバーのトラックの背景色 */
}

.widget_toc::-webkit-scrollbar-thumb {
    background: #aaa; /* スクロールバーのつまみの色 */
}

.widget_toc::-webkit-scrollbar-thumb:hover {
    background: #999; /* スクロールバーのつまみのホバー時の色 */
}
スポンサーリンク

まとめ

Cocoonテーマの目次に垂直スクロールバーを追加することで、目次の項目が多い場合でも使いやすくなります。CSSを使って簡単に実装できるのでぜひお試しください。

シェアはこちらから
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/

お買い物の際にぽちっとお願いします

Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

  1. MORI より:

    目次が長すぎて途切れる原因をわかりやすく伝えていただき、本当にありがとうございました!!
    ずっと悩んでたので助かりました<(_ _)>

    • はっちゃん はっちゃん より:

      > MORIさん
      はじめまして!
      ブログを見てくださりありがとうございます。
      記事がお役に立てたようで嬉しいです。

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