Wix Studio エディタ:ブレイクポイントを管理する
読了時間:4分
Wix Studio エディタを使用すると、さまざまなブレイクポイントに適応する完全にレスポンシブなサイトを作成できます。ブレイクポイントはデザインが調整されるポイントで、訪問者はどのデバイスからでも常にサイトの最適なバージョンを確認できます。
ページとマスターセクションごとに関連するブレイクポイントを定義し、それに応じてデザインをカスタマイズします。
この記事では、以下の項目について説明します:
さらに詳しく知りたい場合:
サイトのブレイクポイントを表示する
デフォルトでは、Wix Studio エディタには、ユーザートラフィック(モバイル、タブレット、デスクトップ)に基づいた最も一般的なブレイクポイントが付属しています。Wix で特集されたブレイクポイントは、幅広い画面サイズに対応していますが、必要に応じて定義し、カスタマイズすることができます。
エディタ上部には 3つのデフォルトブレイクポイントがあります。ブレイクポイントをクリックしてビューに入り、ページまたはマスターセクションのカスタマイズを開始します。
![Wix Studio エディタのトップバーのスクリーンショット。ブレイクポイントアイコンがハイライトされます。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/29/a7e7c330-894f-4759-9440-8ec222dd46c7/7059a968-1c41-4efb-9d0e-75621dec13ee.jpg)
キャンバスの左右にあるハンドルをドラッグして、ブレイクポイント間を移動することもできます:
![エディタキャンバスのスクリーンショット。キャンバスのサイズを変更するためのハンドルがハイライトされ、拡大表示されています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/29/ac1fa0e3-a77e-4e69-b804-10bf1d6cbc60/db16f246-7105-426d-b752-0690ee5813f1.jpg)
ヒント:
ハンドルをダブルクリックして、特定のブレイクポイントの最大値にすばやく移動できます。
新しいブレイクポイントを追加する
デフォルトのブレイクポイントには含まれない特定のサイズでページをデザインすることができます。パネルから、カスタムサイズのブレイクポイントを追加できます。
新しいブレイクポイントを追加する方法:
- 作業中のページまたはマスターセクションを選択します。
- エディタトップバーでブレイクポイント横の「ブレイクポイントを編集」アイコン
をクリックします。
- 「ブレイクポイントを追加」をクリックします。
- ブレイクポイントのピクセルを入力します。
- 「完了」をクリックします。
注意:
サイトのページ / マスターセクションごとに、最大 6つの異なるブレイクポイントを定義できます。
![トップバーで「ブレイクポイントを設定」パネルが開いているクロップされたスクリーンショット。カーソルが「ブレイクポイントを追加」をクリックしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/29/7519789a-ab6e-4e00-b4e3-b78b8c1b6b0b/19f7b8a3-0f08-4637-bac4-e05b5373b4ee.jpg)
既存のブレイクポイントを編集する
エディタで既存のブレイクポイントのサイズを変更して、クライアントのサイトのニーズに合わせます。
ブレイクポイントを編集する方法:
- 作業中のページまたはマスターセクションを選択します。
- エディタトップバーでブレイクポイント横の「ブレイクポイントを編集」アイコン
をクリックします。
- 該当するブレイクポイントにマウスオーバーし、「編集」アイコン
をクリックします。
- ブレイクポイントのピクセルを入力します。
- 「完了」をクリックします。
![トップバーで「ブレイクポイントを設定」パネルが開いているスクリーンショット。カーソルが「編集」アイコンをクリックしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/29/83e9cc64-fcae-4ae7-ab14-e844cf5fd856/31ac9704-3443-47ab-9a52-d89b24c8be87.jpg)
ブレイクポイントを削除する
クライアントが特定の画面サイズでサイトをデザインしたくない場合は、必要に応じて該当するブレイクポイントを削除できます。これにより、ブレイクポイントのすべてのレイアウトとデザインプロパティも削除されます。
重要:
ブレイクポイントを削除すると、ギャップを埋めるため、他のブレイクポイントのピクセル範囲が変更されます。これにより、異なるビューポートに対するデザインの応答性が低くなる可能性があります。
ブレイクポイントを削除する方法:
- 作業中のページまたはマスターセクションを選択します。
- エディタトップバーでブレイクポイント横の「ブレイクポイントを編集」アイコン
をクリックします。
- 該当するブレイクポイントにマウスオーバーします。
- 「削除」アイコン
をクリックします。
注意:
サイトに少なくとも 1 つのブレイクポイントが必要です。このため、最上位のブレイクポイントをリストから削除することはできません。
![トップバーで「ブレイクポイントを設定」パネルが開いているスクリーンショット。カーソルが「削除」アイコンをクリックしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/29/610e3daa-4b5c-4f26-9a41-bde65a23b604/6878ec0a-74e5-4292-a9cf-f3978bd29579.jpg)