Editor X：レイアウターを使用する
読了時間：6分
Editor X は、代理店とフリーランサー向けの新しいプラットフォームである Wix Studio に移行します。Wix Studio について
レスポンシブコンテナで構成されるスマートなレイアウトツールである「レイアウター」でコンテンツを整理しましょう。フレックス技術を使用すると、コンテナは訪問者の画面サイズに合わせて自動的に調整されます。
レイアウターの表示設定（列、ブリック、スライダーなど）を選択したり、必要に応じてアイテムを追加または削除したり、余白や方向などの設定を調整したりできます。
この記事では、下記の項目について説明します：
レイアウターを追加する
「追加」パネルを開いてレイアウタープリセットを選択し、ページにドラッグします。表示するコンテンツの種類に応じてデザインを選択できます。（例：画像のみ、画像とテキストなど）
レイアウターを追加する方法：
- Editor X の上部で「要素を追加」
をクリックします。 - 「レイアウトツール」をクリックします。
- 「レイアウター」をクリックします。
- レイアウターをページにドラッグします。
動作を確認しましょう：
キャンバス上のハンドルをドラッグして、レイアウターのコンテンツがブレイクポイント間でシームレスに再編成される様子を確認します。
レイアウターアイテムを追加・管理する
レイアウターは、レスポンシブコンテナであるいくつかのアイテムで構成されています。レイアウター内のアイテム数を変更でき、使用可能なスペースに合わせてアイテムのサイズが自動的に変更されます。
新しいアイテムを追加するには、「アイテムを追加」をクリックするか、要素設定で「アイテムを管理」パネルを利用することができます。
要素設定パネルからレイアウターアイテムを管理する方法：
- レイアウターをクリックします。
- Editor X 右上で「要素設定パネル」アイコン
をクリックします。 - （要素設定パネルで）アイテム数の横にある「管理」をクリックします。
- アイテムの横にある「その他のアクション」アイコン
をクリックして次の操作を行います：
- 複製：特定のアイテムのコピーを作成します。
- 名前を変更：各アイテムにわかりやすい名前を付けます。
- 削除：アイテムを完全に削除します。
- 非表示：作業中の特定のブレイクポイントからこのアイテムを非表示にします。
アイテムを並べ替える必要がある場合：
該当するアイテム横にある「並び替え」アイコン 
をクリックして、選択して位置にドラッグします。
をクリックして、選択して位置にドラッグします。レイアウターの表示をカスタマイズする
クリック 1つで、レイアウターの表示レイアウトを変更できます。コンテンツの表示方法（列、行、モザイク、スライダー、スライドショー）を選択でき、アイテムは自動的に並び替えられます。
ブレイクポイントを操作する：
- ブレイクポイントごとに異なるレイアウトを設定できます。
- モバイル機器などの小さな画面では、「列」または「スライダー」レイアウトをおすすめします。
表示をさらにカスタマイズする方法：
- レイアウターをクリックします。
- Editor X 右上で「要素設定パネル」
をクリックします。 - （オプション）「表示」下で「表示タイプ」を選択します。
- 選択した表示設定に基づいてレイアウターをカスタマイズします：
列：レイアウトオプション
行：レイアウトオプション
ブリック：レイアウトオプション
モザイク：レイアウトオプション
スライダー：レイアウトオプション
スライド：レイアウトオプション
グリッドギャップに関する注意事項：
一部の古いバージョンのブラウザはこの機能をサポートしていません（例：Chrome 76-83、Safari 12-14、Edge 79-83）。つまり、これらのブラウザからサイトにアクセスした訪問者には、レイアウターアイテム間に設定したギャップは表示されません。
レイアウターアイテムのサイズを変更する
レイアウターアイテムを並べ替える
アイテムの順序を切り替えて、レイアウター内のコンテンツを再配置します。右クリックメニューを使用すると、アイテムを前後に移動できます。レイアウターは変更に合わせて自動的に調整されます。
レイアウターアイテムを並べ替える方法：
- 移動させたいアイテムを右クリックします。
- 「順序を交換」にマウスオーバーします。
- 「次のアイテムと / 前のアイテムと」を選択します。
お役に立ちましたか？
|