> 12コの有料テーマを使うマニアが大評判のSWELLを徹底レビュー!

Cocoonの目次をカスタマイズ|たった2ステップでオシャレに!

Cocoon目次のカスタマイズ

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

マチコ

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

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

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

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

Cocoonの使い方マニュアル

テーマ名WordPressテーマ「Cocoon」
価格無料
開発者わいひらさん(@MrYhira
タップできる目次

Cocoon目次のカスタマイズ例

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

カスタマイズした目次

Cocoon目次

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

デフォルトの目次

Cocoonのデフォルト目次

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

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

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

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

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

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

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

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

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

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;
}

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

Cocoon目次ブラウン系
/**目次**/
.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;
}

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

Cocoon目次ピンク
/**目次**/
.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;
}

ステップ②:テーマファイルエディターに貼り付ける

あとは、先ほどコピーしたコードを「テーマファイルエディター」に貼り付けるだけです。

STEP
「外観」→「テーマファイルエディター」をクリック
テーマファイルエディター
STEP
 (style.css)にコードを貼り付けて「ファイルを更新」
コードの貼り付け

以上です。

ヒナキラ

出来たら、試しに見てみてくださいね~。

まとめ|Cocoon目次をカスタマイズしてモチベUPへ!

はい、簡単でしたね。

たったこれだけで、Cocoonのダサイ目次をオシャレにカスタマイズできます。

ヒナキラ

シャレオツな目次をGETだぜ!

というわけで、ぜひ使ってみて下さいね。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

タップできる目次