【CMS活用術】特定のページの背景色を変更する方法

皆さんこんにちは、ワニミです。
今回は、特定のカテゴリページや商品ページの背景色を変更する方法をご紹介いたします。

サイト全体のデザインはそのままに、
ブランドごとの世界観に合わせてページの雰囲気を変えたい場合などにご活用いただけます！

カテゴリページの背景色を変更する方法

手順１．管理画面＞サイト作成＞カテゴリ＞該当カテゴリの「変更/削除」を押します

手順２．「レスポンシブカテゴリページ表示用コメント」欄の「＜＞」を押します

手順３．以下CSSを入力し「保存」を押します

<style>
:root{
  --bg-color: #●●●●●●;/*●部分に使用したいカラーコードを挿入*/
}
</style>

手順４．「設定する」を押します

商品ページの背景色を変更する方法

手順１．管理画面＞商品管理＞該当商品の「変更」を押します

手順２．「レスポンシブ詳細説明文2」欄に以下CSSを入力します

<style>
:root{
  --bg-color: #●●●●●●;/*●部分に使用したいカラーコードを挿入*/
}
</style>

手順３．画面下部の「次へ」を押し「設定する」を押します

文字色も調整したい場合の方法

背景色にあわせて文字色も変更したい場合は、以下のCSSをご使用ください。
背景色と文字色をまとめて変更できます。

<style>
:root{
  --text-color: #●●●●●●;/*●部分に使用したいカラーコードを挿入*/
  --bg-color: #●●●●●●;/*●部分に使用したいカラーコードを挿入*/
}
</style>

ページごとに背景色を変えるだけで、商品の魅力やブランドの個性を引き立てられます。
オリジナリティあふれるサイト作りにぜひご活用ください♪