たった2ステップでCocoonの目次をオシャレにカスタマイズする方法を解説します。
![](https://hinakira.com/wp-content/uploads/2022/08/machiko悩み-1-150x150.png)
デフォルトの目次だとダサイんだよな~。
という方は、是非。
コピペするだけ、たった2ステップで実装ができますから。
また、目次をサイドバーにおいて追従させるカスタマイズ方法についても解説しますね。
![](https://hinakira.com/wp-content/uploads/2022/05/summary-of-how-to-use-cocoon-1.png)
![](https://hinakira.com/wp-content/uploads/2022/05/summary-of-how-to-use-cocoon-1.png)
テーマ名 | WordPressテーマ「Cocoon」 |
価格 | 無料 |
開発者 | わいひらさん(@MrYhira) |
Cocoon目次のカスタマイズ例
Cocoonの目次をカスタマイズしたものが下記です。
カスタマイズした目次
![Cocoon目次](https://hinakira.com/wp-content/uploads/2022/05/Cocoon目次-1.png)
![Cocoon目次](https://hinakira.com/wp-content/uploads/2022/05/Cocoon目次-1.png)
ちなみに、カスタマイズをしていないデフォルトの目次は下記ですね。
デフォルトの目次
![Cocoonのデフォルト目次](https://hinakira.com/wp-content/uploads/2022/05/Cocoon目次デフォルト-1.png)
![Cocoonのデフォルト目次](https://hinakira.com/wp-content/uploads/2022/05/Cocoon目次デフォルト-1.png)
カスタマイズした目次の方が良い方は、コピペするだけで実装できるので、ぜひ見ていってください。
Cocoon目次カスタマイズの流れ
Cocoonカスタマイズの流れは下記のとおりです。
- 目次デザインを選び、コードをコピーする
- テーマファイルエディターに貼り付ける
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/名称未設定のデザイン-10-150x150.png)
上記の2ステップだけなので、サクッとカスタムしちゃいましょうね。
ステップ①:目次デザインを選び、コードをコピーする
まずは、作りたい目次デザインを選び、コードをコピーしましょう。
ここでは、3つのカラーパターンを紹介します。
パターン①:ネイビー系カラー
![Cocoon目次](https://hinakira.com/wp-content/uploads/2022/05/Cocoon%E7%9B%AE%E6%AC%A1-1.png)
![Cocoon目次](https://hinakira.com/wp-content/uploads/2022/05/Cocoon%E7%9B%AE%E6%AC%A1-1.png)
/**目次**/
.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目次ブラウン系](https://hinakira.com/wp-content/uploads/2022/05/Cocoon目次ブラウン-1.png)
![Cocoon目次ブラウン系](https://hinakira.com/wp-content/uploads/2022/05/Cocoon目次ブラウン-1.png)
/**目次**/
.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目次ピンク](https://hinakira.com/wp-content/uploads/2022/05/Cocoon目次ピンク-1.png)
![Cocoon目次ピンク](https://hinakira.com/wp-content/uploads/2022/05/Cocoon目次ピンク-1.png)
/**目次**/
.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;
}
ステップ②:テーマファイルエディターに貼り付ける
あとは、先ほどコピーしたコードを「テーマファイルエディター」に貼り付けるだけです。
![テーマファイルエディター](https://hinakira.com/wp-content/uploads/2022/05/テーマファイルエディター-1-1024x758.png)
![テーマファイルエディター](https://hinakira.com/wp-content/uploads/2022/05/テーマファイルエディター-1-1024x758.png)
![コードの貼り付け](https://hinakira.com/wp-content/uploads/2022/05/コードの貼り付け-1-1-1024x562.png)
![コードの貼り付け](https://hinakira.com/wp-content/uploads/2022/05/コードの貼り付け-1-1-1024x562.png)
以上です。
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
![](https://hinakira.com/wp-content/uploads/2022/06/Blogアイコン2-1-1-150x150.png)
出来たら、試しに見てみてくださいね~。
Cocoonでサイドバー追従目次を作る方法
![サイドバー追従目次](https://hinakira.com/wp-content/uploads/2023/08/サイドバー追従目次-1-1024x607.png)
![サイドバー追従目次](https://hinakira.com/wp-content/uploads/2023/08/サイドバー追従目次-1-1024x607.png)
Cocoonでサイドバー追従目次を作る方法についても解説します。
ステップ①:WordPressの管理画面に行く
まず、WordPressの管理画面にログインしてください。
そして、「外観」→「ウィジェット」と進んでいきましょう。
ステップ②:ウィジェットで設定
「目次を選択」→「サイドバースクロール追従を選択」→「ウィジェットを追加」と進みます。
![目次のサイドバー追従を選択](https://hinakira.com/wp-content/uploads/2023/08/目次のサイドバー追従を選択-1-1024x622.png)
![目次のサイドバー追従を選択](https://hinakira.com/wp-content/uploads/2023/08/目次のサイドバー追従を選択-1-1024x622.png)
すると、下記のようにサイドバースクロール追従のところに目次が追加されます。
![目次が出現](https://hinakira.com/wp-content/uploads/2023/08/目次が出現-1-1024x630.png)
![目次が出現](https://hinakira.com/wp-content/uploads/2023/08/目次が出現-1-1024x630.png)
ステップ③:詳細設定
目次のプルダウンメニューを選択し、タイトルと目次表示の深さ(例:H3見出しまで)を決めて保存します。
![目次の表示設定](https://hinakira.com/wp-content/uploads/2023/08/目次の表示設定-1-1024x635.png)
![目次の表示設定](https://hinakira.com/wp-content/uploads/2023/08/目次の表示設定-1-1024x635.png)
これで、以下のようなサイドバー追従目次が設定できました。
![サイドバー追従目次](https://hinakira.com/wp-content/uploads/2023/08/サイドバー追従目次-1-1024x607.png)
![サイドバー追従目次](https://hinakira.com/wp-content/uploads/2023/08/サイドバー追従目次-1-1024x607.png)
まとめ|Cocoon目次をカスタマイズしてグッとおしゃれに!
はい、簡単でしたね。
たったこれだけで、Cocoonのダサイ目次をオシャレにカスタマイズできます。
![](https://hinakira.com/wp-content/uploads/2023/08/ひなきら風-1.png)
![](https://hinakira.com/wp-content/uploads/2023/08/ひなきら風-1.png)
![](https://hinakira.com/wp-content/uploads/2023/08/ひなきら風-1.png)
シャレオツな目次をGETだぜ!
というわけで、ぜひ使ってみて下さいね。
![](https://hinakira.com/wp-content/uploads/2022/05/summary-of-how-to-use-cocoon-1.png)
![](https://hinakira.com/wp-content/uploads/2022/05/summary-of-how-to-use-cocoon-1.png)
コメント