header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

Wix Studio エディタ:コンテナを使用する

5分
コンテナは、サイトコンテンツの合理化や構造化に役立つレスポンシブなレイアウトツールです。サイトのデザインに合わせてカスタマイズし、テキスト、メディア、ボタンなどの要素を追加することもできます。

サイトにコンテナを追加する

まずは、クライアントのデザインとコンテンツのニーズに合わせてコンテナを追加します。デザインされたコンテナやホバーコンテナを選択することも、白紙のデザインでゼロから始めることもできます。

コンテナを追加する方法:

  1. エディタ左側で「要素を追加 をクリックします。
  2. コンテナ」を選択します。
  3. コンテナのスタイル(空、デザイン済み、ホバー)を選択します。
  4. コンテナをクリック&ドラッグして、ページに追加します。
Wix Studio エディタの「要素を追加」パネル。カーソルが空のコンテナにマウスオーバーしています。

コンテナをデザインする

サイトに合わせてコンテナのデザインをカスタマイズします。背景色を変更したり、丸みを設定したりできます。

コンテナをデザインする方法:

  1. 該当するコンテナを選択します。
  2. エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
Wix Studio エディタの「要素設定パネルを開く」アイコンのスクリーンショット。
  1. デザイン」下でコンテナのカスタマイズ方法を選択します:
    • 背景:背景を設定し、視認性を調整します。
      • :サイトのテーマカラー、またはカスタム色合いから選択します。
      • グラデーション:コンテナにグラデーションまたはリニアグラデーションを適用します。色や角度などを選択できます。
    • ガラス効果:コンテナにガラス効果を適用して、ぼかし強度を設定します。
    • 枠線:コンテナに枠線を追加し、オプションを使用してサイズ、色、不透明度を設定します。
    • :コンテナの角の丸みをピクセル単位で調整して、丸みを帯びたコンテナにしたり、四角いコンテナにしたりします。
    • :コンテナに影を追加してカスタマイズします。
要素設定パネル内のコンテナの「デザイン」タブ。カーソルが角を設定しています。

コンテナに要素を貼り付ける

コンテナ内に要素を配置すると、自動的に貼り付けされます。そのため、コンテナとそれに付属する要素全体をドラッグし、「レイヤー」パネルでそれらを一緒に表示することができます。

コンテナに要素を貼り付ける方法:

  1. 該当する要素をクリックします。
  2. コンテナ内の希望の位置にドラッグします。
  3. 貼り付け」のメッセージが表示されたら、要素をドロップします。
テキスト要素がコンテナにドラッグされ、「貼り付け」メッセージが表示されています。

コンテナのレスポンシブ動作を設定する

Wix Studio エディタでページに追加できるコンテナには、あらかじめレスポンシブ動作が組み込まれています。そのため、各要素が異なる画面サイズでどのように表示されるかを心配する必要はありません。レスポンシブ動作によって、すべての要素が画面サイズに合わせて自動的に調整されます。
ただし、デザインにより適したレスポンシブ動作に変更したい場合は、レスポンシブ動作を切り替えることができます。

コンテナのレスポンシブ動作を設定する方法:

  1. 該当するコンテナを選択します。
  2. エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
Wix Studio エディタの「要素設定パネルを開く」アイコンのスクリーンショット。
  1. レスポンシブ動作」下のドロップダウンをクリックし、希望の動作を選択します:
    • 比例してスケーリング:コンテナの縦横比(幅と高さ)は、すべての画面で同じアスペクト比を維持します。
    • 相対幅:コンテナの幅は、親要素を基準に自動的に変更されます。
    • 固定:コンテナの幅と高さは常に同じで、画面サイズに基づいて調整されません。
    • ストレッチ:各ブレイクポイントで、コンテナは親要素(例:セル、セクションなど)に合わせて引き伸ばされます。
Wix Studio エディタのキャンバスでコンテナが、レスポンシブ動作のドロップダウンをクリックしている様子を示したスクリーンショット。

コンテナにグリッドを適用する

コンテナに高度な CSS グリッドを適用して、レイアウトを構築します。必要な行数と列数を選択し、レスポンシブ計量単位(例: fr、最小 / 最大、%)を使用してサイズを設定します。

コンテナにグリッドを適用する方法:

  1. 該当するコンテナを選択します。
  2. その他のアクション」アイコン  をクリックします。
  3. 高度な CSS グリッドを適用」をクリックします。
  4. 1x1」ドロップダウンからレイアウトを選択します。
    ヒント:独自の行数と列数を設定する場合は、「その他」を選択します。
エディタ内のコンテナ。ドロップダウンから CSS グリッドが選択されています。