たった２ステップでCocoonの目次をオシャレにカスタマイズする方法を解説します。
デフォルトの目次だとダサイんだよな～。
という方は、是非見てみて下さいね。
コピペするだけ、たった２ステップで実装ができますから。
あわせて読みたい
WordPressテーマのおすすめランキング
【失敗しない】本当におすすめのWordpressテーマ６選｜ランキング・比較 「Wordpressテーマ選びで失敗したくない」というあなたへ。 人気テーマの中でも、本当におすす…
あわせて読みたい
WordPressテーマCocoonの使い方マニュアル【初心者向け】
WordPressテーマ「Cocoon」の使い方マニュアルを、初心者向けにまとめました。 Cocoon は素晴らしい無料Wordpressテーマです。 ここでは Cocoon のインストール方法から…
| テーマ名 | WordPressテーマ「Cocoon」 |
| 価格 | 無料 |
| 開発者 | わいひらさん（@MrYhira） |
タップできる目次
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;
}ステップ②：テーマファイルエディターに貼り付ける
あとは、先ほどコピーしたコードを「テーマファイルエディター」に貼り付けるだけです。
STEP
「外観」→「テーマファイルエディター」をクリック
STEP
(style.css)にコードを貼り付けて「ファイルを更新」
以上です。
出来たら、試しに見てみてくださいね～。
まとめ｜Cocoon目次をカスタマイズしてモチベUPへ！
はい、簡単でしたね。
たったこれだけで、Cocoonのダサイ目次をオシャレにカスタマイズできます。
シャレオツな目次をGETだぜ！
というわけで、ぜひ使ってみて下さいね。
あわせて読みたい
WordPressテーマCocoonの使い方マニュアル【初心者向け】
WordPressテーマ「Cocoon」の使い方マニュアルを、初心者向けにまとめました。 Cocoon は素晴らしい無料Wordpressテーマです。 ここでは Cocoon のインストール方法から…
コメント