【Cocoon】目次をカスタマイズ【コピペでスマホでもキマる！】

某全国紙新聞社でスポーツ記者として、オリンピックやプロ野球、Jリーグなどを担当してきた、とちです。真面目にかるく、わかりやすくが執筆信条。現在は編集者として、日々のスポーツ紙の制作をしています。

Cocooonは完全レスポンシブ対応の最強の無料テーマですが、スマホで見るときに気にかかっていたことがありました。

それが、目次。

Cocoonの場合、プラグインの追加なしに目次を自動的に表示されるよう設定できます。

「Cocoon設定」を開き、ズラリと並んだタグから「目次」を開くと

かなり細かい設定まで、チェックの入れ外しだけでできちゃいます。

ですが、ナンバー表示を「数字（デフォルト）」に設定し、スマホで見ると

このように、数字がほぼ縦に一直線に並んでしまってH2とH3の判別がわかりづらくなっていました。

なので、今回は目次のデザインごとカスタマイズしちゃいます！

完成形はPC表示だと、こんな感じ。

スマホ表示だと、こんな感じ。

だいぶスッキリしたんじゃないかな。

不安な人

また難しいプログラミングとかの知識がいるんじゃないの？

無問題です！不安な人！

ブログ歴2カ月ちょっと、htmlやcssの知識もほぼない私でもできました。

【20年3月追記】※その後、本記事の下記の見出しの形に変えました。

さぁレッツ、カスタマイズ！！

Cocoonの目次をカスタマイズ【コピペで簡単！】

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

大きな流れとしては

Cocoonの目次設定でベースを作る
H2とH3の表示に違いをつける【コピペ！】
目次の横にアイコンを挿入【コピペ！】
レスポンシブを調整していく

てな感じです。

①Cocoon設定の目次でベースを設定しておく

目次表示の深さ：H3見出しまで
目次ナンバーの表示：数字(デフォルト)

②Ccocoon見出しH2＆3の表示に違いをつける【コピペ！】

H2とH3に強弱を持たせるために

H3フォントを小さく、薄く
H3の前の数字を消して「・」に変更

cssコードは、その都度より、わかりやすい上に作業の手間も少ないので③が終わったあとにまとめて記載します。

③Cocoon目次の横にアイコン挿入【コピペ！】

ぶっちゃけ、これはなくてもいいですが、アクセントにはなりますね。

当ブログと同じような「ザ・目次」アイコンなら、そのままペーストすればできます。

もっと違ったアイコンにしたいという方はFont Awesomeで探してみてください。

19年11月のバージョンアップによって、cocoonでFont Awesome 5（最新版）が使えるようになりました。cocoon設定→全体→サイトアイコンフォントでFont Awesome 5にチェックを入れれば一撃です。製作者のわいひらさん、やっぱすごい！

②と③をまとめたCSSコードが、こちら！

cssコードは必ず「子テーマ」のスタイルシート（css）に貼ってください！なぜかはややこしいため割愛！…てかよく知らん。とにかく「こはる（小貼る）」と覚えましょう。

目次カスタマイズCSSコード

/*目次カスタマイズ*/
.toc{
display: block;
padding: 0px;
}
.toc-title{
position: relative;
padding: 10px 0px;
background: #4169e1;/**背景色**/
color: #fff;
font-weight: bold;
}
.toc .toc-content{
padding: 5px 35px;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
color: #708090;
margin-left: -10px;
}
.toc-list > li li ::before {
content: ”;
width: 5px;
height: 5px;
display: inline-block;
left: -7px;/**左の位置**/
border-radius: 100%;
background: #cdcdcd;
position: relative;
margin-bottom: 2px;
}
.article .toc-list > li li {
list-style: none;
}
/* 目次のアイコン設定 */
.toc-title:before {
top: 0;
left: -45px;
width: 50px;
height: 50px;
font-family:“Font Awesome 5 Free”;
content : “\f03a”; /*アイコンを変える場合はここを変更 */
font-size:20px;
margin-right:5px;
color:#FFF; /*アイコンの色を変える場合はここを変更 */
}