背景色や背景画像の変更には、スタイルシートの編集が必要です。
管理画面の以下のページを開きます。
「デザイン管理」>「スタイルシート編集」
(1)ご利用のテンプレートが表示されますので、新規に名前を付けて下さい。
(2)背景色と背景画像の変更をします。
基本的には、商品一覧ページの指定と同様になりますので、初期設定のスタイルシート内には指定はございません。
別途、関連商品部分のみを変更されたい場合は、それぞれに、.other_itemを親要素として指定して下さい。
下記の指定をコピーし、スタイルシート内の最下部に貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
■背景色の場合
.other_item .list_table_top { background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】; }
.other_item .list_table_middle {
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
}
.other_item .list_table_bottom {
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
}
.other_item .list_item_table {
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
}
例) background-color: #000000;
|
※カラーコード(#000000等)はこちらを参考にご覧下さい。
https://www.ocnk.net/sample/color.html
■背景画像の場合
.other_item .list_table_top {
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します】); }
.other_item .list_table_middle {
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します】);
}
.other_item .list_table_bottom {
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します】);
}
.other_item .list_item_table {
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します】);
}
例) background-image: url(画像URL);
|
■商品名、商品説明、価格エリアの変更
.other_item .style1_text {
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】; }
例) background-color: #000000;
|
.other_item
.style1_text { background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します】); }
例) background-image: url(画像URL); |
●ご注意事項
背景に画像を使用される場合は、初期の画像を保存してからそのサイズのまま編集して下さい。
画像の保存は、画像の上で右クリックし「名前を付けて背景を保存」から保存できます。
画像サイズを考慮しないで制作した場合、表示が崩れる場合があります。
(3)背景に使用したい画像をアップロードします。背景画像を使用しない場合は、この作業は必要ありません。
【画像のアップロード】の【画像ファイル】に、使用したい画像を選択します。
※画像専用管理画面からでもファイルのアップロードは可能です。
(4)編集後、
【登録処理を完了する】ボタンをクリックして下さい。