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

Cocoonカスタマイズ
目次の深度調整については、公式で対応されました。

今回は小ネタです。

ブログ記事の目次は必要?不要?ブログ初心者は自分のために設定しよう!|クロネのブログ講座
この記事では、ブログ記事の「目次」について、必要なのか? それとも不要なのか?について私の考え方を書いています。 「目次

こちらの記事を参考に、「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カスタマイズの支援をお待ちしています!
今後の記事執筆の励みになります!を支援のおかえしとして受け取ることができます。

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

コメント

  1. こんにちは。
    こちらのサイトが推奨するCSSが神過ぎて良く使わせてもらっています。
    さいとうさんのサイトの「目次」の横にあるフォントオーサムのようなアイコンはどうやって表示させているのでしょうか??
    いきなりすみません(:_;)

    • コメントありがとうございます。
      目次横のFontAwesomeアイコンについてですが、
      当サイトでは以下のCSSで表示させています。

      .toc .toc-title::before{
      	font-family: FontAwesome;
      	content: '\f0f6';
      	margin-right: .5em;
      }

      ご参考になれば幸いです。

  2. できました!
    誠にありがとうございます( *´艸`)!!