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