Wix Studio エディタ：エディタとライブサイトでの表示が異なる場合のトラブルシューティング
5分
この記事内
- ブレイクポイントとビューポートのサイズを一致させる
- マージンの単位を一致させる
- レスポンシブ動作を一致させる
- 要素の表示設定を確認する
Wix Studio エディタで公開したサイトを表示すると、エディタでの表示とは見た目が異なる場合があります。通常、これらの違いは僅かなものですが、場合によっては要素の位置がずれたり、要素が途切れたりすることがあります。
一般的に、これらの違いは、要素のサイズ、位置、ビューポートでの動作の設定によって発生します。この記事では、各画面サイズでエディタと同じように表示されるよう、これらの問題のトラブルシューティングについて説明します。
最近サイトを編集した場合：
すべての変更内容を公開し、サイトに最新の内容が表示されていることを確認してください。ブラウザのデバイスモードを使用すると、1つのデバイスで異なるビューポートを確認することができます。
ブレイクポイントとビューポートのサイズを一致させる
ブレイクポイントとは、異なるデバイス用にサイトをデザインする際に使用する、画面サイズの範囲のことを指します。この範囲内であれば、特定の編集サイズを設定することができます。たとえば、320～750 ピクセルのブレイクポイントであれば、編集サイズを 500 ピクセルに設定することができます。
ビューポートとは、訪問者の画面サイズのことを指します。ライブサイトが特定のビューポートで異なる表示になる場合は、編集サイズをビューポートに合わせて調整することができます。
編集サイズを設定する方法：
- エディタで該当するページとブレイクポイントに移動します。
- 上部で現在の編集サイズをクリックします。
- 「編集サイズ」横に新しい数値を入力します。
- 「適用する」をクリックします。
- Wix Studio エディタのツールを使用して調整します。
マージンの単位を一致させる
要素のマージンの単位を変更する方法：
- 該当する要素を選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。
- 「配置」までスクロールダウンします。
- 「マージン」横のドロップダウンをクリックします。
- 該当する単位を選択します。
レスポンシブ動作を一致させる
親要素と子要素のレスポンシブ動作が一致していないと、ライブサイトでコンテンツに問題が発生する可能性があります。
たとえば、コンテナにボタンが配置されていて、ボタンのレスポンシブ動作が「固定」に設定され、コンテナのレスポンシブ動作が「比例してスケーリング」に設定されているとします。この場合は、ボタンが固定されているため、親コンテナに合わせてサイズが変更されなくなります。さらに、ライブサイトでは不要な隙間ができたり、要素が重なったり、要素が途切れたりする可能性もあります。これは、要素の 1つが「Mixed（ミックス）」のレスポンシブ動作になっている場合にも発生する可能性があります。
この問題を解決するには、該当する要素のレスポンシブ動作を一致させることをおすすめします。
要素のレスポンシブ動作を変更する方法：
- 該当するブレイクポイントを選択します。
- 要素を選択します。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
- 「レスポンシブ動作」ドロップダウンで、親要素または子要素と一致するオプションを選択します。
注意：
これらの違いは要素の高さにも影響し、サイトに不要な隙間ができる可能性があります。不要な隙間ができた場合のトラブルシューティングはこちら
要素の表示設定を確認する
一部の画面サイズでは要素が表示され、別の画面サイズでは表示されない場合は、その要素が特定のブレイクポイントで非表示になっている可能性があります。この場合は、レイヤーパネルを使用して要素を見つけ、必要なビューポートで表示するよう設定することができます。
要素の表示設定を確認する方法：
- エディタに移動し、該当するページを開きます。
- エディタ上部でブレイクポイントを選択します。
- 左側で「レイヤー」
をクリックします。 - リストで非表示の要素を見つけます。
- （オプション）「表示」アイコン
をクリックします。
注意：
要素の削除、または別のセクションやコンテナへの移動などの変更は、どのブレイクポイントで作業しているかに関わらず、すべてのブレイクポイントに適用されます。特定のブレイクポイントでのみ要素を非表示したい場合は、右クリックメニューから非表示にすることができます。