【Cocoon】目次の見出し2を太字、枠線のちょっとしたカスタマイズ

Cocoonでは見出しをつけることで自動的に目次が表示されるようになります。

ただ、

同じ大きさでメリハリがないな

見出しをもう少し目立つようにしたい

など、ちょっと表示を変えられたらと思う方もいるのではないでしょうか。

そこで今回の記事では、Cocoonの目次に表示される見出し2の文字を太字に変更する方法を解説します。

コピーしたコードを貼り付ける（コピペする）だけなので初心者でも簡単です。

「目次」と目次枠の太さ・色、枠線内の背景色を変更する方法も解説しますので、ぜひ最後までチェックしてみてください。

目次の見出し2を太字する

スタイルシートを開きます。

管理画面の「外観」→「テーマ」をクリック

編集するテーマが「Cocoon Child」になっていることを確認して、スタイルシートの一番下の空白スペースに下記のコードをコピーして貼り付けてください。

.toc-list > li{
font-weight: bold;
}
.toc-list > li li{
font-weight: normal;
}

貼り付けができたら画面下の「ファイルを更新」をクリックします。

うまく反映されていれば、このような目次になります。

「目次」タイトルや枠線の見た目にもちょっとしたカスタマイズをしてみましょう。

「目次」を太字にして色も変更してみましょう。

まずは、先ほど編集したスタイルシートの画面に下記のコードを貼り付けてください。

.toc-title{
font-weight:bold; /*目次の文字を太字にする*/
color:#66CDAA; /*目次の色*/
}

「color:」のあとに記載しているカラーコードを希望の色（カラーコード）に変更してください。カラーコードは原色大辞典が参考になります。

編集ができたら画面下の「ファイルを更新」をクリックしましょう。

スタイルシートの画面に下記のコードを追加して、「ファイルを更新」をクリックしてください。

.toc {
background: #FFFFFF; /*目次の背景色*/
border: 3px solid #FFB6C1; /*目次の枠線*/
}

背景色が白で枠線がピンク色になっています。

「background: 」のあとのコードが背景色、「border:」のあとが枠線の太さ・種類・色のコードです。

上のコードの場合、

となります。

背景色をアイボリー、枠線の色をオレンジ、枠線を太めの点線にする場合は下記のようなコードになります。

.toc {
background: #FFFFE0; /*目次の背景色*/
border: 5px dotted #FF773E; /*目次の枠線*/
}

プレビューで確認しながら少しずつ変更してみてください。

コードは下にあるものが優先的に反映されるので、新しいコードはスタイルシートの一番下に追加するといいかと思います。

変更したCSSがどうしても反映されない場合は、その部分のコードの最後に「!important」を入れておくと最優先されます。

こんな感じで↓

まずはスタイルシートの一番下に新しいコードを追加して、反映されない場合に試してみてください。

Cocoonで表示される目次のちょっとしたカスタマイズを解説しました。

文字の太さや色を変えるだけで、目次がより見やすくなったかと思います。

編集を重ねていると、ずっと前に貼り付けてあるコードが適用されてしまう場合があります。

今回のカスタマイズに限らず、新しいコードを追加する場合はスタイルシートの一番下に貼り付けるとよいでしょう。