Wix Studio エディタ:ページをスキャンしてレスポンシブデザインの問題を確認する

読了時間:6分
複数のデバイスを利用できる今日では、クライアントのためにレスポンシブデザインを作成することが必須です。Wix Studio のレスポンシブチェッカーを使用すると、このプロセスが簡素化され、ブレイクポイント全体の問題をすばやく特定して管理することができます。
問題を修正、表示、または無視するかを選択できるため、ビジョンに合わせてデザインを微調整することができます。
未解決の問題と修正済みの問題が表示されている、Wix Studio エディタのレスポンシブチェッカーのスクリーンショット

ページをスキャンしてレスポンシブの問題を確認する

このページのレスポンシブの問題を修正し、すべての画面サイズでデザインがきちんと表示されるようにします。ページはすべてのブレイクポイントでレビューされます。その後、特定された問題がデザインに関連しているか、無視するか決定してください。

ページをスキャンする方法:

  1. エディタに移動し、該当するサイトページを開きます。
  2. エディタ左側の「サイトチェッカー」  をクリックします。
  3. レスポンシブの問題を修正」を選択します。
  4. ページを確認」をクリックします。
  5. このページで見つかった問題を確認します。
  6. 問題ごとに実行する内容を選択します:
    • 問題を修正する:問題の横にある「Fix(修正)」をクリックします。これにより、該当する要素に推奨事項が自動的に適用され、パネルから問題が削除されます。
    • ページで問題を確認する:「キャンバスで表示」をクリックして、修正を適用するかどうかを決定する前に問題がどのように表示されるを確認します。
    • 問題を無視する:問題の「無視」アイコン  をクリックして、問題を無視します。このページを再度スキャンしても、この問題が再び表示されることはありません。
  7. (オプション)別のページをスキャンします:
    1. 上部のページドロップダウンをクリックします。
    2. 該当するページの横にある「Scan(スキャン)」をクリックします。
Wix Studio エディタのレスポンシブチェッカーで、クリックしてキャンバスでの配置の問題を表示しているスクリーンショット
ヒント:
一部の問題は、特定のブレイクポイントでのみ表示されます。その場合、問題の左下に該当するブレイクポイントを表すアイコンが表示されます。

無視した問題を復元する

問題を無視すると、ページが再度スキャンされても、レスポンシブチェッカーはその問題を完全に無視します。ただし、無視された問題は、いつでも確認することができ、修正を適用するかどうかを決めることができます。

無視した問題を復元する方法:

  1. エディタに移動し、該当するサイトページを開きます。
  2. エディタ左側の「サイトチェッカー」  をクリックします。
  3. レスポンシブの問題を修正」を選択します。
  4. 上部の「フィルター」アイコン  をクリックします。
  5. 無視された問題」を選択します。
「レスポンシブチェッカー」パネルの上部で「フィルター」アイコンをクリックし、「無視された問題」を選択しているスクリーンショット
  1. (オプション)該当する問題横の「View on Canvas(キャンバスで表示)」をクリックして、ページ上で表示します。
  2. Restore(復元)」をクリックします。
  3. (オプション)復元された問題を修正します:
    1. 上部の「フィルター」アイコン  をクリックします。
    2. 未解決の問題」を選択します。
    3. 復元された問題を確認し、「修正」をクリックします。
レスポンシブチェッカーで「Restore(復元)」をクリックしている、「無視された問題」が表示されているスクリーンショット

よくある質問

詳細については、以下の質問をクリックしてください。
レスポンシブデザインに関する詳細:
Wix Studio アカデミーでは、レスポンシブサイトをすばやくデザインするための豊富なリソースを提供しています。エディタでのレスポンシブ性については、以下をご覧ください: