商品写真にポラロイド写真のような枠はつけられますか?
スタイルシートの編集が必要です。
→サンプルページ
管理画面の以下のページを開きます。
「デザイン管理」>「スタイルシート編集」
(1)スタイルシート編集画面が表示されますので、【ベーステンプレートを読み込む】でご利用のテンプレートを選択し【読み込む】ボタンをクリックして下さい。
(2)ご利用のテンプレートのスタイルシートが表示されます。【テンプレート名】を記入して【スタイルシート】を編集します。
STEP1 写真影のスタイルシートを編集する
スタイルシート内の/* 写真影 */以下を変更します。
【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。
STEP2 上記の写真影変更による、レイアウトの崩れを修正する
スタイルシート内のstyle2部分の/* 2-5位写真 */とstyle3の/* 写真 */と商品詳細の/* 他の商品写真 */のスタイルシート指定を編集します。
(3)編集後、【登録処理を完了する】ボタンをクリックして下さい。
(4)管理画面の「デザイン管理」>「テンプレート選択」を開き、【カスタム】にある、先程のテンプレートを選択して【設定処理を完了する】ボタンをクリックします。
→サンプルページ
管理画面の以下のページを開きます。
「デザイン管理」>「スタイルシート編集」
(1)スタイルシート編集画面が表示されますので、【ベーステンプレートを読み込む】でご利用のテンプレートを選択し【読み込む】ボタンをクリックして下さい。
(2)ご利用のテンプレートのスタイルシートが表示されます。【テンプレート名】を記入して【スタイルシート】を編集します。
STEP1 写真影のスタイルシートを編集する
スタイルシート内の/* 写真影 */以下を変更します。
【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。
/* 写真影 */ .photo_line_80 { ・・・トップとリスト用 width: ****; height: ****; border-top: 1px solid #F5F5F5; border-left: 1px solid #F5F5F5; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; margin: ****; padding: 5px 5px 10px 5px; background-color: #FFFFFF; } .photo_line_140 { ・・・詳細ページ他の写真 width: ****; height: ****; border-top: 1px solid #F5F5F5; border-left: 1px solid #F5F5F5; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; margin: ****; padding: 5px 5px 10px 5px; background-color: #FFFFFF; } .photo_line_250 { ・・・詳細ページメイン写真 width: ****; height: ****; border-top: 1px solid #F5F5F5; border-left: 1px solid #F5F5F5; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; margin: ****; padding: 5px 5px 10px 5px; background-color: #FFFFFF; } ■各部分の説明 border-top: 1px solid #F5F5F5; ・・・・写真枠の上の影、右と下より薄い色を指定 border-left: 1px solid #F5F5F5; ・・・・写真枠の左の影、右と下より薄い色を指定 border-bottom: 1px solid #CCCCCC; ・・・・写真枠の下の影、上と左より濃い色を指定 border-right: 1px solid #CCCCCC; ・・・・写真枠の右の影、上と左より濃い色を指定 padding: 5px 5px 10px 5px; ・・・・写真の上下左右枠幅、下のみ広めに設定 background-color: #FFFFFF; ・・・・写真枠の色 |
STEP2 上記の写真影変更による、レイアウトの崩れを修正する
スタイルシート内のstyle2部分の/* 2-5位写真 */とstyle3の/* 写真 */と商品詳細の/* 他の商品写真 */のスタイルシート指定を編集します。
下記3箇所は指定のmarginとpaddingを編集して下さい。 写真枠paddinをg左右5pxと写真影borderを左右1pxを指定したため、左右6pxを引きます。 style2の2-5位写真 左右12pxなので12-6で6pxを指定します。 style3の写真 左右27pxなので27-6で21pxを指定します。 detailの他の写真 左右21pxなので21-6で15pxを指定します。 ※この部分のように5px 21px 5px 21pxと記載されている場合は21の部分を両方変更して下さい。 例)下記指定が13pxで写真枠paddingを左右8px、写真影borderを左右1pxにした場合は13-9で4pxを指定します。 /* 2-5位写真 */ .style2_rank_photo { width: 80px; margin: 0px 12px; padding: 0px; } ↓変更後 /* 2-5位写真 */ .style2_rank_photo { width: 80px; margin: 0px 6px; padding: 0px; } /* 写真 */ .style3_photo { width: 80px; margin: 0px; padding: 0px 27px; } ↓変更後 /* 写真 */ .style3_photo { width: 80px; margin: 0px; padding: 0px 21px; } /* 他の商品写真 */ .sub_item_photo { width: auto; height: auto; margin: 5px 21px 5px 21px; padding: 0px; } ↓変更後 /* 他の商品写真 */ .sub_item_photo { width: auto; height: auto; margin: 5px 15px 5px 15px; padding: 0px; } |
(3)編集後、【登録処理を完了する】ボタンをクリックして下さい。
(4)管理画面の「デザイン管理」>「テンプレート選択」を開き、【カスタム】にある、先程のテンプレートを選択して【設定処理を完了する】ボタンをクリックします。