【Cocoon】目次の見出しがはみ出す場合の対策方法【WordPress】

はじめに

今回はWordPressの目次がはみ出す場合の対策方法について紹介します。

Cocoonはh2タグやh3タグを自動で目次表示してくれるので便利ですよね。

ただしh2タグやh3タグの文字数があまりにも長い場合ですと目次表示のデザインが崩れてしまいます。

cssを少し編集するだけでh2タグやh3タグの文字数が長くなった場合でもデザインが崩れずに表示させることができるので参考にしてください。

対象者

それでは説明に移ります。

目指す形は以下です。

変更前

変更前の状態ではサイドバーまで目次がはみ出してしまっていますね。

変更後

変更後は目次がきれいに表示されています。

それでは目次をカスタマイズしていきましょう。

目次をカスタマイズするにはstyle.cssを編集していきます。

style.cssの編集方法は以下参考にしてください。

本記事ではWordPressのVer.5.8で説明していきます。

Ver.5.8より低いバージョンでは指定方法が異なりますのでご注意ください。

それではstyle.cssを編集していきましょう。

.toc {
  display: block;
}

上記編集をすることで目次の表示が変更されます。

変更が完了したらサイト側を確認しましょう。

以下のようになっているはずです。

目次がきれいに表示されました。

以上WordPressの目次がはみ出す場合の対策方法について紹介しました。

いかがだったでしょうか。

cssを少し編集するだけでh2タグやh3タグの文字数が長くなった場合でもデザインが崩れずに表示させることができるので参考にしてください。