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

デフォルトの目次だとダサイんだよな~。
という方は、是非見てみて下さいね。
コピペするだけ、たった2ステップで実装ができますから。
あわせて読みたい



初心者向けのWordPressテーマおすすめ比較ランキング
【ブログ向け】WordPressテーマおすすめ比較ランキング9選 「テーマ選びで絶対に失敗したくない」というあなたへ。 ブログ向けとして「本当におすすめ」なWordPressテ…
あわせて読みたい



WordPressテーマCocoonの使い方マニュアル【初心者向け】
WordPressテーマ「Cocoon」の使い方マニュアルを、初心者向けにまとめました。 Cocoon は素晴らしい無料Wordpressテーマです。 ここでは Cocoon のインストール方法から…
テーマ名 | WordPressテーマ「Cocoon」 |
価格 | 無料 |
開発者 | わいひらさん(@MrYhira) |
見たいところに飛べる目次
Cocoon目次のカスタマイズ例
Cocoonの目次をカスタマイズしたものが下記です。
カスタマイズした目次


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


カスタマイズした目次の方が良い方は、コピペするだけで実装できるので、ぜひ見ていってください。
Cocoon目次カスタマイズの流れ
Cocoonカスタマイズの流れは下記のとおりです。
- 目次デザインを選び、コードをコピーする
- テーマファイルエディターに貼り付ける



上記の2ステップだけなので、サクッとカスタムしちゃいましょうね。
ステップ①:目次デザインを選び、コードをコピーする
まずは、作りたい目次デザインを選び、コードをコピーしましょう。
ここでは、3つのカラーパターンを紹介します。
パターン①:ネイビー系カラー


/**目次**/
.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;
}
ステップ②:テーマファイルエディターに貼り付ける
あとは、先ほどコピーしたコードを「テーマファイルエディター」に貼り付けるだけです。
STEP
「外観」→「テーマファイルエディター」をクリック


STEP
(style.css)にコードを貼り付けて「ファイルを更新」


以上です。



出来たら、試しに見てみてくださいね~。
まとめ|Cocoon目次をカスタマイズしてモチベUPへ!
はい、簡単でしたね。
たったこれだけで、Cocoonのダサイ目次をオシャレにカスタマイズできます。



シャレオツな目次をGETだぜ!
というわけで、ぜひ使ってみて下さいね。
あわせて読みたい



WordPressテーマCocoonの使い方マニュアル【初心者向け】
WordPressテーマ「Cocoon」の使い方マニュアルを、初心者向けにまとめました。 Cocoon は素晴らしい無料Wordpressテーマです。 ここでは Cocoon のインストール方法から…
コメント