Wix Studio エディタ:不要な隙間や横スクロールバーが表示される問題のトラブルシューティング
読了時間:4分
Wix Studio エディタでサイトを作成していると、ページに不要な隙間や横スクロールバーが表示されることがあります。そのような場合は、この記事の手順に従うことで、どの画面サイズでも訪問者にそれらが表示されないよう修正することができます。
![コンテンツを閲覧するために横スクロールバーが表示されているライブサイトの一例。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/12/769ce368-7430-4372-bcfd-950fd7249908/5a86d2b5-ef02-4ce9-990f-511a0b42bdd8.gif)
ステップ 1 | レイヤーパネルで要素を見つけて再配置する
要素がセクションの境界線の外側にある場合、その要素が完全に表示されるよう、ページに空白の隙間が自動的に作成されます。レイヤーパネルを開いて各ページ要素をクリックすると、それらの場所を確認し、必要に応じて境界線の内側に再配置することができます。
レイヤーパネルで要素を見つけて再配置する方法:
- Wix Studio エディタ左側で「レイヤー」
をクリックします。
- 要素を選択すると、ページ上での場所を確認します。
- 以下のツールを使用して、要素を再配置します:
- 要素を好きな場所にドラッグ&ドロップします。
- ハンドルを使用して、要素のサイズを小さくします。
- 矢印アイコン
をクリックして要素設定パネルを開き、マージンを調整するか要素をリサイズします。
![レイヤーパネルで画像が選択されています。カーソルが要素設定パネルの「幅(W)」にマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/11/01/c29d06e9-63e9-4238-a49d-996699a98a1a/119d6af8-557a-497c-a3b4-19d115192d0d.jpg)
ステップ 2 | ページの隅にある要素を確認する
要素がセクションの内側に配置されていても、その端がページの境界線を越えている場合は、ページに空白の隙間や横スクロールバーが作成されることがあります。これは、テキスト要素でよく発生します。
各セクションをクリックし、ページの隅に近いすべての要素にマウスオーバーして、いずれかがオーバーフローしている場合(はみ出している場合)は、必要に応じてその要素を移動またはリサイズすることができます。
![Wix Studio エディタサイト。カーソルがページの枠線を超えた画像にマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/10/11/0cd710af-7762-408b-b810-3d16e30506b6/994c9acd-3ac9-44c8-a54d-adc46eba0f5f.png)
ステップ 3 | ページのオーバーフローコンテンツ設定を変更する
ページのオーバーフローコンテンツを非表示にすると、ページに空白の隙間や横スクロールバーを表示させないようにすることができます。ただし、この設定ではページの境界線を越えている要素がその部分だけ非表示になるため、配置によっては要素が切り取られたように表示されます。
オーバーフローコンテンツ設定を変更する方法:
- ページを選択します:
- 該当するページにアクセスします。
- Wix Studio エディタ左側で「レイヤー」
をクリックします。
- 「ページ」をクリックします。
- Wix Studio エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「デザイン」タブ
をクリックします。
- 「オーバーフローコンテンツ」ドロップダウンから「非表示」を選択します。
![Wix Studio エディタ内のページの要素設定パネル。カーソルが「非表示」オプションにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/11/01/9be71548-e128-42f6-8ebd-75ca327cba6a/e3b0995f-e245-44f1-b8c7-8ecc4ebf20e7.jpg)
ステップ 4 | セクションの高さを確認する
セクションまたは CSS グリッドに設定した高さやその最小値によって、ページに不要な隙間が作成される場合があります。「画面にフィット」またはビューポートの高さを基準とする「vh」という単位を使用している場合は、画面が大きいほど隙間が大きく見えることがあります。
そのような場合は、要素設定パネルを使用して、セクションまたは CSS グリッドのサイズを確認し、必要に応じて高さやその最小値を変更することができます。
セクションの高さを確認する方法:
- 該当するセクションを選択します。
- Wix Studio エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「デザイン」タブ
をクリックします。
- 「サイズ」下で、「高さ」と「Min H(高さの最小値)」の設定を確認して調整します。
![Wix Studio エディタ内のセクションの要素設定パネル。カーソルが「高さ(H)」にマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/11/01/2727bc2c-3ac5-4333-aefd-95969d37bcf6/a1ac6601-2767-4919-ba0b-22986289f06b.jpg)
トラブルシューティング
クライアントのライブサイトに不要な隙間が表示されている場合は、こちらの動画ガイドを確認して問題のトラブルシューティングを実施してください。(英語)