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

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

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

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

スポンサーリンク

完成イメージ

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

Cocoon目次カスタマイズ

Cocoonの目次設定

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

設定内容

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

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

カスタマイズ詳細

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

目次全体

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

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

カスタマイズコードまとめ

バージョンアップなどのタイミングで位置ズレたりする事もあるので、以下のコードは随時見直して更新しています。上手くいかない時の参考にしてください。

.toc{
  display: block;
  padding: 0px;
  margin-bottom: 40px;
  margin-left: 18%;
  margin-right: 18%;
  border: solid 1.2px #b6b6b6 !important;
}

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

スマホ用コード

スマホ向けに位置を調整しています。こちらはお好みで試してみてください。

@media screen and (max-width: 750px){

/*目次*/	
.toc{
  margin :60px 5%;
}
.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をコピーしました