たった２ステップで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;
}ステップ②：テーマファイルエディターに貼り付ける
あとは、先ほどコピーしたコードを「テーマファイルエディター」に貼り付けるだけです。
以上です。
ヒナキラ出来たら、試しに見てみてくださいね～。
Cocoonでサイドバー追従目次を作る方法
Cocoonでサイドバー追従目次を作る方法についても解説します。
ステップ①：WordPressの管理画面に行く
まず、WordPressの管理画面にログインしてください。
そして、「外観」→「ウィジェット」と進んでいきましょう。
ステップ②：ウィジェットで設定
「目次を選択」→「サイドバースクロール追従を選択」→「ウィジェットを追加」と進みます。
すると、下記のようにサイドバースクロール追従のところに目次が追加されます。
ステップ③：詳細設定
目次のプルダウンメニューを選択し、タイトルと目次表示の深さ（例：H3見出しまで）を決めて保存します。
これで、以下のようなサイドバー追従目次が設定できました。
まとめ｜Cocoon目次をカスタマイズしてグッとおしゃれに！
はい、簡単でしたね。
たったこれだけで、Cocoonのダサイ目次をオシャレにカスタマイズできます。
ヒナキラシャレオツな目次をGETだぜ！
というわけで、ぜひ使ってみて下さいね。
コメント