とまじ庵

Reboot!!

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

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

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

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

SILKスキンが超クール

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

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

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

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

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

見出しに勝手にナンバリングされちゃう件

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

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

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

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

デベロッパーツールでCSSを特定します。

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

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

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

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

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

疑似要素をリセットするCSSはこれだ!!

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

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

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

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

はい!成功♪

まとめ

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

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

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

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

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

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