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

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

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

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

スポンサーリンク

完成イメージ

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

Cocoon目次カスタマイズ

Cocoonの目次設定

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

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

カスタマイズ詳細

追加CSS又は子テーマのスタイルシート(style.css)にコードを追加していきます。tocTable 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設定を確認
Cocoonのカスタマイズ記事を一覧にしました

バックアップは大事!!

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

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

追加CSSへのコピペ手順

カスタマイズコードの追加手順
  1. WordPress ダッシュボード
  2. メニューにある『外観』
  3. カスタマイズ
  4. 追加CSS
  5. 必要なコードを追加 → 公開

Comment

  1. たに より:

    こちらの目次を使わせていただいております。
    h4も目次表示させたいのですが、今のところh4タグをつけると
    ・h3

     ・・h4
    という表示になってしまいます。
    間に、1行入る・を何とか消したいのですが方法はありますでしょうか?

    • sartensarten より:

      >たにさん

      H4以下は使ってないので自信はないですが・・Cocoon側の『目次ナンバーの表示』は「数字(デフォルト)」になっていますでしょうか?

      試しにH4を追加して「数字詳細」にしたら・が1行追加されたので、Cocoon設定を確認してみてくださいヽ(´ω`)ノ

      • たに より:

        返信ありがとうございます。
        数字詳細になっていましたが、解決できませんでした。
        h4タグを使うのやめてみます。お手数おかけしました。

        • sartensarten より:

          お役に立てず残念です(´;ω;`)

          私も.tocのコードをコピペし直してみたり色々試してました。コード自体に問題は無さそうなので「ほんの少しの何か」だと思われます!

          「んー、やっぱりh4まで表示したい!」ってなりましたらまたご相談くださいφ(・ω・`)

          今後、追加CSSやstyle.cssを見直し・整理していく過程で自然と改善されると思います。

  2. H3以下の先頭に「・」を表示させたいのですが、コードの表示方法を教えていただけますでしょうか。

    現在cocoonを使用しております。見出しを付けてレビューすれば自動的に作成されますが、数字ではなく●で表示できるようになりたいです。

    wordpressのテキストビューにコードが表示されないので、ググりましたがわかりませんでした。

    教えていただけると助かります。

    • sartensarten より:

      >ハットリナミさん

      コメント有難う御座います。゚+.(・∀・)゚+.゚

      この記事の下の方に『追加CSSへのコピペ手順』という内容を追加しました。要点のみ纏めてみましたので、是非試してみてください。

      目次や見出しなどのデザインは『追加CSS』(又は子テーマのスタイルシート)にコードを入力しておけばそれが全てのページに反映される、みたいな感じになっています。

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