Wix エディタ:モバイル画像背景をクロップ・設定する
読了時間:3分
モバイル版サイトのページ背景はデフォルトではデスクトップ背景と同じになっています。
モバイル画面は小さいため、モバイル端末で正しく表示されるようにするには、画像を切り抜くか、設定を変更する必要があります。
下記をご確認ください:
モバイル用の背景画像をクロップする
モバイル画面はデスクトップ画面とは形やサイズが異なるため、モバイルサイトでは背景画像が異なって見える場合があります。画像をクロップすることで、希望通りに表示され、画面のサイズや形に合うようにすることができます。
モバイル背景画像をクロップする方法:
- モバイルエディタ左側の「背景」
をクリックします。
- 「画像」をクリックします。
- メディアマネージャーで画像にマウスオーバーし、「画像を編集」アイコン
をクリックします。
- 「クロップ」をクリックします。
- 画像を切り抜き、「保存」をクリックします。
- 「背景を変更」をクリックします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/09/24/c426fcaf-a5fd-4de0-a5b7-cc984c70b669/a1b50176-5351-472e-9cc6-1c5c7a8af198.png)
モバイル背景画像の設定を調整する
画像をクロップするだけでなく、スクロール効果や位置などの設定を変更して、モバイルサイトでの表示方法を設定することもできます。
画像設定を変更する方法:
- モバイルエディタ左側の「背景」
をクリックします。
- 「設定」をクリックし、以下のオプションを使用して背景画像を調整します:
- 不透明度:スライダーをドラッグして、画像の不透明度を調整します。
- 画像の背景色:カラーボックスをクリックして、背景画像の後ろの色を選択します。
- スクロールエフェクト:スクロール時に画像を固定するかどうかを選択します。
- なし:スクロール効果はありません。
- フリーズ:背景画像は固定されています。スクロールしても動きません。
- 画像の表示方法:ドロップダウンメニューから画像のスケーリング方法を選択します:
- 拡大表示:背景画像は、画面サイズに合わせてサイズ変更されます。
- フィット:背景画像は、幅と高さの比例関係を維持します。
- タイル表示:背景画像は、画面全体にタイル状に表示されます。
- ストレッチ:背景画像はページの長さに合わせて引き延ばされます。
- 表示位置:グリッド上の背景画像の位置を選択します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/09/24/17f0a4ff-6bcc-47f3-9afb-5cb973d1e019/4bffe087-9ae0-4f64-bcff-61ff8aaf8778.png)
注意:
表示されるオプションは、選択したスクロールエフェクトによって異なります。