対象プラン：全プラン

PCとモバイルのそれぞれで画像を変更する方法

レスポンシブ設定は、通常ブレイクポイントごとにサイズなのど設定を変更することで行えます。ただし、「画像」「テキスト文言」「グルーピング構造」は、サイズや色のようにブレイクポイントごとに変更することはできません。

そのため、これら要素をブレイクポイントごとに変更したい場合は、ボックスの表示設定を使います。

この記事では、ボックスの表示設定を使って、PCとモバイルそれぞれの画面幅で異なる画像を表示する方法をご紹介しまします。

Tips：動画での解説も行なっておりますが、内容は公開時点のStudio仕様に基づきます。最新の仕様と異なる可能性があるのであらかじめご了承ください。

手順

PC用のデザインを事前にご用意ください。

ブレイクポイントは、「標準」の状態で画像ボックスをコピーします。

モバイル用の画像を用意します。

ボックスの表示設定を使い、ブレイクポイントごとにコンテンツを表示・非表示の設定をします。

モバイル時に表示する画像を選択します。
エディタ左上にある目のアイコンをクリックします。チェックが入ると表示で、外れると非表示となるのでモバイル以外はチェックを外しモバイルの画面幅でのみ表示されるよう設定します。
モバイル以外で表示する画像を選択します。
モバイルのみチェックを外し、モバイルでは非表示とします。

設定した内容が意図したものになっているかサイト公開前に確認しておきましょう。

エディタ上でブレイクポイントを切り替えて、画像が切り替わるか確認します。