Wix エディタ:モバイルサイトのレイアウトの問題を修正する
読了時間:4分
Wix は、デスクトップサイトのコンテンツとパーツを使用して、自動的にモバイルサイトを作成します。これらは別々のサイトではなく、同じサイトを異なる方法で表示させたものです。
モバイルサイトは、小さな画面に合わせて最適化され、レイアウトもそれに応じて変更されます。そのため、モバイルサイトの構造や配置には、何らかの問題が発生することがあります。このような場合には、コンテンツを再配置・調整することで問題を解決でき、モバイルサイトの訪問者にすっきりとしたレイアウトとスムーズな閲覧環境を整えておくことができます。
この記事では、以下についての詳細と修正方法を説明します:
パーツが違う場所に表示される
デスクトップエディタでページに追加したパーツは、モバイルサイトでは異なる配置になることがあります。その場合、選択した場所にドラッグすることで、手動でパーツを再配置することができます。
![GIF では、ドラッグしてストリップを移動させる様子を表しています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/12/07/1b931671-81d8-4a4f-914a-c687c198ba4c/d261b7a8-43fe-4bf1-8c54-99d4183d2c52.gif)
モバイルサイトのメニューボックス、ヘッダー、またはフッターにパーツが表示されている場合、ページ内にそれをドラッグさせることはできません。ただし、右クリックメニューを使用して、メニュー、ヘッダー、フッター間でこれらのパーツを移動させることは可能です。ヘッダー、フッター、モバイルメニュー間でパーツを移動させる方法はこちら
![モバイルエディタでパーツを右クリックした際のメニュー。「移動先」のオプションがハイライトされています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/07/06/3a566f44-6a2b-4c5e-9e61-f5923adee16b/80d5ef00-3f6c-475a-a792-3bb10df26c89.png)
パーツが選択できない場合:
パーツをドラッグして移動できない場合は、サイト上で何らかのものと重なっている可能性があります(ヘッダーなど)。重複したパーツについての詳細はこちら
モバイルサイトに不要な余白がある
モバイルサイトには、不要な余白(隙間)がある場合があります。これらは、特定のパーツやページの高さが原因となっている可能性があります。
この場合、余白がある場所に応じ、ズームアウトや並び替え機能を使用したり、パーツのレイアウトを変更したり、ページの高さを変更したりすることで余白を削除することができます。モバイルサイトの余白を削除する方法についてはこちら
それでも削除できない余白がある場合は、見つけにくい小さなパーツが原因となっている可能性があります。その場合は、レイヤーパネルを使用して、それらのパーツを探したり、順序を前後に移動させたりすることが可能です。パーツを特定して移動させる方法についてはこちら
![モバイルエディタから見たサイト。ストレッチハンドルがハイライトされています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/07/06/8e01d418-b09d-448f-b578-ec49ce8f6de5/ed317488-8404-4e69-ab11-24cb5d4941f7.png)
モバイルサイトでパーツが非表示になる
モバイルサイトを編集する際、デスクトップサイトに表示されているパーツが見つからないことがあります。これは、よりモバイル端末に適したサイトにするため、自動的に一部のパーツがモバイルサイト上で非表示にされるためです。
その場合は、「モバイル上で非表示」パネル
から、モバイルサイトで非表示になっているパーツを確認したり、表示させるよう設定したりすることができます。モバイルエディタで非表示のパーツについての詳細はこちら
![モバイルエディタの「ページレイアウト最適化」ツール。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/07/06/86dcb15f-85d2-4aa5-9ad9-7b313fcae659/29dce89c-574d-4b7c-86aa-86dfbf569fc6.png)
ご存知でしたか?
モバイルサイトからデスクトップのパーツを非表示にして、モバイル専用パーツに置き換えることができます。パーツには豊富なカスタマイズオプションが用意されているため、モバイルでブランドやビジネスを正確に反映させたサイトを作成することが可能です。モバイル専用パーツを追加する方法はこちら
一般的なレイアウトの問題
モバイルサイトのレイアウトが気に入らない場合や構成を変更したい場合は、モバイルエディタの左側にある「ページレイアウト最適化」
を使用してサイトを変更することができます。このツールは、ページのコンテンツを再配置して、小さな画面により合わせてモバイルサイトのレイアウトを最適化します。モバイルサイトを最適化する方法はこちら
重要:
- 上記の手順に従ってもモバイルのレイアウトに問題が生じている場合は、こちらからお問い合わせください。
- 新しいエディタを利用してサイトを構築している場合、ページレイアウト最適化ツールにはアクセスできません。これは、Wix が自動的にモバイルレイアウトを最適化することが理由です。
お役に立ちましたか?
|