【Cocoon】目次番号を消す！記事・カテゴリごとに！

こんにちは。ユニコ(yu2ko)です。

WordPressテーマ「Cocoon」には、記事の見出しから自動で目次を生成する便利な機能があります。

ただ、デフォルトでは目次に番号が付与されるため、「番号は不要だなぁ」と思うことも・・

今回は、その目次の番号を記事単位・カテゴリ単位でカスタマイズする方法を解説します。

番号を完全に消したり、一部の階層だけ番号を残したりと、シーンに合わせて目次のスタイルを変更できます。

個別記事の目次番号をカスタマイズする

記事編集画面下部の「カスタムCSS」にCSSコードを貼り付けます。

見出しH2(##)の番号を消す（css）

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

見出しH3(##)の番号を消す（css）

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

全ての見出し番号を消す（css）

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

特定のカテゴリ記事のみ目次番号をカスタマイズするには、『追加CSS』または『子テーマのstyle.css』にCSSコードを貼り付けます。

手順

1. カテゴリIDを確認(「投稿」→「カテゴリ」でIDを確認)
2. 下記コードの●部分にカテゴリIDを記入

H2の番号を消す（css）

.categoryid-● .toc ol.toc-list > li {
list-style: none;
}

H3以降の番号を消す（css）

.categoryid-● .toc ol.toc-list > li li {
list-style: none;
}

H3以降の番号を消す（css）

.categoryid-● .toc ol.toc-list > li {
list-style: none;
}
.categoryid-● .toc ol.toc-list > li li {
list-style: none;
}

目次の番号を完全に非表示にしたい場合は、「Cocoon設定」>「目次」>「目次ナンバーの表示」から「表示しない」を選択します。

このように「Cocoon」ならCSSカスタマイズで目次のスタイリングを自由に変更できます。番号の有無でレイアウトの印象が変わるので、コンテンツとデザインに合わせて調整しましょう。

ブログの分析やWordPressを学びなおすなら以下のサイトも参考にどうぞ