Wix エディタ:モバイルエディタでエディタツールを使用する
読了時間:5分
Wix モバイルエディタには、デザインプロセスをより速く、より正確にするためのツールが数多く組み込まれています。これらの機能には、エディタ右上のツールパネルからアクセスすることができます。
![エディタセクション右上のツールパネルのスクリーンショット。「スナップ」機能のチェックボックスが選択されています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2025/01/02/bdbf27a9-04ae-4c92-815c-fa6bd4f93073/fb44f35d-cc61-4f3d-a1f7-c307ac6d5393.jpg)
この記事では、以下の使用方法について説明します:
モバイルエディタのツールバーを使用する
モバイルエディタツールバーを使用すると、基本的なアクションをすばやく実行できます。ツールバでページ上のパーツをコピー、貼り付け、複製、または削除することが可能です。また、サイズ、位置、配置などを調整することもできます。
「ツール」パネルから「ツールバー」を有効にすると、ツールバーがエディタの右側に表示されます。
![Wix モバイルエディタにあるツールバーのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/08/06/be8720eb-60e5-4fca-b29a-8482d8b456d6/95b5b4cc-611f-4e6c-b6be-02c0f7c8b3fc.png)
ツールバーを有効にする方法:
- モバイルエディタ右上にある「ツール」
をクリックします。
- 「ツールバー」チェックボックスを選択します。
![ツールバーのチェックボックスが選択およびハイライトされた、モバイルエディタのツールパネルのスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/08/06/d9b54643-7353-4848-93a1-1834c04d4b2e/d9761e42-e41a-4c47-add2-35a1e823764f.png)
レイヤーパネルを使用する
レイヤーパネルには、ページ上のすべてのパーツが表示されます。パネルはページの主要部分(ヘッダー、ページ、フッター)で分割されているため、必要なパーツを簡単に見つけることができます。
レイヤーパネルを有効にすると、モバイルエディタ内の任意の場所にドラッグできるフローティングパネルとして表示されます。「レイヤー」アイコン
をクリックします。
![エディタ内のレイヤーパネル。アイコンがハイライト表示されています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/18/dc9d9a4f-8bef-4da0-95bc-97dac932e298/98f02762-b7d8-498e-933e-93d726ed9b60.png)
垂直・水平ルーラーを使用する
横と縦のルーラーを使用して、サイトにパーツを正確に配置することができます。パーツを特定の場所(ピクセル単位)に配置し、ガイドを追加してスポットをマークします。
ツールパネルからルーラーを有効にすると、上部に水平ルーラー、右側に垂直ルーラーが表示されます。
ルーラーを有効にする方法:
- モバイルエディタ右上にある「ツール」
をクリックします。
- 「ルーラー」チェックボックスを選択します。
![ツールパネル。「ルーラー」ボックスが選択され、定規がハイライト表示されています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/18/681a28c1-064d-4a36-a26d-87d2151c63cb/54f1a181-64f5-46f5-9800-7dc8015450f9.png)
グリッド線を使用する
グリッド線は、エディタ内の点線で、サイトのレイアウトを正しく構築するのに役立ちます。縦のグリッド線は、タブレットや小さいデバイスでページの最大幅を表示する際に特に便利です。
グリッド線を使用して、あらゆる画面サイズでコンテンツが表示されるようにします。必要に応じて、いつでも有効または無効にすることができます。
グリッド線を有効にする方法:
- モバイルエディタ右上にある「ツール」
をクリックします。
- 「グリッド線」チェックボックスを選択します。
![Wix エディタのグリッド線。線がハイライト表示されています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/18/13161efc-02f9-4b4e-a97d-82617e1fdc8c/bb428759-2ac1-47ad-82a3-2558c8b6be30.png)
スナップツールを使用する
「スナップ」ツールを使用すると、パーツを正確に別のパーツに追加することができます。
パーツをドラッグすると、そのページの他のパーツの枠線を示す紫色の線が表示されます。ドラッグしているパーツをドロップすると、これらのマーカーに 5 ピクセルの範囲内で「スナップ」します。
パーツの「スナップ」ツールを有効にする方法:
- モバイルエディタ右上にある「ツール」
をクリックします。
- 「スナップ」チェックボックスを選択します。
![エディタで使用されているパーツの「スナップ」ツール。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2021/08/04/8d845986-5b90-418e-a519-3e8e0ec8324d/63e2e655-63c1-47c8-b781-d51480aa55ec.gif)
ドラッグ時の自動間隔調整ツールを使用する
ドラッグ時の自動間隔調整ツールは、パーツの間にアイテムを配置すると、パーツ間の間隔を自動的に調整します。これにより、デザイン全体に影響を与えることなく、ワンクリックでパーツを並べ替えることができます。
たとえば、ボタンにマウスオーバーし、2つのテキストパーツの間でドラッグできます。青い線が表示されたら、ボタンをドロップします。こうすることで、2つのテキストパーツの両側に同じスペースが作成されます。
重要:
この機能は現在一部のユーザー様のみご利用いただけます。
ドラッグ時の自動間隔調整ツールを有効または無効にする方法:
- モバイルエディタ右上にある「ツール」
をクリックします。
- 「ドラッグ時の自動間隔調整」チェックボックスを選択します。
![Wix モバイルエディタでボタンの配置を移動するために使用されているドラッグ時の自動間隔調整ツール](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/07/29/a498b77e-73c6-48ca-bd48-8cdb065b84a8/a8958e36-2e17-4f61-aa6e-2d4dffadc3d5.gif)
間隔ガイドツールを使用する
間隔ガイドツールには、ギャップ(余白)サイズをピクセル単位で表示する調整可能な青いバーが表示され、ギャップサイズがセクション上の他のギャップと同じであることを示すピンク色の線が表示されます。このツールを使用すると、セクション内の他の場所での間隔を維持しながら、間隔を調整することができます。
正確な間隔を迅速に決定することができます。
重要:
この機能は現在一部のユーザー様のみご利用いただけます。
間隔ガイドツールを有効または無効にする方法:
- モバイルエディタ右上にある「ツール」
をクリックします。
- 「間隔ガイド」チェックボックスを選択します。
![Wix モバイルエディタでセクションの下部にある空白のスペースを調整するために使用されている間隔ガイドツールの Gif。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/07/29/0c9dbd3a-cc14-4232-b574-252897112d31/ba284468-2a0b-4457-8955-a954213f3db7.gif)