Wix ヘルプセンター
    ホーム
  1. Wix Studio・パートナー・エンタープライズ
  2. Wix Studio
  3. Wix Studio エディタの使用
  4. Wix Studio エディタでのサイトの構築
    5. Wix Studio エディタ：セクションを追加・管理する

Wix Studio エディタ：セクションを追加・管理する

読了時間：6分
セクションはすべてのページを構成する要素です。セクションを使用して関連するコンテンツをまとめ、整理され、構造化されたプロフェッショナルなページを作成します。
各ページに必要なだけセクションを追加します。空のセクション、ワイヤーフレーム、または自由にカスタマイズ可能なデザイン済みセクションから選択できます。セクションはブラウザの全幅にまたがり、高さは自由に設定できます。
この記事では、以下の項目について説明します：
マスターセクションを作成する：
同じセクションを複数のページに表示させるには、マスターセクションとして設定します。

ワイヤーフレームとデザイン済みセクションを追加する

サイトの作成プロセスをスピードアップする、レスポンシブなセクションを多数用意しています。お好きなものを選択し、クライアントのスタイルに合わせてカスタマイズしてください。デザインではなく、主にレイアウトでヘルプが必要な場合は、空のワイヤーフレームを選択してください。

ワイヤーフレームまたはデザイン済みセクションを追加する方法：

  1. エディタ左側で「要素を追加」 をクリックします。
  2. 「セクション / ワイヤーフレーム」をクリックします。
  3. カテゴリーをクリックして利用可能なデザインを確認します。
  4. セクションをページにドラッグします。
  5. 必要に応じてセクションをカスタマイズします：
    • 要素をクリックしてコンテンツをカスタマイズする。
    • 背景を変更する。
    • 画像とテキストを独自のものに置き換える。
Wix Studio エディタの「要素を追加」パネルと、「セクション」タブと「ワイヤーフレーム」タブで利用可能なデザインが表示された GIF

空のセクションを追加する

キャンバスで作業中に、空白のセクションをすばやくページに追加することができます。セクションの上部または下部にマウスオーバーし、「＋セクションを追加」をクリックします。次に、ゼロからデザインするか、グリッドレイアウトを適用するか、デザイン済みセクションを使用するかを決めることができます。

空のセクションを追加する方法：

  1. 該当するページに移動します。
  2. 該当するセクションの上部または下部にマウスオーバーし、「＋セクションを追加」をクリックします。
  3. デザイン方法を選択します：
    • デザイン済みセクション：あらかじめデザインされたセクションを選択し、クライアントのニーズに合わせてカスタマイズします。
    • グリッドレイアウト：複数のセルを持つレイアウトを選択してコンテンツを整理します。
    • 要素を追加：空白のセクションに要素を追加します。
クリックして適用できるグリッドセルのレイアウトを示す、空白の新しいセクションのスクリーンショット
今後使用するためにデザインを保存する：
エディタでセクションを選択し、「その他のアクション」アイコン をクリックします。次に「アセットとして保存」をクリックすると、「要素を追加」パネルの「アセット」タブにこのデザインが保存されます。

セルを使用してセクションを整理する

セクションにセルを追加して、レスポンシブで構造化されたレイアウトを作成します。要素を別々のセルに配置することで、すべての画面で所定の位置に留まります。レイアウトを選択し、要素をセル内にに移動します。セルはいつでも分割したり、新しく追加することができます。

セクションにグリッドを適用する方法：

  1. エディタで該当するセクションを選択します。
  2. セクション上部の「空白 」ドロップダウンをクリックします。
セクションを選択すると開くツールバーと、利用可能なレイアウトのドロップダウンのスクリーンショット。
  1. 行、列、コラージュなど、レイアウトを選択します。
    ヒント：レイアウトはドロップダウンからいつでも変更できます。要素は移動しません。
  2. 要素を該当するセルにドラッグします。
  3. （オプション）セクションにさらにセルを追加するか、既存のセルを分割します：

ページセクションを並べ替える

サイトの作成中に、コンテンツの構造・構成を変更すべきと判断した場合、セクションの便利な並べ替え・移動機能をいつでも利用することができます。

ページセクションを並べ替える方法：

  1. エディタで該当するセクションを選択します。
  2. セクション上の「その他のアクション」アイコン  をクリックします。
  3. 「上に移動」または「下に移動」をクリックします。
キャンバス上でセクションを上下に移動させる方法を示したセクションのスクリーンショット

セクションを削除する

セクションはいつでも削除できます。セクションを削除すると、すべてのブレイクポイントでページからセクションが削除されます。
注意：
ストア、イベント、ブログなどのアプリを含むセクションを削除することはできません。

セクションを削除する方法：

  1. エディタで該当するセクションを選択します。
  2. セクション上の「その他のアクション」アイコン  をクリックします。
  3. 「削除」をクリックします。
代わりにセクションを非表示にしたい場合：
「非表示」をクリック現在のブレイクポイントからセクションを非表示にすることができます。非表示にしたセクションは、レイヤーパネルで確認することができ、そこで再度表示することができます。
エディタでセクションが選択されたスクリーンショット。セクションを削除する方法を示しています。

お役に立ちましたか？

|
この記事では下記を説明します：
  • ワイヤーフレームとデザイン済みセクションを追加する
  • 空のセクションを追加する
  • セルを使用してセクションを整理する
  • ページセクションを並べ替える
  • セクションを削除する