【WordPress】Cocoonで特定のページの背景色を透明にするやり方を紹介!

こんにちは!悠です!

 

今回は「WordPress」のブログテーマ「Cocoon」で、特定のページの背景色を透明にする方法をまとめていきます。

ブログのトップページのデザインをCSSでカスタマイズしたくなった時に、この方法を覚えておくと便利なのでぜひ試してみてください。

スポンサーリンク
スポンサーリンク

特定のページの背景色を透明にする方法

では早速背景色を透明にしたいページをブラウザで開き、F12キーを押しましょう。

そうすると上の方に「page-id-〇〇」と表示されるので、これをメモしてください。

 

新着記事やカテゴリーのように「page-id-〇〇」が存在しないページもあるので、その場合はbody classの先頭にあるセレクターをメモしましょう。

新着記事の場合はblog、カテゴリの場合はarchive

 

例としてカテゴリー記事の背景色を透明にしたい場合、セレクターはarchiveなので、透明にしたい場所に合わせて(下記画像参照)次のコードをテーマファイルエディターのstyle.cssの中に入力します。

 

.archive {
background-color: transparent;
}
.archive main {
background-color: transparent;
}

 

ページに合わせてセレクターを変更すれば、どのページの背景色でも透明にすることができます。



まとめ

以上が「WordPress」のブログテーマ「Cocoon」で、特定のページの背景色を透明にする方法の紹介でした。

セレクターの場所さえわかれば簡単に設定することができるので、ぜひ試してみてくださいね。

では、ここまで読んでいただきありがとうございました。

コメント