※本記事に関しては、e-shopsカートSのサポート窓口にお問い合わせいただきましてもご回答出来ませんので、予めご了承のうえ、ショップ様の自己責任のもとご利用ください。
皆さんこんにちは、ワニコです。
前回は、CMSのフッターデザインを変更する方法についてご紹介しました。
気になるデザインはありましたでしょうか？
今回はカスタムCSSを利用し、背景デザインを変更する方法をご紹介します！
前回同様、ご紹介するCSSをカスタムCSSにそのまま追記することで、ご紹介したデザインへ変更が可能な仕組みでご案内します。
カスタムCSSの利用方法は、マニュアルでご確認ください。
1.グローバルナビゲーションの背景に色を指定する方法
対象テンプレート：DefaultSchool
デフォルトのデザインだと、グローバルナビゲーションに背景色はついていません。
以下のCSSをカスタムCSSに追記すると、ご希望の色をグローバルナビゲーションの背景に付け加えることが出来ます。
.gnav {
background: #●●●●●●;/*●部分に使用したいカラーコードを挿入*/
}
.gnav li a {
border: #●●●●●● 1px solid;/*●部分のカラーコードはサイト背景に合わせるのがオススメ*/
}2.コンテンツタイトルの背景に色を指定する方法
対象テンプレート：DefaultSchool
デフォルトのデザインだと、下図のように線だけ表示されています。
以下のCSSをカスタムCSSに追記すると、ご希望の色をコンテンツタイトルの背景に付け加えることが出来ます。
.sidebox h4 {
background: #●●●●●●;/*●部分にサイドメニューコンテンツの背景色にしたいカラーコードを挿入*/
padding-left: 7px;
}
.sidebox h2 {
background: #●●●●●●;/*●部分にサイドメニューコンテンツの背景色にしたいカラーコードを挿入*/
padding-left: 7px;
}
.mainbox h4 {
background: #●●●●●●;/*●部分にメインコンテンツの背景色にしたいカラーコードを挿入*/
padding-left: 7px;
}
.mainbox h2 {
background: #●●●●●●;/*●部分にメインコンテンツの背景色にしたいカラーコードを挿入*/
padding-left: 7px;
}
コンテンツタイトルの文字色も一緒に変更したい場合は、以下のCSSをご利用ください。
.sidebox h4 {
background: #●●●●●●;/*●部分にサイドメニューコンテンツの背景色にしたいカラーコードを挿入*/
padding-left: 7px;
color: #●●●●●●;/*●部分に文字色にしたいカラーコードを挿入*/
}
.sidebox h2 {
background: #●●●●●●;/*●部分にサイドメニューコンテンツの背景色にしたいカラーコードを挿入*/
padding-left: 7px;
color: #●●●●●●;/*●部分に文字色にしたいカラーコードを挿入*/
}
.mainbox h4 {
background: #●●●●●●;/*●部分にメインコンテンツの背景色にしたいカラーコードを挿入*/
padding-left: 7px;
color: #●●●●●●;/*●部分に文字色にしたいカラーコードを挿入*/
}
.mainbox h2 {
background: #●●●●●●;/*●部分にメインコンテンツの背景色にしたいカラーコードを挿入*/
padding-left: 7px;
color: #●●●●●●;/*●部分に文字色にしたいカラーコードを挿入*/
}
3.コンテンツタイトルの背景に画像を指定する方法
対象テンプレート：DefaultSchool
事前準備①：画像のアップロード方法
背景として使用したい画像を事前にカートS管理画面にアップロードしておく必要があります。
以下に手順をご案内します。
手順1. カートS管理画面「コンテンツ」＞画像ライブラリ＞画像アップロードをクリックします。
手順2. 分類は「フリー」を選択し、画像ファイルを選択してアップロードします。
画像ファイルのアップロードが正常に完了すると、下図のような表示になります。
事前準備②：画像URLの確認
事前準備①でアップロードした画像のURLを取得する方法を以下にご案内します。
手順1. カートS管理画面「コンテンツ」＞画像ライブラリ＞画像一覧をクリックします。
手順2. アップロードした画像の「URL表示」をクリックします。
手順3. 「画像URL」欄に表示されるURLをコピーします。
カスタムCSS設定
上記でご案内した、事前準備①と事前準備②が完了しましたら、カスタムCSSへ以下のCSSをご設定ください。
.sidebox h4 {
background-image: url(https://●●●●●.jpg);/*https://●●●●●.jpg部分に画像URL*/
padding-left: 7px;
}
.sidebox h2 {
background-image: url(https://●●●●●.jpg);/*https://●●●●●.jpg部分に画像URL*/
padding-left: 7px;
}
.mainbox h4 {
background-image: url(https://●●●●●.jpg);/*https://●●●●●.jpg部分に画像URL*/
padding-left: 7px;
}
.mainbox h2 {
background-image: url(https://●●●●●.jpg);/*https://●●●●●.jpg部分に画像URL*/
padding-left: 7px;
}コンテンツタイトルの文字色も一緒に変更したい場合は、以下のCSSをご利用ください。
.sidebox h4 {
background-image: url(https://●●●●●.jpg);/*https://●●●●●.jpg部分に画像URL*/
padding-left: 7px;
color: #●●●●●●;/*●部分に文字色にしたいカラーコードを挿入*/
}
.sidebox h2 {
background-image: url(https://●●●●●.jpg);/*https://●●●●●.jpg部分に画像URL*/
padding-left: 7px;
color: #●●●●●●;/*●部分に文字色にしたいカラーコードを挿入*/
}
.mainbox h4 {
background-image: url(https://●●●●●.jpg);/*https://●●●●●.jpg部分に画像URL*/
padding-left: 7px;
color: #●●●●●●;/*●部分に文字色にしたいカラーコードを挿入*/
}
.mainbox h2 {
background-image: url(https://●●●●●.jpg);/*https://●●●●●.jpg部分に画像URL*/
padding-left: 7px;
color: #●●●●●●;/*●部分に文字色にしたいカラーコードを挿入*/
}以上がメニューやコンテンツタイトルの背景をカスタムCSSで変更する方法となります。
ショップのイメージカラーを背景色に指定したり、サイトイメージに合った画像を背景に指定したりと、オリジナル感のあるサイト作成にご活用ください♪
