[戻る]
No.7113

画面幅がスマホサイズの時の検証ツールについて

おたすけショップさん  投稿日:2024/04/09(Tue) 14:55
key

ブラウザの幅を縮めていくとスマホデザインに切り替わりますが、その状態でブラウザの検証機能を開くと、PCデザインが縮小されただけの見た目に戻ってしまい、スマホデザインのコードを見ることができません。なぜでしょうか?

また、ページ設定でPCの最小幅を750pxにしているので、750px未満でスマホデザインに切り替わって欲しいのですが、設定と違って650px程度で切り替わります。こちらも対策をお教えください。

Re: 画面幅がスマホサイズの時の検証ツールについて

おたすけマイショップさん  2024/04/09(Tue) 18:38 No.7115
key

恐れ入りますが、ブラウザの検証機能に関してはブラウザ側の仕様が関わりますので、弊社で詳細の案内ができないことをご了承ください。
なお、過去にブラウザの検証機能を使用された際の設定が適用されている可能性もございます。
お手数ではございますが、検証機能上で再度スマートフォン表示に切り替える設定等をお試し願います。

次にページレイアウト管理(拡張設定>デザイン設定)のレイアウト図内、黒いページ右の設定(歯車アイコン)でにてパソコン表示の最小幅を指定されている認識で回答いたします。

恐れ入りますが、上記設定は指定の画面幅以下でもショップデザインが変動しない(指定の幅以下では画面が見切れるが、画面スクロールで表示内容を確認できる)ようにする設定となり、
指定した幅以下でスマートフォン表示に切り替えとは異なることをご了承ください。

また、イージーマイショップのショップページはCSSを利用して、特定の横幅(700px)以下でスマートフォン表示となるよう初期設定がされています。
こちらを変更する場合、店舗様にてCSSの編集や追加が必要となりますので予めご了承ください。

CSSの編集は、拡張設定>デザイン設定>テンプレートタブを開き、使用しているテンプレートの[CSS]をクリックします。
「design.css(デザインテンプレート)」の編集(鉛筆ボタン)をクリックし、記載されている以下箇所を全て変更してください。

[該当の記述]
 @media screen and (max-width: 700px)
 ↓以下に変更。
 @media screen and (max-width: 750px)

その他、上記とは異なりシステム側で記述されているスタイルもございます。
こちらは店舗様で別途スタイルを追加いただき、スタイルを上書きいただかないとスタイルは反映されませんのでご注意ください。

なお、スタイルに関してはサポート対象外となりますので、弊社で詳細やスタイル例の案内はできませんことをご了承ください。
お手数ですが各所のclassに対し、店舗様で別途スタイルを追加いただくようお願いいたします。
※class はGoogleChromeであれば対象の場所を右クリックして「検証」、MicrosoftEdgeであれば「開発者ツールで確認する」にてご確認いただけます。

スタイルの追加箇所は以下をご参照ください。

 サイトにCSS(スタイルシート)を追加する
 https://emshelp.easy-myshop.jp/c-item-detail?ic=site-style



返信
*おなまえ
*email (回答通知用。公開されません)
*タイトル
*内容
ショップURL
*key (修正の際に使用します)

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