中央エリアに新商品、おすすめ商品を配置した場合の各商品テーブルの背景色、背景画像の変更はできますか?
背景色や背景画像の変更には、スタイルシートの編集が必要です。
管理画面の以下のページを開きます。
※この指定は、大枠の一つ内側、各商品が表示される枠の指定となります。
※この指定は、中央エリアに新商品、おすすめ商品を配置した際の指定となります。右エリアに配置されている場合は、下記のFAQをご覧下さい。
・右エリアに新商品、おすすめ商品を配置
https://www.ocnk.net/faq/index.php?action=faq&id=467
「デザイン管理」>「スタイルシート編集」
(1)スタイルシート編集画面が表示されますので、【ベーステンプレートを読み込む】でご利用のテンプレートを選択し【読み込む】ボタンをクリックして下さい。
(2)ご利用のテンプレートのスタイルシートが表示されます。【テンプレート名】を記入して【スタイルシート】を編集します。
(3)背景色と背景画像の変更をします。
各テーブル枠上、各テーブル枠中、各テーブル枠下は下記のようなレイアウトになっています。
■背景色の場合
スタイルシート内の/* スタイル1 中央上 */の/* 各テーブル枠上 */ /* 各テーブル枠中 */ /* 各テーブル枠下 */以下を変更します。
【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。
/*スタイル1 中央上 */ <中略> /* 各テーブル枠上 */ /* 各テーブル枠中 * /* 各テーブル枠上 * |
※カラーコード(#000000等)はこちらを参考にご覧下さい。
https://www.ocnk.net/sample/color.html
※【background-color:~;】の指定がない場合は、1行全てを貼り付けて下さい。
※topとbottomに関しては必要ない場合が多いです。ご利用のテンプレートに合わせてご使用下さい。
■背景画像の場合
スタイルシート内の/* スタイル1 中央上 */の/* 大枠上 */ /* 大枠中 */ /* 大枠下 */以下を変更します。
【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。
/* スタイル1 中央上 */
/* 大枠上 */ /* 大枠中 */ /* 大枠下 */ |
※【background-image:url(画像URL);】の指定がない場合は、1行全てを貼り付けて下さい。
※topとbottomに関しては必要ない場合が多いです。ご利用のテンプレートに合わせてご使用下さい。
■商品名、商品説明、価格エリアの変更
スタイルシート内の/* スタイル1 中央上 */の/* 説明 */ 以下を変更します。
【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。
/* スタイル1 中央上 */ <中略> /* 説明 */ |
/* スタイル1 中央上 */ <中略> /* 説明 */ |
●ご注意事項
背景に画像を使用される場合は、初期の画像を保存してからそのサイズのまま編集して下さい。
画像の保存は、画像の上で右クリックし「名前を付けて背景を保存」から保存できます。
画像サイズを考慮しないで制作した場合、表示が崩れる場合があります。
(4)背景に使用したい画像をアップロードします。背景画像を使用しない場合は、この作業は必要ありません。
【画像のアップロード】の【画像ファイル】に、使用したい画像を選択します。
※画像専用管理画面→コンテンツフォルダからでもファイルのアップロードは可能です。
画像URLを記載いただく際には、必ずimage/~の相対パスにて記載して下さい。http://~の絶対パスにて記載いただいた場合、SSL保護下のページでセキュリティ警告が表示されます。
記載例)
background-image: url(image/file.gif);
(5)編集後、【登録処理を完了する】ボタンをクリックして下さい。
(6)管理画面の「デザイン管理」>「テンプレート選択」を開き、【カスタム】にある、先程のテンプレートを選択して【設定処理を完了する】ボタンをクリックします。