【Cocoon】大きすぎるサイドバー目次を画面内に収める-コピペカスタマイズ

【Cocoon】大きすぎるサイドバー目次を画面内に収めるコピペカスタマイズテーマ
スポンサーリンク

どうも!初めましての方は初めまして、初心者のWebサイト勉強のとみーです!

WordPress の無料テーマ Cocoon のサイドバーはウィジェットとして設置できて、スクロール追従の設定も簡単にできるので非常に便利ですよね。

スクロール追従目次
サイドバー目次(スクロール追従)
とみー
とみー

読者にとっての使い勝手も良いので多くの方が設置していると思います。

しかし、見出しの多い記事を作成した場合、

画面内に目次が収まりきらなくなってしまう

という問題があります。

目次が切れて全部見えない

記事を読んでいる途中でも全体の構造がわかった方が読みやすいため、サイドバーの目次はスクロール追従(固定表示)する方がおすすめなのですが、そうすると大きすぎる目次の下側はずっと表示されずに切れたままになってしまいます。

とみー
とみー

かといって、スクロール追従にしなければ目次を確認するためにわざわざページの上まで戻らなければいけなくなり、使い勝手が悪いです。

そこで今回は、

  • サイドバーの目次の縦幅を固定し
  • はみ出た部分を個別にスクロールできるようにする

カスタマイズ方法をまとめました!

スポンサーリンク

スクロールできるサイドバー目次の完成イメージ

今回のカスタマイズをすると、サイドバーに表示される目次の高さに上限が設定され、目次の大きさが上限を超えた場合スクロールできるようになります。

Cocoon ではスマホの場合サイドバーが表示されません。そのため、今回のカスタマイズは PC 版限定で動作します。

上限の大きさはお好みで自由に変更できます。

スポンサーリンク

Cocoon のサイドバー目次のコピペカスタマイズ方法

コピペでカスタマイズ

今回のカスタマイズは、

カスタマイズ手順
  • CSS コードをコピペ

するだけです。

サイドバーに目次を設置していない方は、こちらの記事を参考にまずは設置しましょう。

style.css のバックアップを取っておこう

今回のカスタマイズでは、

  • style.css

というファイルを操作します。

このファイルはサイトのデザインに関係するため、設定を間違えるとレイアウトが崩れる可能性があります!

そのため、万が一が起きても元に戻せるように、カスタマイズ前に忘れずにバックアップを取っておきましょう。

とみー
とみー

1番簡単なのはファイルの中身をコピーして、メモ帳やテキストエディタに保存しておくやり方です。

CSS コードのコピペ

CSS コードのコピペは次の2ステップです。

  • STEP1
    style.css を開く

    管理画面サイドメニュー「外観」→「テーマエディター」→「style.css

  • STEP2
    style.css にコードをコピぺする

style.css を開く

WordPress の管理画面サイドメニューの「外観」から「テーマエディター」を開きましょう。

外観→テーマエディター

初期設定では「Cocoon Child」が選択されており、「style.css」が開いてあるはずです。

style.cssを開く
とみー
とみー

違うものが選択されている場合は、それぞれ「Cocoon Child」、「style.css」を選んでください。

style.css にコードをコピペする

style.css
/* はみ出た分をスクロール可能にするコード */
.sidebar #toc-2 .toc-content {
	overflow-y: scroll; /* 縦スクロールを可能に */
	max-height: 390px; /* 目次の高さ上限 */
}
max-heightについて

目次の高さは max-height によって定められています。

とみー
とみー

実際に画面を確認し、もう少し大きくしたい場合は 390px よりも大きくし、もう少し小さくしたい場合は 390px よりも小さくしましょう。

基本的なカスタマイズは以上になります。

スポンサーリンク

目次がスクロールできることを明確にしたい場合

上のカスタマイズでは、目次がスクロールできることが伝わりにくい場合があります。

スクロールできることがわかる

目次の1番下が途中で切れていれば、続きがあると思ってスクロールしてもらえる可能性は高いです。

スクロールできることがわからない

しかし、目次の1番下が綺麗に区切られてしまうと続きがあるように見えず、スクロールできることが伝わりません

とみー
とみー

そこで、スクロールできることを示すためにスクロールバー常に表示させましょう。

常に表示されるスクロールバーを付けたサイドバー目次の完成イメージ

常にスクロールバー表示

目次の高さが max-height で決めた上限を超えている場合、常にスクロールバーが表示されるようになります。

とみー
とみー

スクロールできることがひと目でわかりますね!

スクロールバーを常に表示するカスタマイズ方法

先ほどと style.css にコピペしたコードの下に、次のコードをコピペします。

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); /* ツマミの色 */
}
スクロールバーの設定

スクロールバーの横幅は width で、実際にスクロールするツマミ部分の色は background-color で変更できます。

コピペカスタマイズは以上になります。

まとめ

お疲れさまでした

今回は、サイドバーに設置した目次をスクロール可能にして画面内に収めるカスタマイズをご紹介しました。

とみー
とみー

目次が大きくなりすぎてスクロール追従を諦めていた方や、あまり気にせずスクロール追従にしていた方は参考にしてみてください。

他にもサイドバーの使い勝手を良くするカスタマイズ方法を別の記事でまとめてあるので、気になる方はぜひどうぞ!

コメント

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