WPテーマ「Cocoon」のSILKスキンでH2見出しの数字を消す方法

2022年10月9日

ちょこちょこワードプレスのテーマを変更しているため、久々に訪問してくれた方は「あれ？違うブログに来ちゃったかな？」と思われてそうなとまじぃですこんにちわ♪

なんだかんだで過去に買った有料テーマよりも超便利な無料テーマである Cocoonが一番しっくり来ているので使い続けています。

https://wp-cocoon.com/” width=”300″ height=”150

そんなCocoonもどんどんバージョンアップを繰り返していただいておりまして今回のバージョンは2.2.6。

SILKスキンが超クール

そんな cocoon 2.2.6の目玉更新が「SILKスキン」の同梱。

このSILKスキン Cocoonの各所をクールにカスタマイズしやすくしてくれてある上に見た目も結構かっこよくなるので超おすすめ。

https://wp-cocoon.com/silk/” width=”300″ height=”150

シェアボタンなんかも見やすくなっていたり

目次も超見やすくなっています（~~まるで有料テーマのSANGOみたい~~）

他にも独自のブロックデザインがあったりと Cocoonの１テーマと言うよりも独自のテーマなんじゃねぇ？くらいの完成度なスキンなのです！！

そんな最強スキンであろうSILKなわけですが、個人的に「あれ？」って思ったことが一つだけ

色々カスタマイズし終わってから気づいたんですが 見出しに勝手にナンバーが入ってしまうんですねぇ。

目次の番号と同じナンバーが自動で入ってくれるのである意味便利な面の方が多いですし、気になる方も多くはないと思うんですが…

当ブログの様に「内容がゆるめ」な場合ここに数値が入ってるとどうしても「カチッとした印象」になっちゃうんですよ。

ということでこの数字が指定されているCSS（スタイルシート）を見つけてリセットしてあげることにします。

とはいえわたくしCSSとかHTMLにそこまで詳しいわけではありませんので Chromeのデベロッパーツールを使って探していきます。
あ…使い方とかは自分でググってくださいね（丸投）

ということで件のH2タグに自動でナンバリングされていた部分を探してみたところこんな記述を発見。

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

よくわかりませんが H2の直前に擬似要素で数字を足していく系みたいな事をやっているようです。しらんけど😁

ということでどうやら「H2前の疑似要素をリセットしてやれば良い」という事らしいので下記のCSSをカスタマイズの「追加CSS」に追記してあげます。

/* H2見出しの疑似要素をリセット*/

.entry-content h2 > span::before {
    content: none;
}

では結果を見てみましょう。

はい！成功♪

と言った感じで私のように「デザインやCSSには詳しくないブロガー」でもデベロッパーツールで地道に探していくとデザインの変更なんかもできちゃうよ〜。というお話でした。

今回の「SILKスキンのH2見出しから数字を消す」に関してはデベロッパーツールの使い方を覚えなくても単に前項で紹介したCSSをCocoonに適用するだけで可能ですのでそれだけが目的の方は使い方覚える必要はありませんので念のため😁

ってことで最後にもう１回「SILKスキンの見出しの番号を消すCSS」を置いておきます。

/* H2見出しの疑似要素をリセット*/

.entry-content h2 > span::before {
    content: none;
}

SILKスキンユーザーの方の参考になれば幸いです♪

よかったらシェアしてね！