無料イラストなら【イラストAC】
無料会員登録

Cocoon目次追従/サイドバー固定の目次に垂直スクロールバーを設置する(CSS)

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

今回は目次部分の操作性を改善するカスタマイズ。

具体的にはサイドバー目次に垂直スクロールバーをつけていきます。

実装したきっかけは当ブログを見てくださった方からお問い合わせがあったこと。

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

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

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

ということで改善していきます。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで複数サイトを運営しています
はっちゃん
です
プロフィール

Cocoon目次追従とは

まず目次追従について。

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

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

スポンサーリンク

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

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

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

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

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

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

スポンサーリンク

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

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

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

スポンサーリンク

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

この現象が起こる原因として、

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

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

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

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

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

スポンサーリンク

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

ここでの対策として、

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

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

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

Cocoon目次追従にスクロールバーを設置する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(画面いっぱいの高さ)からヘッダーの高さをマイナスし調整した高さを指定。ここはサイトに合わせてお好みの高さで構いません。

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

Cocoon目次追従にスクロールバーが設置されました

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

\このように動きます/

設定した高さを超える場合にのみ、垂直スクロールバーを表示する/方法1

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

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

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

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

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

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

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

スクロールバーを調整する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 ; /* ツマミの色と背景 */
}

【これで解決!】設定した高さを超える場合にのみ、垂直スクロールバーを表示/方法2

ここまで長々と書きましたが…

overflow-y: auto; にすることで、max-height プロパティで設定した高さを超える場合にだけ垂直スクロールバーを表示するように指定できるんです。

/*max-heightを超える目次にのみスクロールバーを表示する*/
.widget_toc{
	overflow-y:auto;
	max-height: calc(100vh - 150px); /* 目次の高さ上限(お好みで設定)*/
}

スクロールバーの細かい設定をしなくても、これだけでmax-heightまで高さの満たない目次に垂直スクロールバーは表示されません。

後からoverflow-y:auto;の便利さに気付いたので、記事最後の追記という形になりました。

これでスクロールバー問題は解決ですね。

さいごに

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

しっかり動作していました。色々学ばせていただきます。

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

ユーザビリティを上げ、見やすいブログ作りにご活用ください。

Comment

  1. MORI より:

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

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

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

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