カテゴリ一覧(商品一覧)ページの各商品テーブルの背景色、背景画像を変更したい

2009-03-09 15:42
背景色や背景画像の変更には、スタイルシートの編集が必要です。
管理画面の以下のページを開きます。


「デザイン管理」>「スタイルシート編集」

(1)ご利用のテンプレートが表示されますので、新規に名前を付けて下さい。

(2)背景色と背景画像の変更をします。
大枠上、大枠中、大枠下は下記のようなレイアウトになっています。
各テーブル枠上(タイトル)
各テーブル枠中(内容)
※この中に商品一覧テーブルが表示されます。
各テーブル枠下(枠のみ)

■背景色の場合

【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。

/* 各テーブル枠上 */
.list_table_top {
width: ****;
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
margin: ****;
padding: ****;
}

/* 各テーブル枠中 */
.list_table_middle {
width: ****;
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
margin: ****;
padding: ****;
}

/* 各テーブル枠下 */
.list_table_bottom {
width: ****;
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
margin: ****;
padding: ****;
}

/* 商品一覧テーブル */
.list_item_table {
width: ****;
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
margin: ****;
padding: ****;
}

例) background-color: #000000;


※カラーコード(#000000等)はこちらを参考にご覧下さい。
https://www.ocnk.net/sample/color.html

【background-color:~;】の指定がない場合は、1行全てを貼り付けて下さい。


■背景画像の場合

【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。

/* スタイル1 中央上 */

/* 各テーブル枠上 */
.list_table_top {
width: ****;
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
margin: ****;
padding: ****;
}

/* 各テーブル枠中 */
.list_table_middle {
width: ****;
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
margin: ****;
padding: ****;
}

/* 各テーブル枠下 */
.list_table_bottom {
width: ****;
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
margin: ****;
padding: ****;
}

/* 商品一覧テーブル */
.list_item_table {
width: ****;
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
margin: ****;
padding: ****;
}

例) background-image: url(画像URL);


【background-image:url(画像URL);】の指定がない場合は、1行全てを貼り付けて下さい。


■商品名、商品説明、価格エリアの変更

基本的には、style1_textと同様の指定を行っておりますので、初期設定では、スタイルシート内に記載がございません。
カテゴリ一覧のみを変更される場合は、親要素として、.list_item_tableを指定していただき、下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、スタイルシート内の最下部にお願い致します。

【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。


.list_item_table .style1_text {
background-color: 【背景色…こちらの数値を任意のカラーコードに変更します】;
}

例) background-color: #000000;


.list_item_table .style1_text {
background-image: url(【背景画像…こちらに背景に使用したい画像のURLを記入します);
}

例) background-image: url(画像URL);


●ご注意事項
背景に画像を使用される場合は、初期の画像を保存してからそのサイズのまま編集して下さい。
画像の保存は、画像の上で右クリックし「名前を付けて背景を保存」から保存できます。
画像サイズを考慮しないで制作した場合、表示が崩れる場合があります。


(3)背景に使用したい画像をアップロードします。背景画像を使用しない場合は、この作業は必要ありません。
【画像のアップロード】の【画像ファイル】に、使用したい画像を選択します。
※画像専用管理画面→コンテンツフォルダからでもファイルのアップロードは可能です。

画像URLを記載いただく際には、必ずimage/~の相対パスにて記載して下さい。http://~の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。

記載例)
background-image: url(image/file.gif);

(4)編集後、【登録処理を完了する】ボタンをクリックして下さい。