【Cocoon】目次をh2タグまでの表示にするCSSカスタマイズ【WordPress】

今回は小ネタです。

ブログ記事の目次は必要？不要？ブログ初心者は自分のために設定しよう！｜クロネのブログ講座

この記事では、ブログ記事の「目次」について、必要なのか？　それとも不要なのか？について私の考え方を書いています。 「目次」について、正解は１つではありません。 こういう考えもあるんだなと、参考にしていただければ幸いです。

kurone43.com

こちらの記事を参考に、「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カスタマイズの支援をお待ちしています！ - polca（ポルカ）

"今後の記事執筆の励みになります！"を支援のおかえしとして受け取ることができます。

polca.jp

その他のカスタマイズは下記ボタンから。