「画像ホスティングオプション」追加時に必要なCSS

コマースクリエイター未利用店舗様専用の記事です

運用途中で「画像ホスティングオプション」を追加される場合は、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;
}
 

この記事は役に立ちましたか?