こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回はmakeshopでよくあるご質問から
スマートフォンショップで表示する画像サイズについてご紹介します！

こんなお悩みありませんか？

・PC用の画像をスマホで見たら画像だけ大きくてページ幅からはみ出ている・・
・見るスマホによって画像が小さくなってしまいます・・
・スマホ幅に合わせた画像作りたいけど、どんなサイズで作ればいいの？

[難易度 ★☆☆ ]
スマホショップでも最適に見える画像サイズとその表示方法とは！

解決方法

（1）大きい画像をつかう！

スマホでは何ピクセルで画像を作ったらいいかの明確な規定はありません。
現在普及しているデバイスの画面サイズを考慮して大きい画像を用意しましょう！

具体的には外部の参考サイトを参照してみます！

・外部サイト：iPhone画面サイズ早見表
・外部サイト：Android 画面サイズ・ピクセル数早見表

→例えば
画面サイズ「横幅640px × 高さ960px」のスマホに合わせる場合は、横幅960px程度の画像を用意しておくと安心です！

（2）画像をページ幅に自動で拡大・縮小させる！

ショップデザイン / テンプレート選択・編集 / スマホデザインの設定
　適用中のスマホテンプレートの「編集」をクリック
「共通CSS管理」へ

「共通CSSページ編集」のエディターエリア内へ下記のスタイル指定を追記してください。

img {
	max-width: 100%;
	height: auto;
}

（3）調整完了！

→できあがり！
かんたんですね。

いかがでしたでしょうか。
ぜひお試しください！それではまた！