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

ステップ 1 | コンテナを追加してグリッドを適用する
まず、コンテナを追加し、高さを 100vh に設定して、画面全体の高さを占めるようにします。次に、行のサイズを「自動」に設定した高度な CSS グリッドを適用します。
コンテナを追加してグリッドを適用する方法:
- Wix Studio エディタの「要素を追加」パネル
からコンテナを追加します。
- コンテナの高さを 100vh に変更します:
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「サイズ」横の「その他のアクション」アイコン
をクリックします。
- 「高度なサイズ変更」トグルを有効にします。
- 「高さ(H)」を 100vh に設定します。
ヒント:現在の測定単位(例:%、px)をクリックして変更します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
- コンテナに CSS グリッドを適用します:
- (要素設定パネル内で)「レイアウト」までスクロールダウンします。
- 「高度な CSS グリッド」横の「適用する」をクリックします。
- 「列」をクリックします。
- 現在のサイズ単位をクリックして「自動」に変更します。

ステップ 2 | ヘッダーにコンテナを追加する
現在のページのヘッダーにコンテナをドラッグして追加します。これにより、コンテナに応じてヘッダーのサイズが変更されますが、要素設定パネルで高さは元に戻します。
次に、ヘッダーをピン留めして、訪問者がページを上下にスクロールしてもコンテナが表示されたままになるようにします。
ヘッダーにコンテナを追加する方法:
- コンテナをドラッグして、ページのヘッダーに追加します。
- ヘッダーのサイズを変更します:
- ヘッダーを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。
- 「サイズ」横の「その他のアクション」アイコン
をクリックします。
- 「高度なサイズ変更」トグルを有効にします。
- 「高さ(H)」を px 単位で設定します。
ヒント:現在の測定単位(例:%、vh)をクリックして変更します。
- 「配置」までスクロールダウンします。
- 「配置タイプ」ドロップダウンから「ピン留め」を選択します。

ステップ 3 |コンテナを配置してページにパディングを追加する
次に、コンテナを配置します。表示する場所に応じて、コンテナを左上または右上の角に配置します。
そして、最後のステップとして、ページの該当する側面にパディングを追加します。これにより、コンテナがページのコンテンツを覆うのを防ぎます。
コンテナを配置してパディングを追加する方法:
- コンテナを選択します。
- (要素設定パネル内で)コンテナを左上または右上に配置します:
- 「上揃え」アイコン
をクリックします。
- 「左揃え」アイコン
または「右揃え」アイコン
をクリックします。
- 「上揃え」アイコン
- ページにパディングを追加します:
- 要素設定パネル上部の「ページ」をクリックします。
- 「配置」下で、パディングをコンテナと同じ幅に設定します。
たとえば、コンテナの幅が 20% で、ページの左側に配置されている場合、左側のパディングも 20% に設定する必要があります。
- 要素設定パネル上部の「ページ」をクリックします。
ステップ 4 | コンテナをカスタマイズする
これで、コンテナをサイドバーセクションとして使用できるようになりました。必要な要素を追加し、要素設定パネルからコンテナをデザインします。そうすると、以下の例のようにコンテナはヘッダーに追加され、キャンバスを上下にスクロールしても画面全体の高さを占めます。
