どうも!初めましての方は初めまして、初心者のWebサイト勉強のとみーです!
WordPress の無料テーマ Cocoon のサイドバーはウィジェットとして設置できて、スクロール追従の設定も簡単にできるので非常に便利ですよね。
![スクロール追従目次](https://www.beginner-blogger.com/wp-content/uploads/2021/10/38243fdbf3f4f7cb1e5878875f23a9cc-2.gif)
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2021/08/o621_1.png)
読者にとっての使い勝手も良いので多くの方が設置していると思います。
参考 サイドバーへの目次設置方法は、こちらの記事をご覧ください。
しかし、見出しの多い記事を作成した場合、
画面内に目次が収まりきらなくなってしまう
という問題があります。
![目次が切れて全部見えない](https://www.beginner-blogger.com/wp-content/uploads/2021/10/5797231fadc863084ec88d2e120a5052.png)
記事を読んでいる途中でも全体の構造がわかった方が読みやすいため、サイドバーの目次はスクロール追従(固定表示)する方がおすすめなのですが、そうすると大きすぎる目次の下側はずっと表示されずに切れたままになってしまいます。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2021/08/o622_4.png)
かといって、スクロール追従にしなければ目次を確認するためにわざわざページの上まで戻らなければいけなくなり、使い勝手が悪いです。
スクロールできるサイドバー目次の完成イメージ
今回のカスタマイズをすると、サイドバーに表示される目次の高さに上限が設定され、目次の大きさが上限を超えた場合スクロールできるようになります。
![](https://www.beginner-blogger.com/wp-content/uploads/2021/10/95e4122d03abf5416225225085822d17.png)
上限の大きさはお好みで自由に変更できます。
Cocoon のサイドバー目次のコピペカスタマイズ方法
![コピペでカスタマイズ](https://www.beginner-blogger.com/wp-content/uploads/2021/10/133166bd0cae1860f36885d5816ff57d.png)
今回のカスタマイズは、
するだけです。
style.css のバックアップを取っておこう
今回のカスタマイズでは、
というファイルを操作します。
そのため、万が一が起きても元に戻せるように、カスタマイズ前に忘れずにバックアップを取っておきましょう。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
1番簡単なのはファイルの中身をコピーして、メモ帳やテキストエディタに保存しておくやり方です。
CSS コードのコピペ
CSS コードのコピペは次の2ステップです。
- STEP1style.css を開く
管理画面サイドメニュー「外観」→「テーマエディター」→「style.css」
- STEP2style.css にコードをコピぺする
style.css を開く
WordPress の管理画面サイドメニューの「外観」から「テーマエディター」を開きましょう。
![外観→テーマエディター](https://www.beginner-blogger.com/wp-content/uploads/2021/10/4443aaef64bac91a15fd09aec6e2d8a0.png)
初期設定では「Cocoon Child」が選択されており、「style.css」が開いてあるはずです。
![style.cssを開く](https://www.beginner-blogger.com/wp-content/uploads/2021/10/c47c77eabccbf6dcbd5b7c2dbacd3165.png)
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
違うものが選択されている場合は、それぞれ「Cocoon Child」、「style.css」を選んでください。
style.css にコードをコピペする
/* はみ出た分をスクロール可能にするコード */
.sidebar #toc-2 .toc-content {
overflow-y: scroll; /* 縦スクロールを可能に */
max-height: 390px; /* 目次の高さ上限 */
}
![max-heightについて](https://www.beginner-blogger.com/wp-content/uploads/2021/10/2b9835ba0eaa66e5f11fd20c78e85a52.png)
目次の高さは max-height によって定められています。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
実際に画面を確認し、もう少し大きくしたい場合は 390px よりも大きくし、もう少し小さくしたい場合は 390px よりも小さくしましょう。
基本的なカスタマイズは以上になります。
目次がスクロールできることを明確にしたい場合
上のカスタマイズでは、目次がスクロールできることが伝わりにくい場合があります。
![スクロールできることがわかる](https://www.beginner-blogger.com/wp-content/uploads/2021/10/b16fa2eb2ee4328cda8cc70dba615cfe.png)
目次の1番下が途中で切れていれば、続きがあると思ってスクロールしてもらえる可能性は高いです。
![スクロールできることがわからない](https://www.beginner-blogger.com/wp-content/uploads/2021/10/52b8f8de7403b395fb2ddd93e2536ab7.png)
しかし、目次の1番下が綺麗に区切られてしまうと続きがあるように見えず、スクロールできることが伝わりません。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2020/07/o619_1-1-e1595972856273.png)
そこで、スクロールできることを示すためにスクロールバーを常に表示させましょう。
常に表示されるスクロールバーを付けたサイドバー目次の完成イメージ
![常にスクロールバー表示](https://www.beginner-blogger.com/wp-content/uploads/2021/10/1b327fc9df56450a46fe22559fe306a0.png)
目次の高さが max-height で決めた上限を超えている場合、常にスクロールバーが表示されるようになります。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2021/08/o621_1.png)
スクロールできることがひと目でわかりますね!
スクロールバーを常に表示するカスタマイズ方法
先ほどと style.css にコピペしたコードの下に、次のコードをコピペします。
/* スクロールバーを常に表示 */
.sidebar .toc-content::-webkit-scrollbar {
-webkit-appearance: none; /* スタイルの初期化を禁止 */
width: 8px; /* スクロールバーの横幅 */
}
/* スクロールできるツマミ部分 */
.sidebar .toc-content::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .4); /* ツマミの色 */
}
![スクロールバーの設定](https://www.beginner-blogger.com/wp-content/uploads/2021/10/5b927854c93b495c0287b44e49cae69f.png)
スクロールバーの横幅は width で、実際にスクロールするツマミ部分の色は background-color で変更できます。
コピペカスタマイズは以上になります。
まとめ
![お疲れさまでした](https://www.beginner-blogger.com/wp-content/uploads/2021/10/32e93eff8128e70eb6acc9414a2b0c24.png)
今回は、サイドバーに設置した目次をスクロール可能にして画面内に収めるカスタマイズをご紹介しました。
![とみー](https://www.beginner-blogger.com/wp-content/uploads/2021/08/o621_1.png)
目次が大きくなりすぎてスクロール追従を諦めていた方や、あまり気にせずスクロール追従にしていた方は参考にしてみてください。
他にもサイドバーの使い勝手を良くするカスタマイズ方法を別の記事でまとめてあるので、気になる方はぜひどうぞ!
コメント