こんにちは!悠です!
今回は「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」で、特定のページの背景色を透明にする方法の紹介でした。
セレクターの場所さえわかれば簡単に設定することができるので、ぜひ試してみてくださいね。
では、ここまで読んでいただきありがとうございました。
コメント