[戻る]
No.4495

スマホとPCの商品一覧を分けたい

キャラアイコン 56号さん 投稿日:2020/06/24(Wed) 17:24

商品一覧をそのままトップページとして使い「商品一覧・フレーム設定」では、商品フレームをチューニングでPCサイズを数値を指定し見栄えを良くし、スマホサイズは指定なしで、ビッグフレームやメガフレームの指定も行わず、フレームも商品情報も「なし」の設定を行い、CSSで文字のサイズも整えたところ…
ページをスマホ(モバイル)で確認すると、数値指定されたフレームはスマホの画面を越えて表示され(レスポンシブにならず)、スクロールが必要になり、商品名や値段の文字も読めないくらいに小さくなってしまいました。

「確認用デバイスサイズ:PC/タブレット」と「確認用デバイスサイズ:スマートフォン」のどちらで「商品一覧・フレーム設定」を選んでも、同じ設定画面に行きつき、同じ設定が反映されます。
PCならPCだけの商品一覧、スマホならスマホだけの商品一覧を、それぞれ別個で設定することはできないのでしょうか?

商品一覧のような、アイテムの並んだ表組みをHTMLで整え、それをPC用・スマホ用で用意すれば、可能なのでしょうが…そうすると私以外の(HTML知らない)管理人が商品を新規登録したときに(私が表組みを直すまで)タイムラグが発生するので、あまり良い方法ではありません。

諦めて「チューニング」ではなく、標準サイズやらビッグフレームでやった方がレスポンシブになるのでしょうか?
ページそのもののHTML編集(上級モード)まで行くと、今のデザインが総崩れになる恐れがあるので、通常行える設定やdesign.cssの編集などで直せる範囲だと助かります。


(要は…PC用商品一覧のフレームサイズ・折り返し・文字のサイズと、スマホ用商品一覧のフレームサイズ・折り返し・文字のサイズ を分けて設定したい。その手段が有るなら知りたい)

key
No.4498

Re: スマホとPCの商品一覧を分けたい

キャラアイコン おたすけマイショップさん 投稿日:2020/06/24(Wed) 20:59 home

スマートフォンにて表示したときに横幅のサイズがPC用と同様に保たれレスポンシブに対応しない場合は、CSSにて<body>に対して横幅が指定されている可能性がございます。

PC用とスマートフォン用にてCSSの影響を受けないようにする場合は、デザイン設定(店長ナビ>拡張設定)にある「スマートフォン用を別で設定する」にチェックを入れて別のテンプレートを追加していただき、スマートフォン専用にCSSを編集されることをお勧めいたします。

また、スマートフォン表示にてレスポンシブが適用されなかった原因として、CSSにてスマートフォンにも適用される横幅を<body>タグに指定されている可能性がございます。
横幅の指定については、CSSでの指定も可能ですが、以下の手順での設定をお勧めいたします。
※この設定の場合、CSSにて指定したサイトの横幅の指定は削除してください。
※レスポンシブを保ったままの横幅の指定が可能です。

1.ページレイアウト管理(デザイン設定>レイアウトタブ)。
2.レイアウト図内にある[ページ]エリア(黒の外枠)にある[設定]ボタン(歯車アイコン)をクリック。
3.[ページ幅]にて「最大値を指定」または「固定値を指定」を選択して表示される最大または固定値のサイズを登録してください。
4.[最小値]にてチェックを入れて「320px」以上の数値を登録いただき保存すれば完了です。


以上のスマートフォン用のテンプレート、または、ページレイアウト管理での幅の設定をお試しいただきご確認ください。

これらをお試しいただいてもスマートフォンにて表示が希望される内容と異なる場合、お手数をかけますがショップページURLを踏まえお問合せフォームからご連絡をお願いいたします。
(ショップページの設定等を確認いたします)

 お問合せフォーム:https://www.easy-myshop.jp/inquiry.html

key
No.4504

Re: スマホとPCの商品一覧を分けたい

キャラアイコン 56号さん 投稿日:2020/06/25(Thu) 21:54

ありがとうございます。
おかげで狙い通りの(PC、スマホ)別個のCSS指定ができ、見た目も整えられました。

デザイン設定→テンプレート→デザインテンプレートで「スマートフォン用を別で設定する」を選ぶと「最新のデザインテンプレートはレスポンシブで云々」のメッセージが出るし、間を置かないと「スマートフォン用テンプレート」の切り替えタブも出てこないから、最初は操作を間違えてる気がしてなりませんでした。
正直わかりにくい気がします…

key

返信
*おなまえ アイコン [sample]
*email (回答通知用。公開されません)
*タイトル
*内容
ショップURL
*key (修正の際に使用します)
*画像認証 投稿キー

無料で本格的なネットショップ開業できるのは『イージーマイショップ』

- YY-BOARD -