futureshop FAQ

本サイトは、弊社サービスfutureshop」ご契約店舗様用のFAQサイトです。
お困り事やご不明点等ございましたら、お気軽にフューチャーショップサポートまでご連絡ください。

  • 電話でのお問合せ番号(平日10:00~17:00)
  • メールでのお問合せ
  • 文字サイズ変更
  • S
  • M
  • L
  • No : 2792
  • 公開日時 : 2017/10/28 17:37
  • 更新日時 : 2022/01/06 15:50
  • 印刷

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

回答

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

ウインドウ幅に応じてレイアウトを可変させる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+/ ))));
});

コマースクリエイター用の開店ガイドできました!

はじめてのコマースクリエイター!ショップ開店ガイド

スムーズに解決できなかった場合、記事改善のため解決できなかった理由をお聞かせください。

ご意見・ご感想をお寄せください お問い合わせを入力されましてもご返信はいたしかねます

フューチャーショップサポート

「虎の巻」でお悩みが解決できない場合や、ご不明点等がございましたらお気軽にご連絡ください。

  • お電話でのお問い合わせ(平日10:00~17:00)お電話でのお問い合わせ(平日10:00~17:30)
  • メールフォームをご利用くださいお問い合わせフォーム

ページ
トップへ