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

Cocoon目次カスタマイズ
スポンサーリンク

Cocoonの目次をカスタマイズしました。

カスタマイズしたいこと
  • H2 見出し:数字のまま
  • H3 見出し:数字ではなく「•」

目次はスルーされる事も多いと思うので(個人的に)、デザイン的なワンポイントで良いと思っています。ただ、目次が雑だと読む気が無くなってしまうので(個人的に)、疎かにはできません。

完成イメージ

シンプルで見やすく控えめ過ぎず目立ち過ぎず・・・を意識しました。

Cocoon目次カスタマイズ

Cocoonの目次設定

Cocoonの主な設定は以下の通りです。

設定内容

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

なお、外枠のボーダー色はCocoon設定→全体→サイトキーカラーが反映される様です。

カスタマイズ詳細

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

目次全体

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

.toc {
    display: block;
    padding: 0px;
}

目次タイトル

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

.toc-title {
    position: relative;
    padding:10px 0; /**位置(上下)**/
    background: #8EDAE5; /**背景色**/
    color: #fff; /**文字色**/
    font-weight: bold; /**太字*/
}

paddingの設定についてはHTMLクイックリファレンスさんの解説がとても分かりやすいです。

ボディー

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

.toc .toc-content {
    padding:5px;
}

目次ナンバー非表示

ココがポイントです。H3以下の先頭の数字を「・」にする為に、まず現在表示されている目次ナンバーを非表示にします。

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

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

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

.toc-list > li li ::before {
    display: inline-block;
    position: relative;
    content: '';
    width: 5px;
    height: 5px;
    left: -30px; /**横(左)の位置**/
    margin-bottom: 2px; /**下の余白**/
    border-radius: 100%;
    background: #cdcdcd; /**・の色**/
}

H3以下のフォント

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

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

CSSコードまとめ

バージョンアップのタイミングでたまに位置がズレたりしますので、その際はPaddingやMargin等で位置を調整してください。以下のコードも気づいたベースで更新します。

.toc{
  display: block;
  padding: 0px;
  margin-bottom: 40px;
  margin-left: 18%;
  margin-right: 18%;
  border: solid 1px #b6b6b6;/*不要かも*/
}

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

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

.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;
}

PCはOKでもスマホで見ると位置がずれている場合があります。その場合はスマホ用のコードで微調整をお願いします。

バックアップ推奨

私はサイト編集の約90%以上をiPhoneで完結しています。今回もWordPressの追加CSSを編集していたのですが、途中で画面が落ちてしまう事が数回ありました。しかもスマホでのCSS編集は誤作動が多いです。

なのでバックアップを取りましょう!今回CSSを編集している際に誤操作か誤作動で編集画面が落ちてしまいました。自動保存から復元しましたが、目次とは関係ない予期せぬ箇所の表示が崩れていました。直すのに時間が掛かりましたし、私の様な初心者だと直せないケースが発生する恐れもあります。

Comment

  1. […] Cocoonの目次をカスタマイズ【シンプルで見やすいデザイン】cocoonの目次デザインをシンプル・オシャレにカスタマイズ。H3見出し以下は数字では無く「・」に変更しました。フォントの […]

タイトルとURLをコピーしました