Wix Studio エディタ：コンテナを使用する
読了時間：3分
コンテナは、サイトコンテンツの合理化や構造化に役立つレスポンシブなレイアウトツールです。サイトのデザインに合わせてカスタマイズし、テキスト、メディア、ボタンなどの要素を追加することもできます。
この記事では、以下の項目について説明します：
サイトにコンテナを追加する
まずは、クライアントのデザインとコンテンツのニーズに合わせてコンテナを追加します。デザインされたコンテナやホバーコンテナを選択することも、白紙のデザインでゼロから始めることもできます。
コンテナを追加する方法：
- エディタ左側で「要素を追加」
をクリックします。 - 「コンテナ」を選択します。
- コンテナのスタイル（空、デザイン済み、ホバー）を選択します。
- コンテナをクリック＆ドラッグして、ページに追加します。
コンテナをデザインする
サイトに合わせてコンテナのデザインをカスタマイズします。背景色を変更したり、丸みを設定したりできます。
コンテナをデザインする方法：
- 該当するコンテナを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。
- 「デザイン」下でコンテナのカスタマイズ方法を選択します：
- 背景：背景色を設定し、視認性を調整します。
- 枠線：コンテナに枠線を追加し、オプションを使用してサイズ、色、不透明度を設定します。
- 角：コンテナの角の丸みをピクセル単位で調整して、丸みを帯びたコンテナにしたり、四角いコンテナにしたりします。
- 影：コンテナに影を追加してカスタマイズします。
コンテナに要素を貼り付ける
コンテナ内に要素を配置すると、自動的に貼り付けされます。そのため、コンテナとそれに付属する要素全体をドラッグし、「レイヤー」パネルでそれらを一緒に表示することができます。
コンテナに要素を貼り付ける方法：
- 該当する要素をクリックします。
- コンテナ内の希望の位置にドラッグします。
- 「貼り付け」のメッセージが表示されたら、要素をドロップします。
コンテナにグリッドを適用する
コンテナに高度な CSS グリッドを適用して、レイアウトを構築します。必要な行数と列数を選択し、レスポンシブ計量単位（例： fr、最小 / 最大、%）を使用してサイズを設定します。
コンテナにグリッドを適用する方法：
- 該当するコンテナを選択します。
- 「その他のアクション」アイコン
をクリックします。 - 「高度な CSS グリッドを適用」をクリックします。
- 「1x1」ドロップダウンからレイアウトを選択します。
ヒント：独自の行数と列数を設定する場合は、「その他」を選択します。
お役に立ちましたか？
|