商品写真にポラロイド写真のような枠はつけられますか?

2006-09-27 19:17
スタイルシートの編集が必要です。

→サンプルページ

管理画面の以下のページを開きます。

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

(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)管理画面の「デザイン管理」>「テンプレート選択」を開き、【カスタム】にある、先程のテンプレートを選択して【設定処理を完了する】ボタンをクリックします。