Cocoon目次追従/サイドバーの目次に縦方向のスクロールバーを設置する(CSS)

アイキャッチ/目次追従カスタマイズ
お知らせ

2/2(木)09:00 - 2/5(日)23:59
オトクなお買い物のチャンス!
Amazonのタイムセール祭り、
開催されています!

\ポイントアップキャンペーンも同時開催/
この記事はWordPressのテーマCocoon(コクーン)を対象としたカスタマイズになります。

今回は目次についてのカスタマイズです。

当ブログを見てくださった方からお問い合わせがありました。

サイドバーの目次追従ですが、目次が長い場合に下の方が見切れていて勿体無いです。スクロールして最後まで目次が見れるようにしたほうが利便性高いかもしれません。

読者の方より

どんな状態なのかをパソコンで確認してみると…

確かに途中からサイドバー目次が一旦固定されてはみ出た部分が見えなくなってる!

ということで改善したいと思います。

この記事で分かること
  1. Cocoonサイドバーの目次を追従させる方法
  2. サイドバーの目次に縦スクロールバーをつける方法(CSS)
  3. スクロールバーのデザインを調整する方法(CSS)
ここを解説
ウサギ

目次追従とは

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

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

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

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

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

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

追加した目次をクリックすると簡単な設定をおこなうことができます。

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

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

ここで冒頭の問題に戻るのですが…

記事が短く目次数が少ないときは問題ありませんが、表示する目次が多いと途中で見切れてしまうんですよね。

目次追従にはposition:stickyが使われている

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

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

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

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

対策/縦方法にスクロールバーを設置する

ここでの対策として、

  1. 記事を短くする
  2. 表示する階層を制限する(例:h2のみ表示)
  3. 目次にスクロールバーを置く

  1. は現実的ではなく階層を制限しても長くなる場合を想定して、今回は目次の縦方向にスクロールバーを設置してみることに。

目次に表示領域(高さ)を設定し、長い場合は目次内でスクロールができるようにします。

スクロールバーを設置するCSS

こちらのCSSを追加しました。

CSSを編集するときは子テーマを使用しましょう。
外観→テーマファイルエディター→Cocoon Child: スタイルシート (style.css)に記述します。

.widget_toc{
	overflow-y:scroll;/*縦方向スクロールを設置*/
	max-height: calc(100vh - 150px); /* 目次の高さ上限*/
}

.widget_toc(サイドバーの見出し)に

  • overflow-y:scroll;→縦方向にはみ出た分、スクロールバーを設置する
  • max-height:calc(100vh – 150px);→100vh(画面いっぱいの高さ)からヘッダーの高さをマイナスし調整した高さを指定

高さを調整しないとうまくスクロールバーが表示されないので注意しよう

スクロールバーが設置されました

このコードを追加したところサイドバー目次の右側に縦方向スクロールバーが設置され、動作確認もできました。

スクロールできるときにだけスクロールバーを表示させるための調整

ここまでで完成ですが少し調整を追加します。

スクロールバーが常時見えてしまう

目次数が少なくスクロールする必要がないときも設置したスクロールバーの背景色が見えてしまっているんですよね…

デザイン的にはスクロールしないときには必要ないので、この薄いグレーの背景色は消して、スクロールするときに動かすつまみの部分だけ残してみることに。

対策/スクロールが必要なときの動かす部分のみに背景色をつける

そうすることで目次項目が少ない記事からスクロールバーは消えて、スクロールが必要な記事だけに表示される状態となりました。

スクロールできることが分かります

スクロールバーを調整するCSS

今回使用するコードはこちらです。
(参考にさせていただいたサイトはこちら

/*スクロールバー調整*/
.widget_toc::-webkit-scrollbar {
	width: 10px;/*幅*/
}
.widget_toc::-webkit-scrollbar-track {
	background: transparent;/*背景色を消す*/
}
.widget_toc::-webkit-scrollbar-thumb {
	background: #ccc;/*可動部のみ背景色を付ける*/
	border-radius: 10px;
}

このCSSは対応ブラウザが限られています。
「webkit」を採用しているブラウザ(Google ChromeやSafariなど)のみ対応しており、Microsoft EdgeやFirefoxではブラウザの標準仕様のままですのでご注意ください。

さいごに

読者の方へご連絡したところ、問題なく動作していることを確認していただきました。

こんにちは! 仕事が早い。笑 しっかり動作していましたー! こちらこそ色々学ばせていただきまーす!

ユーザビリティ向上のためにこういったご意見はためになります。できる範囲で改善したいのでまた何かあれば教えてください!

直接こういったご意見をいただけるのはありがたいです♪

見やすいブログを目指す上で、できる限り利便性を上げていきたいと思います。

それではまた。

カスタマイズが効かないとき

たった一文字の表記ミスでデザインが崩れたり効かなかったりするので、下記の点を確認してみてください。

  • コードは半角英数字になっているか(全角は使えません)
  • 前後や余白に余計な全角スペース、文字等が入っていないか
  • CSSクラスの前に .(ドット)が付いているか
  • CSSコードは{ }、メモ書きはきちんと/**/で囲んでいるか
  • 他に重複しているコードはないか(下に書いたコードが優先されます)


事前にバックアップをとり、カスタマイズは慎重に行いましょう。

ブログがもっと楽しくなる

基礎、応用編と分かれていて分かりやすい内容。CSSの理解を深めたい人へオススメです!!

カスタマイズ
お役に立てる情報をお届けします
 
この記事を書いた人
はっちゃん

2人の息子(中1、小3)を育てる40代主婦。
子供達の発達障害、次男の難病(ネフローゼ症候群)と向き合う日々。趣味として楽しんでいるCocoonのブログカスタマイズ、暮らしの中で役に立つこと、家族での海釣り記録(姉妹サイト)を主に発信しています。

\Follow/
\Follow/
Turicco

Comment

  1. MORI より:

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

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

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

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