Cocoonの目次をカスタマイズ｜たった２ステップでオシャレに！

2022 5/15

2022年5月15日 2022年5月15日

たった２ステップでCocoonの目次をオシャレにカスタマイズする方法を解説します。

マチコ

デフォルトの目次だとダサイんだよな～。

という方は、是非見てみて下さいね。

コピペするだけ、たった２ステップで実装ができますから。

▼WordPressテーマおすすめランキング▼

Cocoon目次のカスタマイズ例

Cocoonの目次をカスタマイズしたものが下記です。

カスタマイズした目次

ちなみに、カスタマイズをしていないデフォルトの目次は下記ですね。

デフォルトの目次

カスタマイズした目次の方が良い方は、コピペするだけで実装できるので、ぜひ見ていってください。

Cocoon目次カスタマイズの流れ

Cocoonカスタマイズの流れは下記のとおりです。

目次デザインを選び、コードをコピーする
テーマファイルエディターに貼り付ける

ヒナキラ

上記の２ステップだけなので、サクッとカスタムしちゃいましょうね。

ステップ①：目次デザインを選び、コードをコピーする

まずは、作りたい目次デザインを選び、コードをコピーしましょう。

ここでは、３つのカラーパターンを紹介します。

パターン①：ネイビー系カラー

/**目次**/
.toc {
  display: block;
  padding: 0px;
  max-width: 600px;
  border: 1.2px #708090 solid !important;
  font-family: 'Noto Sans JP', sans-serif;
}
.toc-title {
  position: relative;
  padding: 10px 0;
  background: #708090;
  color: #fff;
  font-weight: bold;
}
.toc .toc-content {
  padding: 15px 20px;
  background-color: #ffffff;
}
.toc-list > li li a {
  font-weight: normal;
  font-size: 95%;
  color: #696969;
  margin-left: 0px;
}

パターン②：ブラウン系カラー

/**目次**/
.toc {
  display: block;
  padding: 0px;
  max-width: 600px;
  border: 1.2px #d2b48c solid !important;
  font-family: 'Noto Sans JP', sans-serif;
}
.toc-title {
  position: relative;
  padding: 10px 0;
  background: #d2b48c;
  color: #fff;
  font-weight: bold;
}
.toc .toc-content {
  padding: 15px 20px;
  background-color: #ffffff;
}
.toc-list > li li a {
  font-weight: normal;
  font-size: 95%;
  color: #696969;
  margin-left: 0px;
}

パターン③：ピンク系カラー

/**目次**/
.toc {
  display: block;
  padding: 0px;
  max-width: 600px;
  border: 1.2px #fa8072 solid !important;
  font-family: 'Noto Sans JP', sans-serif;
}
.toc-title {
  position: relative;
  padding: 10px 0;
  background: #fa8072;
  color: #fff;
  font-weight: bold;
}
.toc .toc-content {
  padding: 15px 20px;
  background-color: #ffffff;
}
.toc-list > li li a {
  font-weight: normal;
  font-size: 95%;
  color: #696969;
  margin-left: 0px;
}