【Cocoonトップページ】背景色をたった3行のCSSでカスタマイズする

Cocoonトップページ背景色変更アイキャッチ ワードプレス

Cocoonのトップページの背景色をたった3行のCSSでカスタマイズする方法をご紹介します。

背景色を変更する部分について

当サイトは、サイトキーカラーを薄いグレーに設定しています。
(サイトキーカラー:サイト全体のポイントとなる部分に適用される背景色)

そうすると、トップページのエントリーカード同士の間にも、薄いグレーが入ってしまいます。
(下図の矢印部分が、薄いグレーになっています。)

このエントリーカード同士の間の背景色を「白」に設定してみたいと思います。

 

CSSカスタマイズ方法

CSSのスタイルシートに以下のコードを追加します。

#main {
	background: #fff;
}

 

トップページの背景色を変更できた

トップページの背景色を「白」に変更しました。

エントリーカード同士の境目がなくなり、トップページの見た目がスッキリしたように思います。

 

【Cocoonのマーカー】規定の色から変更する3行CSS:カスタマイズ
...
【Cocoonエントリーカード】フォントをたった3行のCSSで変更する
...