商品一覧画面や商品詳細画面のレイアウトを、ブラウザ幅によって可変させることはできますか？

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

ウインドウ幅に応じてレイアウトを可変させるCSSをご案内します。

 

【ご注意ください】
CSSでのカスタマイズは思わぬ挙動をする場合がございます。
CSS追記後、意図した表示・動作になるか、購入が正しく行えるかなど、必ず動作確認をお願いいたします。
 

商品一覧ページの設定

以下のページのように、商品一覧表示列数をブラウザ幅にあわせて可変させます。
http://sample.future-shop.jp/fs/fs2sample/c/LF_auter

サンプルソース

構築＞ページ設定＞商品ページ設定にて、商品検索結果の表示パターンを「IHL2」に設定し、
以下のサンプルソースをオリジナルCSSに貼り付けてご登録ください。

.layout_menu{padding-left:10px;}
.layout_table{width:100%}
.groupLayout br{display:none;}
#FS2_itemlayout_IHL2{text-align:center; width:150px;}
.FS2_AdditionalImageEnlargementSsize_Button{text-align:right;}
	#FS2_itemlayout_IHL2.gl_Item{
	padding:10px;
	margin:3px;
	border:none;
	background:#f8f8f8;
}
.FS2_AdditionalImage_Balloon_Tip {
	width:120px;
	height:80px;
	text-align:left;
	background-image:none;
	background:#fff;
	border:1px solid #ccc;
}

 

 

商品詳細ページの設定

以下のページのように、サムネイル画像表示エリアをブラウザ幅にあわせて可変させます。
http://sample.future-shop.jp/fs/fs2sample/LF_auter/gd37

 

サンプルソース

※商品基本情報編集画面内のレイアウトスタイルを「IH1」に設定し、
以下のサンプルソースをオリジナルCSSに貼り付けてご登録ください。

$fsJq(document).ready(
function(){
$fsJq('div.FS2_additional_image_itemdetail_container_right').insertAfter('div.FS2_additional_image_itemdetail_container_left');
$fsJq('div.FS2_additional_image_container').insertAfter('div.FS2_additional_image_btn_thumbnail_container');
$fsJq('div.FS2_additional_image_container').width($fsJq('#FS2_itemlayout_IH1').width()-$fsJq('.FS2_additional_image_btn_thumbnail_container').outerWidth(true));
$fsJq('div.FS2_additional_image_container').width($fsJq('div.FS2_additional_image_container').width()-(Number($fsJq('div.FS2_additional_image_container').css('padding-left').replace( /[^-0-9\s]+/g, '' ).split( /\s+/ ))+Number($fsJq('div.FS2_additional_image_container').css('padding-right').replace( /[^-0-9\s]+/g, '' ).split( /\s+/ ))));
});