Cocoonの目次をカスタマイズ【シンプルで見やすいデザイン】

目次はスルーされる事が多いと思うので、デザイン的なワンポイントで良いと思っています。ただ、目次が雑だと記事を読み進める気が無くなっていまう事もあるので（個人的に）、疎かにはできないところです。

コピペで完成！ではなく「どこをどうすると何が変わるのか」を纏めています。オリジナルなカスタマイズを始めるきっかけになれば幸いです。

完成イメージ

シンプルで見やすく。控えめ過ぎず、目立ち過ぎず・・・

Cocoonの目次設定

Cocoonの主な設定は以下の通りです。なお、外枠のボーダー色はCocoon設定→全体→サイトキーカラーが反映されます。

カスタマイズ詳細

追加CSS又は子テーマのスタイルシート(style.css)にコードを追加していきます。tocとはTable of contentsの略で目次の事です。

目次全体

全体の定義です。paddingの値を変えたりmarginを追加してお好みのポジションを探してみてください。

.toc {
  display: block;
  padding: 0px;
  max-width: 600px;
  border: 1.2px #6ec4db solid !important;
 }

目次タイトル

当サイトの場合は目次[閉じる]と表示されている部分です。フォントや背景の色などを変えました。

.toc-title {
  position: relative;
  padding: 10px 0;
  background: #6ec4db;
  color: #fff;
  font-weight: bold;
 }

marginやpaddingが良く分からない場合はHTMLクイックリファレンスさんの解説がとても分かりやすくてオススメです。

ボディー

タイトルより下の目次が表示される部分です。こちらもpaddingで全体の位置を調整してみて下さい。

.toc .toc-content {
  padding: 15px 20px;
  background-color: #fff7ee;
 }

デフォルト目次ナンバーを非表示

ココがポイントです。H3以下の先頭の数字を「・」にする為に、まずデフォルトで表示さらる数字を非表示にします。

.article .toc-list > li li {
  list-style: none;
}

H3以下の先頭に「・」を表示

「・」を付ける訳ではなく背景を丸くして「・」に見える様にしている感じです。位置の調整は必要だと思うので、バランスを見ながら数値を変えてみて下さい。

.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #cdcdcd;
  position: relative;
  margin-bottom: 2px;
 }

H3以下のフォント

H2とH3の差別化を強める為にフォントの色と大きさを変えました。

.toc-list > li li a {
  font-weight: normal;
  font-size: 95%;
  color: #708090;
  margin-left: -10px;
 }

カスタマイズコードまとめ【たまに更新】

アップデートのタイミングでレイアウトが変わる事もあるので、以下のコードはたまに見直して更新しています。

また、絶対にコードが合っているのに何故かサイトに変化が無い場合、スペースや改行を作り直す事で反映される場合があります。

/**目次**/
.toc {
  display: block;
  padding: 0px;
  max-width: 600px;
  border: 1.2px #6ec4db solid !important;
  font-family: 'Noto Sans JP', sans-serif;
}
.toc-title {
  position: relative;
  padding: 10px 0;
  background: #6ec4db;
  color: #fff;
  font-weight: bold;
}
.toc .toc-content {
  padding: 15px 20px;
  background-color: #fff7ee;
}
.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: -15px;
  border-radius: 100%;
  background: #cdcdcd;
  position: relative;
  margin-bottom: 2px;
}
.article .toc-list > li li {
  list-style: none;
}

スマホ用コード

スマホで見た時に拘りたい部分があれば、スマホ用にカスタイマイズしてみるのも良いと思います。

@media screen and (max-width: 750px){
/*目次スマホ用*/
.toc {
  margin: 10px 5px;
}
.toc-list > li a {
  font-size:13px;
}
.toc-list > li li a {
  margin-left: -3px;
}
.toc-list > li li ::before {
  margin-left:-5px;
}
}

目次の外枠にあるボーダーの色が変わらない？設定方法【Cocoon】

目次のborder-colorを指定したのに色が反映されない。Cocoonの場合はサイトキーカラーが適用されるので、カスタマイズコードに!importantを追加して強めに反映させます。

unity-right.com

Cocoonのカスタマイズ記事一覧【初心者おすすめ〜こだわりの一品まで】

Cocoonカスタマイズ方法の記事を一覧に纏めました。見出し・目次・トップページ・カルーセル・トップページ・リスト・見出し付きボックス・商品リンクなど。初心者の方で何から始めるか迷っている場合におすすめです。

unity-right.com

バックアップは大事！！

私はサイト運営やカスタマイズ作業の約90%以上をiPhoneだけで完結しています。今回もスマホでWordPressの追加CSSを編集していたところ、途中で画面が落ちてしまう事が数回ありました。

今回は自動保存から復元できたものの、そのうち痛い目に合いそうな気も。。幸いにもサイトのカスタマイズ記事がメインなので、カスタマイズ記事を分かりやすくどんどん作成しておけば、それ自体がバックアップにもなりますね。

追加CSSへのコピペ手順