【cocoon】目次の装飾方法！各見出しごとに装飾を反映するには？

Cocoonテーマを使用しているWordPressサイトで、目次の装飾をカスタマイズする方法について解説します。

今回は、

の２点について解説します。

目次全体の装飾方法

目次全体にスタイルを適用するには、cssで.tocクラスを使います。

以下の例は、目次の枠に3pxのボーダーを設定し、４隅を4pxの半径で丸める例です。

.toc{
　　border-width:3px;
　　border-radius:4px;
}

H2見出しを装飾するには、cssで.toc-list > liセレクタを使用します。

以下の例は、H2見出しのフォントサイズを15pxにし、太字にする例です。

.toc-list > li {
　　font-size: 15px;
　　font-weight: bold;
}

H3見出しを装飾するには、cssで.toc-list > li > ol > liセレクタを使用します。

H2見出しのセレクタと比べると、「ol > li」が１セット増えていることがわかると思います。

以下の例は、H3見出しのフォントサイズを14pxにし、通常のフォントの太さにする例です。

.toc-list > li > ol > li {
　　font-size: 14px;
　　font-weight: normal;
}

H4見出し以降も同様に「ol > li」を追加することで装飾が可能です。

CSSの性質上。１つ上の見出しを装飾するとそれ以降の見出しにも装飾が適用されてしまいます。

例えばH2見出しに太字を適用した場合、H3見出しも太字になってしまいます。

H3見出しを太字にしたくない場合は、先ほどのH3見出しの装飾例のように「font-weight: normal;」を指定して、スタイルを上書きする必要があります。