「画像ホスティングオプション」追加時に必要なCSS
- 更新日: 2024-12-12 03:02:24 UTC
コマースクリエイター未利用店舗様専用の記事です
運用途中で「画像ホスティングオプション」を追加される場合は、CSSの調整が必要になります。
この対応は「デザイン設定」の「カラー/サイズ編集」で、「上級モード」で利用されている場合のみ必要です。 コマースクリエイターご利用店舗様につきましては追加不要です。 |
追加が必要なCSS
「デザイン設定」の「サイズカラー編集」で「上級モード」を利用されている場合は、下記のCSSの追加が必要になります。
構築メニュー>デザイン設定>編集>オリジナルCSS/JavaScript編集>オリジナルCSSの編集へ下記のCSSを追加してください。
=================================================================
画像ホスティングオプション
================================================================= *//* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL1 */
#FS2_itemlayout_IHL1{
border:1px solid #ddd;
float:left;
width:200px;
padding:0;
margin:5px;
padding:10px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL1:
サムネイル */
#FS2_itemlayout_IHL1 .FS2_thumbnail_container{
border:none;
margin:5px 0px;
padding:0px;
}#FS2_itemlayout_IHL1 img{
margin:0px;
padding:0px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL1:
サムネイル */
#FS2_itemlayout_IHL1 .FS2_AdditionalImageEnlargementSsize_Button{
text-align:right;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL1:
商品価格コンテナ */
#FS2_itemlayout_IHL1 .FS2_itemPrice_text{
margin:5px 0px;
font-size:80%;
font-weight:normal;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL1:
商品一言コメント */
#FS2_itemlayout_IHL1 .FS2_ItemShortComment{
margin:10px;
font-size:80%;
color:#777;
}
/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL1:
特別会員価格あり */
#FS2_itemlayout_IHL1 .FS2_members_contents{
margin:5px 0px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL1:
会員価格 */
#FS2_itemlayout_IHL1 .FS2_special_members_price{
margin:5px 0px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL1:
拡大ボタン */
#FS2_itemlayout_IHL2 .FS2_AdditionalImageEnlargementSsize_Button{}
/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL2 */
#FS2_itemlayout_IHL2{
border:1px solid #ddd;
float:left;
width:200px;
padding:10px;
margin:5px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL2:
サムネイル */
#FS2_itemlayout_IHL2 .FS2_thumbnail_container{
border:none;
margin:0px 0px 10px 0px;
padding:0px;}
#FS2_itemlayout_IHL2 img{
margin:0px;
padding:0px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL2:
アイキャッチアイコン */
#FS2_itemlayout_IHL2 .FS2_eye_catch_icon{
margin:5px 0px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL2:
商品価格コンテナ */
#FS2_itemlayout_IHL2 .FS2_itemPrice_text{
margin:5px 0px;
font-size:80%;
font-weight:normal;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL2:
商品一言コメント */
#FS2_itemlayout_IHL2 .FS2_ItemShortComment{
margin:10px;
font-size:80%;
color:#777;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL2:
特別会員価格あり */
#FS2_itemlayout_IHL2 .FS2_members_contents{
margin:5px 0px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL2:
会員価格 */
#FS2_itemlayout_IHL2 .FS2_special_members_price{
margin:5px 0px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL2:
拡大ボタン */
#FS2_itemlayout_IHL2 .FS2_AdditionalImageEnlargementSsize_Button{
margin:5px 0px 0px 0px;
}
/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL3 */
#FS2_itemlayout_IHL3{
border:1px solid #ddd;
float:left;
width:320px;
padding:10px;
margin:5px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL3:
サムネイル */
#FS2_itemlayout_IHL3 .FS2_thumbnail_container{
border:none;
padding:0px;
float:left;
margin:0px 10px 0px 0px;
}#FS2_itemlayout_IHL3 img{
margin:0px;
padding:0px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL3:
アイキャッチアイコン */
#FS2_itemlayout_IHL3 .FS2_eye_catch_icon{
margin-bottom:10px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL3:
商品価格コンテナ */
#FS2_itemlayout_IHL3 .FS2_itemPrice_text{
margin:5px 0px;
font-size:80%;
font-weight:normal;
}
/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL3:
商品一言コメント */
#FS2_itemlayout_IHL3 .FS2_ItemShortComment{
margin:10px;
font-size:80%;
color:#777;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL3:
特別会員価格あり */
#FS2_itemlayout_IHL3 .FS2_members_contents{
margin:5px 0px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL3:
会員価格 */
#FS2_itemlayout_IHL3 .FS2_special_members_price{
margin:5px 0px;
}/* 商品画面:商品詳細:画像ホスティングオプション:商品一覧:IHL3:
拡大ボタン */
#FS2_itemlayout_IHL3 .FS2_AdditionalImageEnlargementSsize_Button{
text-align:right;
}/* 商品画面:商品詳細:オプション価格コンテナ */
.FS2_OptionPrice {
margin-bottom:10px;
}
/* 商品画面:商品詳細:オプション価格テーブル */
.FS2_OptionPrice {}.FS2_OptionPrice th {
font-weight:normal;
padding:2px 8px;
border-bottom:1px solid #DDDDDD;
background:#F6F6F6;
}.FS2_OptionPrice td {
font-weight:normal;
padding:2px 8px;
border-bottom:1px solid #DDDDDD;
text-align:left;
}/* オプション価格(カート画面罫線) */
.FS2_option_price_rule{
color:#DDDDDD;
}/*商品詳細画面------------------------------------------------------------------*/
/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH1 */
/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH1:
商品画像コンテナ横幅 */
#FS2_itemlayout_IH1 .FS2_thumbnail_container{
width:400px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH1:
メイン・サブ画像群サムネイルコンテナ横幅 */
#FS2_itemlayout_IH1 .FS2_additional_image_container{
width:140px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH1:
商品画像・拡大・Prev・Nextボタンテーブルコンテナ横幅 */
#FS2_itemlayout_IH1 .FS2_additional_image_btn_thumbnail_container{
width:420px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH1:
商品詳細右カラム */
#FS2_itemlayout_IH1 .FS2_additional_image_itemdetail_container_right{
width:220px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH1:
商品詳細左カラム */
#FS2_itemlayout_IH1 .FS2_additional_image_itemdetail_container_left{
width:350px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH1:
商品詳細コンテナ*/
#FS2_itemlayout_IH1 .FS2_additional_image_itemdetail_container{
margin-top:2em;
}
/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH2 */
/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH2:
商品画像・拡大・Prev・Nextボタンテーブルコンテナ横幅 */
#FS2_itemlayout_IH2 .FS2_additional_image_btn_thumbnail_container{
width:420px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH2:
商品画像コンテナ横幅 */
#FS2_itemlayout_IH2 .FS2_thumbnail_container{
width:400px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH2:
商品詳細右カラム */
#FS2_itemlayout_IH2 .FS2_additional_image_itemdetail_container_right{
width:220px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH2:
商品詳細左カラム */
#FS2_itemlayout_IH2 .FS2_additional_image_itemdetail_container_left{
width:350px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH2:
メイン画像群サムネイルコンテナ */
#FS2_itemlayout_IH2 .FS2_additional_image_container_main{
float:right;
width:140px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH2:
サブ画像群サムネイルコンテナ */
#FS2_itemlayout_IH2 .FS2_additional_image_container_sub{
margin-top:2em;
width:100%;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH2:
商品詳細コンテナ*/
#FS2_itemlayout_IH2 .FS2_additional_image_itemdetail_container{
margin-top:2em;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH3 */
/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH3:
商品画像コンテナ横幅 */
#FS2_itemlayout_IH3 .FS2_thumbnail_container{
width:410px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH3:
商品詳細右カラム */
#FS2_itemlayout_IH3 .FS2_additional_image_itemdetail_container_right{
width:330px;
margin-left:40px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH3:
メイン画像群サムネイルコンテナ */
#FS2_itemlayout_IH3 .FS2_additional_image_container_main{
float:right;
width:90px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH3:
サブ画像群サムネイルコンテナ */
#FS2_itemlayout_IH3 .FS2_additional_image_container_sub{
width:520px;
}
/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH3:
商品画像・拡大・Prev・Nextボタンテーブルコンテナ横幅 */
#FS2_itemlayout_IH3 .FS2_additional_image_btn_thumbnail_container{
width:430px;
margin-bottom:2em;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH3:
商品詳細コンテナ*/
#FS2_itemlayout_IH3 .FS2_additional_image_itemdetail_container{
margin-top:2em;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH4 */
/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH4:
商品画像コンテナ横幅 */
#FS2_itemlayout_IH4 .FS2_thumbnail_container{
width:200px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH4:
商品詳細右カラム */
#FS2_itemlayout_IH4 .FS2_additional_image_itemdetail_container_right{
width:250px;
margin-left:20px;
}/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH4:
商品詳細左カラム */
#FS2_itemlayout_IH4 .FS2_additional_image_itemdetail_container_left{
width:290px;
float:right;
margin-left:20px;
}
/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH4:
商品画像・拡大・Prev・Nextボタンテーブルコンテナ横幅 */
#FS2_itemlayout_IH4 .FS2_additional_image_btn_thumbnail_container{
width:220px;
float:left;
}
/* 商品画面:商品詳細:画像ホスティングオプション:レイアウト別サイズ指定:IH4:
メイン・サブ画像群サムネイルコンテナ横幅 */
#FS2_itemlayout_IH4 .FS2_additional_image_container{
width:85px;
float:left;
margin-right:10px;
}/* 各レイアウト共通 */
/* 商品画面:商品詳細:画像ホスティングオプション:サムネイルコンテナ */
.FS2_additional_image_btn_thumbnail_container .FS2_thumbnail_container{
border:1px solid #ddd;
margin-bottom:10px;
padding:9px;
text-align:center;
}
/* 商品画面:商品詳細:画像ホスティングオプション:メイン・サブ画像群サムネイルコンテナ */
.FS2_additional_image_container{
float:right;
}/* 商品画面:商品詳細:画像ホスティングオプション:メイン画像群サムネイルコンテナ */
.FS2_additional_image_container_main{
margin-bottom:2em;
}.FS2_additional_image_container_main img{
margin:0px 2px 2px 0px;
border: 1px solid white;
}/* 商品画面:商品詳細:画像ホスティングオプション:メイン・サブ画像群サムネイルコンテナ */
.FS2_additional_image_container_sub{}.FS2_additional_image_container_sub img{
margin:0px 2px 2px 0px;
border: 1px solid white;
}/* 商品画面:商品詳細:画像ホスティングオプション:メイン・サブ画像群名称 */
.FS2_additional_image_container_title{
border-bottom:1px dotted #555;
padding-bottom:2px;
margin:5px 0px;
font-weight:bold;
}
/* 商品画面:商品詳細:画像ホスティングオプション:拡大・Next・Prevボタン */
.FS2_additional_image_btn_container table{
border-collapse:collapse;
border-spacing: 0px;
/*width:100%;*/
}.FS2_additional_image_btn_container td{
vertical-align:top;
}.FS2_additional_image_btn_container .FS2_additional_image_btn_next{
text-align:right;
/*width:59px;*/
}.FS2_additional_image_btn_container .FS2_additional_image_btn_prev{
text-align:right;
/*width:59px;*/
}
/* 商品画面:商品詳細:画像ホスティングオプション:商品詳細コンテナ */
.FS2_additional_image_itemdetail_container{}
/* 商品画面:商品詳細:画像ホスティングオプション:商品詳細右カラム */
.FS2_additional_image_itemdetail_container_right{
float:right;
}
/* 商品画面:商品詳細:画像ホスティングオプション:商品詳細左カラム */
.FS2_additional_image_itemdetail_container_left{}/* 商品画面:商品詳細:画像ホスティングオプション:バリエーションテーブル */
.FS2_additional_image_tableVariation{
margin:10px 0;
}.FS2_additional_image_tableVariation_table {}
.FS2_additional_image_tableVariation_table th{
text-align:left;
font-weight:normal;
padding:2px 2px 2px 2px;
}.FS2_additional_image_tableVariation_table td{
padding:2px;
}.FS2_additional_image_tableVariation_table td span{
display:block;
text-align:center;
color:#777;
}.FS2_additional_image_tableVariation_table td img{}
.FS2_additional_image_tableVariation_border th{
border-top:1px solid #888;
padding-top:4px;
vertical-align:top;
}.FS2_additional_image_tableVariation_border td{
border-top:1px solid #888;
padding-top:4px;
}.FS2_additional_image_tableVariation_bg{
background:#f6f6f6;
}
/* 商品画面:商品詳細:画像ホスティングオプション:拡大(popup window):
ページ余白 */
body#FS2_additional_image_popup{
margin:0px;
padding:0px;
}/* 商品画面:商品詳細:画像ホスティングオプション:拡大(popup window):
画像コンテナ */
#FS2_additional_image_popup .FS2_thumbnail_container{
width:500px;
margin-top:10px;
margin-left:10px;
}#FS2_additional_image_popup .FS2_thumbnail_container img{
border:none;
}
/* 商品画面:商品詳細:画像ホスティングオプション:拡大(popup window):
ページ全体の横幅 */
.FS2_additional_image_popup_container{
width:900px;
padding-bottom:50px;
}
/* 商品画面:商品詳細:画像ホスティングオプション:拡大(popup window):
メイン・サブ画像群サムネイルコンテナ */
.FS2_additional_image_popup_container .FS2_additional_image_container{
float:right;
width:350px;
margin-top:10px;
}
/* 商品画面:商品詳細:画像ホスティングオプション:拡大(popup window):
フッタ */
.FS2_additional_image_popup_footer{
text-align:center;
margin:2em auto 0 auto;
background:#f0f0f0;
padding:1em 0;
position:absolute;
bottom:0px;
width:100%;
}.FS2_additional_image_popup_footer a:link{
color:#fff;
text-decoration:none;
background:#000;
display:inline-block;
padding:5px 10px;
}.FS2_additional_image_popup_footer a:active{
color:#fff;
text-decoration:none;
background:#000;
display:inline-block;
padding:5px 10px;
}.FS2_additional_image_popup_footer a:visited{
color:#fff;
text-decoration:none;
background:#000;
display:inline-block;
padding:5px 10px;
}
.FS2_additional_image_popup_footer a:hover{
color:#fff;
background:#666;
}/* 商品画面:商品一覧:画像ホスティングオプション:バルーンチップ */
/* 商品画面:商品一覧:画像ホスティングオプション:バルーンチップ:コンテナ */
.FS2_AdditionalImage_Balloon_Tip {
width: 300px;
height: 100px;
display: none;
position: absolute;
color: gray;
background-color: white;
border: 1px solid silver;
overflow: hidden;
padding:10px;
}#FS2_AdditionalImage_Balloon_Tip_container {
width: 300px;
left: 10px;
top: 10px;
display: block;
position: fixed;
color: gray;
background-color: white;
border: 1px solid silver;
}#FS2_AdditionalImage_Balloon_Tip_container {
display: none;
}/* 商品画面:商品一覧:画像ホスティングオプション:バルーンチップ:
左側に表示時 */
.FS2_AdditionalImage_Balloon_Tip_left {
border-right: 5px solid silver;
border-bottom: 5px solid silver;
}/* 商品画面:商品一覧:画像ホスティングオプション:バルーンチップ:
右側に表示時 */
.FS2_AdditionalImage_Balloon_Tip_right {
border-left: 5px solid silver;
border-bottom: 5px solid silver;
}/* 商品画面:商品一覧:画像ホスティングオプション:バルーンチップ:
画像共通設定 */
.FS2_AdditionalImage_Balloon_Tip img {
border: 0;
}
/* 商品画面:商品一覧:画像ホスティングオプション:バルーンチップ:
ロールオーバー時背景色 */
.FS2_AdditionalImage_Balloon_Tip_RollOver {
background-color: #f6f6f6;
}
/* 商品画面:商品詳細:画像ホスティングオプション:画像切り替え */
/* 商品画面:商品詳細:画像ホスティングオプション:画像切り替え:
メイン画像群サムネイル */
.FS2_AdditionalImage_switcher_thumbs_color img {
border: 1px solid white;
}/* 商品画面:商品詳細:画像ホスティングオプション:画像切り替え:
サブ画像群サムネイル */
.FS2_AdditionalImage_switcher_thumbs_item img {
border: 1px solid white;
}/* 商品画面:商品詳細:画像ホスティングオプション:画像切り替え:
サブ画像群サムネイル */
.FS2_AdditionalImage_switcher_cursor_pointer {
cursor: pointer;
}
/* 商品画面:商品詳細:画像ホスティングオプション:画像切り替え:
サブ画像群サムネイル */
.FS2_AdditionalImage_switcher_cursor_cross {
cursor: crosshair;
}
/* 商品画面:商品詳細:画像ホスティングオプション:画像切り替え:
サブ画像群サムネイル */
.FS2_AdditionalImage_switcher_thumbnail_selected {
border-color: silver !important;
}/* 商品画面:商品詳細:画像ホスティングオプション:画像切り替え:
サブ画像群サムネイル */
.FS2_AdditionalImage_switcher_btn_prev {
cursor: pointer;
}/* 商品画面:商品詳細:画像ホスティングオプション:画像切り替え:
サブ画像群サムネイル */
.FS2_AdditionalImage_switcher_btn_next {
cursor: pointer;
}
/* 入荷お知らせメールお申し込み:画像ホスティングオプション用:マトリクス */
.FS2_AdditionalImage_ArrivalInformation_Entry_Container_Matorix{
margin:1em 0 2em 0;
}/* 入荷お知らせメールお申し込み:画像ホスティングオプション用:コンボボックス */
.FS2_AdditionalImage_ArrivalInformation_Entry_Container {
display:table;
margin:0 0 15px 0;
width:100%;
background-color:#EEEEEE;
}.FS2_ArrivalInformation_Entry_ListR {
direction:rtl;
}.FS2_ArrivalInformation_Entry_ListR * {
direction:ltr;
}.FS2_AdditionalImage_ArrivalInformation_Entry_Container .FS2_ArrivalInformation_Entry_List,
.FS2_AdditionalImage_ArrivalInformation_Entry_Container .FS2_ArrivalInformation_Entry_Comment {
display:table-cell;
padding:10px;
vertical-align:top;
line-height:1.2em;}
.FS2_AdditionalImage_ArrivalInformation_Entry_Container .FS2_ArrivalInformation_Entry_Comment {}
.FS2_AdditionalImage_ArrivalInformation_Entry_Container .FS2_ArrivalInformation_Entry_List {
padding-left:10px;
padding-right:10px;
}
.FS2_ArrivalInformation_Entry_ListR .FS2_ArrivalInformation_Entry_Comment {
padding-left:10px;
}
.FS2_ArrivalInformation_Entry_ListL .FS2_ArrivalInformation_Entry_Comment {
padding-right:10px;
}/* for IE */
.FS2_forIE8 FS2_AdditionalImage_ArrivalInformation_Entry_Container .FS2_ArrivalInformation_Entry_List {
width:expression(this.getElementsByTagName("img")[0].clientWidth);
}
.FS2_forIE8 .FS2_ArrivalInformation_Entry_ListL .FS2_ArrivalInformation_Entry_List {
float:left;
}
.FS2_forIE8 .FS2_ArrivalInformation_Entry_ListR .FS2_ArrivalInformation_Entry_List {
float:right;
}
.FS2_forIE8 FS2_AdditionalImage_ArrivalInformation_Entry_Container .FS2_ArrivalInformation_Entry_Comment {
width:auto;
}