Cocoon目次追従／サイドバー固定の目次に縦方向のスクロールバーを設置する（CSS）

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

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

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

読者の方より

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

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

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

この記事で分かること

1. Cocoonサイドバーの目次を追従させる方法
2. サイドバーの目次に縦スクロールバーをつける方法（CSS）
3. スクロールバーのデザインを調整する方法（CSS）

ここを解説

目次追従とは

まず目次追従について。

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

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

Cocoonで目次追従を設定する方法（簡単）

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

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

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

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

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

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

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

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

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

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

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

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

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

ここでの対策として、

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

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

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

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

.widget_toc（サイドバーの見出し）に

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

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

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

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

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

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

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

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

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

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

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

今回使用するコードはこちらです。
参考サイト　CSSでスクロールバーのデザインを変更する方法

Google ChromeやSafariなど「webkit」を採用しているブラウザ

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

Firefoxの場合はこちらが有効

Firefoxは、次のように記述するとスクロールバーのデザインが変更できます。

/* スクロールバー調整（Firefox）*/
.widget_toc{
   scrollbar-width: thin;/* スクロールバーの太さ（細く）、autoでも可*/
   scrollbar-color:  #ccc transparent ; /* ツマミの色と背景 */
}

• スクロールバーの幅を変えたり細かい調整はできません
• 目次部分限定ではなくサイト全体のスクロールバーに適用させる場合はセレクタ部分（.widget_toc）をhtmlに変更します。

html{
   scrollbar-width: thin;/* スクロールバーの太さ */
   scrollbar-color:  #ccc transparent ; /* ツマミの色と背景 */
}

さいごに

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

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

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

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

見やすいブログと利便性を上げたい方はご活用ください。

それではまた。