目次の深度調整については、公式で対応されました。
今回は小ネタです。

ブログ記事の目次は必要?不要?ブログ初心者は自分のために設定しよう!|クロネのブログ講座
この記事では、ブログ記事の「目次」について、必要なのか? それとも不要なのか?について私の考え方を書いています。 「目次
こちらの記事を参考に、「Cocoon(コクーン)」での目次の表示をh2タグまでにするカスタマイズ方法です。
「目次は設置したいけど長くなってしまうのはイヤ…」という人は試してみてくださいね。
Cocoonの目次をh2まで表示させるためのサンプルCSS
CSS
.toc-list li ol{ display: none; }
……これだけです。
これで目次はスッキリ(CSSで強引に表示を消しているだけなのでGoogleにスパム判定される可能性もゼロとは言い切れませんが……(ページ内アンカーリンクなので大丈夫だとは思うけれど))。
これだけだと寂しいので装飾も
いちおう、JINをイメージしたつもりです……。
CSS
.toc-title{ font-size: 1.65rem; margin: 45px 40px 10px; padding-bottom: 32px; } .toc-list{ padding: 0 60px 40px !important; } .toc-list li{ list-style-type: none; font-size: 1rem; margin: 0.6rem 0 !important; } .toc-list li a{ transition-duration: 0.3s; } .toc-list li a:hover{ color: #939495; }
スマホ向けには別のCSSを当てましょう。
CSS
/*480px以下*/ @media screen and (max-width: 480px){ /*必要ならばここにコードを書く*/ .toc-title{ font-size: 1.45rem; margin: 35px 0; padding: 0 40px; } .toc-list{ padding: 0 25px 30px !important; } .toc-list li{ list-style-type: none; font-size: 1rem; margin: 0.6rem 0 !important; } }
以上です。
【支援お待ちしております!】
当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)
継続的な更新・サポートのためにご支援お願いいたします……!
▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています!
今後の記事執筆の励みになります!を支援のおかえしとして受け取ることができます。
その他のカスタマイズは下記ボタンから。
コメント
こんにちは。
こちらのサイトが推奨するCSSが神過ぎて良く使わせてもらっています。
さいとうさんのサイトの「目次」の横にあるフォントオーサムのようなアイコンはどうやって表示させているのでしょうか??
いきなりすみません(:_;)
コメントありがとうございます。
目次横のFontAwesomeアイコンについてですが、
当サイトでは以下のCSSで表示させています。
ご参考になれば幸いです。
できました!
誠にありがとうございます( *´艸`)!!