横幅の狭い端末用のトップ画像について(レスポンシブテンプレート、スマートフォン版HTML5テンプレート)

2025-10-21 15:34

画面幅が広い場合と画面幅が狭い場合とで、別々のトップ画像を設定することができます。
例えば、画面幅が広い場合は横長画像を表示し、画面幅が狭い場合は正方形画像を表示するようなケースです。

横幅の狭い端末用画像」を設定すると、PC幅の画面からショップを見た際は通常のトップ画像が表示され、スマートフォン等の横幅の狭い端末からトップ画像を確認した際は「横幅の狭い端末用画像」が表示されます。
※「横幅の狭い端末用画像」が未設定の場合は、通常のトップ画像が表示されます。

ニュートラル以降の新しいレスポンシブテンプレートでは、スマートフォン等の横幅の狭い端末からショップを確認した際、トップ画像の左右がトリミングされますが、トリミングされないように正方形や縦長の画像を設定できます。

対象テンプレート:レスポンシブテンプレートのみ

横幅の狭い端末用のトップ画像を設定する

※「デザイン管理」→「テンプレート選択」で、「レスポンシブテンプレート」が選択されていることを確認します。

デザイン管理」→「配置/画像/コメント」→【メインエリア】欄【トップ画像】をクリックします。

横幅の狭い端末用画像】欄の『ファイル選択』『画像専用管理画面より画像を登録する』から横幅の狭い画像を設定します。
※トップ画像1枚につき1枚設定できます。

横幅の狭い端末用画像を設定した状態
初期画像について

ニュートラル以降の新しいテンプレートでは、初期画像に横幅の狭い初期画像も設定されています。
※初期画像は変更/削除不可のため、アップロードボタンは表示されていません。

※ニュートラルの場合

ニュートラルより前のテンプレート(スタンダード〜シルバーライン)では、初期画像には横幅の狭い初期画像はありません。
※初期画像は編集不可のため、横幅の狭い端末画像を設定できる箇所は表示されません。

※スタンダードの場合

スマートフォン版のHTML5テンプレートについて

スマホ版HTML5テンプレート設定時、トップ画像の初期画像が横幅の狭い画像にて表示されるように変更となりました。

対象テンプレート:ニュートラル以降の新しいテンプレートのみ
※ニュートラルより前のテンプレート(スタンダード〜シルバーライン)では、従来通りの初期画像がそのまま表示されます。

※ニュートラルの場合

※スタンダードの場合