Wix Studio エディタ：コンテナを使用して縦セクションを作成する | サポートセンター

Wix Studio エディタ：コンテナを使用して縦セクションを作成する

読了時間：5分

縦セクションは Wix Studio エディタでは利用できません。ただし、ピン留めされたコンテナを使用して同様の効果を得ることができ、サイドバーセクションのように見せることができます。

まず、コンテナを追加し、高さを 100vh に設定して、画面全体の高さを占めるようにします。次に、行のサイズを「自動」に設定した高度な CSS グリッドを適用します。

Wix Studio エディタの「要素を追加」パネルからコンテナを追加します。
コンテナの高さを 100vh に変更します：
1. エディタ右上の「要素設定パネルを開く」矢印アイコンをクリックします。
2. 「サイズ」横の「その他のアクション」アイコンをクリックします。
3. 「高度なサイズ変更」トグルを有効にします。
4. 「高さ（H）」を 100vh に設定します。
  ヒント：現在の測定単位（例：%、px）をクリックして変更します。
コンテナに CSS グリッドを適用します：
1. （要素設定パネル内で）「レイアウト」までスクロールダウンします。
2. 「高度な CSS グリッド」横の「適用する」をクリックします。
3. 「列」をクリックします。
4. 現在のサイズ単位をクリックして「自動」に変更します。

現在のページのヘッダーにコンテナをドラッグして追加します。これにより、コンテナに応じてヘッダーのサイズが変更されますが、要素設定パネルで高さは元に戻します。

次に、ヘッダーをピン留めして、訪問者がページを上下にスクロールしてもコンテナが表示されたままになるようにします。

次に、コンテナを配置します。表示する場所に応じて、コンテナを左上または右上の角に配置します。

そして、最後のステップとして、ページの該当する側面にパディングを追加します。これにより、コンテナがページのコンテンツを覆うのを防ぎます。

コンテナを選択します。
（要素設定パネル内で）コンテナを左上または右上に配置します：
1. 「上揃え」アイコンをクリックします。
2. 「左揃え」アイコンまたは「右揃え」アイコンをクリックします。
ページにパディングを追加します：
1. 要素設定パネル上部の「ページ」をクリックします。
2. 「配置」下で、パディングをコンテナと同じ幅に設定します。
  たとえば、コンテナの幅が 20% で、ページの左側に配置されている場合、左側のパディングも 20% に設定する必要があります。

これで、コンテナをサイドバーセクションとして使用できるようになりました。必要な要素を追加し、要素設定パネルからコンテナをデザインします。そうすると、以下の例のようにコンテナはヘッダーに追加され、キャンバスを上下にスクロールしても画面全体の高さを占めます。

この記事では下記を説明します：