Wix エディタ:モバイルサイトのセクションを管理する
読了時間:5分
コンテンツが整理されて表示されるように、サイトはいくつかのセクションに分かれています。また、セクションごとに分けることでページやパーツを簡単に配置することもできます。
モバイルサイトのセクションを管理して、モバイルサイト訪問者にすっきりとしたレイアウトとスムーズな体験を提供しましょう。
この記事では、下記の項目について説明します:
モバイルサイトからセクションを非表示にする
モバイル版サイトのセクションを簡単に非表示にして、訪問者に合わせてカスタマイズすることができます。これはデスクトップサイトには影響しないため、気が変わった場合は、いつでもセクションを再表示できます。
セクションを非表示にする方法:
- モバイルエディタでセクションをクリックします。
- 「非表示」アイコン をクリックします。
![モバイルエディタでセクションが選択されています。カーソルが「非表示」アイコンにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/03/13/db669744-d42d-4eb7-ab98-f98844225fb1/5a7b5de5-3bb4-4e9a-a203-1ebfe9d90449.png)
非表示のセクションを表示する方法:
- モバイルエディタ左側で「モバイル上で非表示」アイコン をクリックします。
- 該当するセクション横の「表示」をクリックします。
![「モバイル上で非表示」パネル。カーソルが非表示にしたセクション横の「表示」ボタンにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/03/13/520920cc-ae35-4357-870b-471eaf394339/a1328017-3f0d-4a51-94d9-a21d949807fe.png)
モバイルサイトのセクションを並び替える
セクションを移動させて、モバイルサイトに表示される情報の順序を整理します。これは、モバイル版のサイトで、地図や会社の電話番号など、サイト上のさまざまなコンテンツを強調したい場合に特に便利です。
セクションを並び替える方法:
- エディタ上部のツールバーで「ズームアウト」アイコン をクリックします。
- セクションをクリックし、いずれかの矢印をクリックします:
- セクションを下に移動 :選択したセクションをその下のセクションの下部に移動させます。
- セクションを上に移動 :選択したセクションをその上のセクションの上部に移動させます。
![モバイルエディタでセクションが選択されています。カーソルが下に移動オプションにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/03/13/ac569d74-b6ca-42ca-9ba1-c1e77b26d87f/5fb40a3b-e7dc-4125-88d4-ec500cd87016.png)
セクションにスクロールエフェクトを追加する
セクションの背景にクールなスクロールエフェクトを追加して、モバイルサイト訪問者に目を引く体験を作りましょう。背景の種類(単色、画像、動画)に応じて、さまざまなエフェクトから選択し、モバイルサイトをより魅力的にすることができます。
セクションの背景にスクロールエフェクトを追加する方法:
- モバイルエディタ内でセクションをクリックします。
- 「アニメーション」アイコン をクリックします。
- スクロールエフェクトを選択します。
![モバイルエディタにおけるセクションのスクロールエフェクトパネル。「傾斜」オプションが選択されています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/03/13/fd1abafa-2f41-4981-a7cb-49171c180e55/3d7f757a-8eb8-4a42-b30e-72a50d03cbc6.png)
備考:
表示されるエフェクトオプションは、セクションの背景の種類によって異なります。 モバイルサイトのスクロールエフェクトについてはこちら
セクションのシェイプ区切りをカスタマイズする
シェイプ区切りは、セクションのコンテンツを整理するために使用するグラフィックシェイプです。デスクトップエディタのセクションにシェイプ区切りを追加すると、自動的にモバイルサイトに引き継がれます。
必要に応じて、区切りを調整してカスタマイズしたり、モバイルサイトで非表示にすることができます。これはデスクトップサイトには影響しないため、モバイルサイト訪問者のニーズに最適なレイアウトを作成できます。
モバイルでシェイプ区切りを調整する方法:
- モバイルエディタでセクションをダブルクリックします。
- 「シェイプ区切り」アイコン をクリックします。
- 「上」または「下」タブを選択します(区切りを追加した場所によって異なります)。
- モバイルサイトのシェイプ区切りを調整する方法を選択します:
- シェイプを変更する: セクションの新しいシェイプを選択します:
- Wix 画像・動画素材:パネルで新しいオプションを選択するか、「もっと見る」をクリックして Wix カタログからオプションを選択します。
- 独自のシェイプを使用する:「もっと見る」をクリックしてメディアマネージャーを開き、「+アップロード」を選択してアップロードし、独自のシェイプをセクションに適用します。
- デザインをカスタマイズする:「デザインを編集」をクリックして、モバイルサイトの区切りの外観を変更します。モバイル用にシェイプ区切りをカスタマイズする方法はこちら
- 区切りを削除する:パネルで「なし」をクリックして、モバイルサイトのセクションから区切りを削除します。
- シェイプを変更する: セクションの新しいシェイプを選択します:
![モバイルエディタ内のセクションの区切りの「デザインを編集」パネル。高さの設定を調整しています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/03/13/a793248b-525d-48d3-8314-0347663890ca/62097303-fb83-4ed8-8cde-ae82373a9d5f.png)
注意:
「モバイルに追加」パネルから、モバイル専用のシェイプ区切りをセクションに追加することはできません。デスクトップエディタから追加したシェイプ区切りのみを変更または調整できます。デスクトップでシェイプ区切りを追加する方法はこちら