Cocoonのスキン「SILK」で見出しH2の前につく数字を消す方法

当ブログはWordPressテーマ「Cocoon」、スキンは「SILK」を使用しています。

新しくブログを立ち上げ、記事を投稿し始める前に外観などの設定をいじっていたのですが、見出しH2を使用すると勝手に数字が振られてしまうことに気が付きました。

設定のどこかに「見出しに数字を自動付与」のような項目があるのではないかと思って探してみましたが見つからず。

最終的に、前回の記事と同じようにカスタムCSSにコードを追加する形で無事に解決できましたので、同じ悩みを持つ方に向けて解決策をシェアします。

原因

ブラウザの検証ツール（デベロッパーツール）を使ってコードを確認したところ、原因はスキン「SILK」のCSSに以下の記述（カウンター機能）があらかじめ組み込まれていたためでした。

.article h2::before {
    content: counter(h2, decimal) ". ";
    counter-increment: h2;
}

このコードは、「記事にH2が出現するたびに数字を1つ増やし、見出しの先頭に『1. 』や『2. 』という形式で表示する」という命令を出しています。

つまり、設定のON/OFFではなく、スキンのデザイン仕様としてCSSで自動ナンバリングされる仕組みになっていたのが原因でした。

.article h2::before
記事本文内のH2見出し（<h2>）の「直前のスペース（擬似要素）」を対象に指定
counter-increment: h2;
ページ内でH2が出てくるたびに、裏側で「1, 2, 3…」と数字（カウンター）を1つずつ増やす処理
content: counter(h2, decimal) ". ";
その増やした数字を十進数（1, 2）にして、後ろに「. （ピリオドとスペース）」をくっつけて画面上に文字として表示（出力）

テーマのPHPやテンプレートファイルを直接変更するのは怖いので、WordPressの「追加CSS」機能を使って、該当の箇所を非表示にしました。

WordPress管理画面＞ [外観] ＞ [カスタマイズ] ＞ [追加CSS] を開き、以下のコードを貼り付けて公開ボタンを押すだけです。

追加するCSSコード：

.article h2::before,
.entry-content h2::before {
    content: unset;
}

content: unset; は、擬似要素（::before）に設定されていた内容（数字を生成する機能）を打ち消す（無効化する）プロパティです。

これでH2の前に自動付与される数字が消え、目的を達成できました。

今回追加したコードでは、ピンポイントでH2の数字出力だけを無効化しているため、他の表示を崩すことなく安全に非表示化できます。

H3やH4などの他の見出し、スキン固有のその他のデザイン装飾には影響しません。

記事の内容によっては、例えば3つ目のH2から「1.2.3…」と自分で数字を振っていきたいこともあると思います。

こういったとき、詳しい方でしたらテーマのPHPやテンプレートファイルを編集して解決するのだと思いますが、CSSにコードを追加する形なら私のような初心者でも手軽にカスタマイズできるのでおすすめです。

同じように悩んでいる方の参考になれば幸いです。