Wix Studio エディタ：セクションの背景を変更する
読了時間：9分
すべてのセクションをクライアントのニーズに合わせてデザインしましょう。セクションの背景には、色、グラデーション、画像、動画を選択できます。また、パターンオーバーレイを追加し、不透明度を調整することで、コンテンツから背景が目立ちすぎないようにすることもできます。
ブレイクポイントを操作する場合：
セクションの背景はブレイクポイントごとに設定できるため、どのデバイスでも理想的に表示されます。
この記事では、以下の項目について説明します：
ヒント：
デザインプロセスをスピードアップできるように、たくさんの完全にレスポンシブなデザイン済みセクションを「要素を追加」パネルの「セクション」に作成しました。
セクションの背景に色を追加する
セクションの背景色をテーマカラーまたはカスタムカラーより選択します。落ち着いた色合いの背景が必要な場合は、不透明度を設定できます。
セクションの背景色を変更する方法：
- 該当するセクションを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン
をクリックします。 - 「デザイン」下のカラーボックスをクリックします。
- 好みに応じて色を選択します：
- テーマカラー：サイトの色から 1つ選択します。
- マイカラー：既存のカスタムカラーを選択します。
- 新しい色を追加：「＋追加」をクリックして、カラーピッカーに新しい色を追加します。
- （オプション）スライダーを使用して、色の不透明度を調整します。
セクションの背景にグラデーションを追加する
Wix Studio エディタでは、セクションの背景にさまざまな種類のグラデーションを使用することができます：
- 円形グラデーション、リニア、円錐状
：これらのグラデーションでは、最大 8色を選択して、各色の不透明度を設定することができます。リニアの場合は角度を、円形グラデーションの場合は焦点を、円錐状の場合はその両方調整して、希望の見た目にすることもできます。 - フルードグラデーション
：このグラデーションでは、必要なだけ色を混ぜ合わせて、流体のような効果を作成することができます。各色の不透明度、サイズ、広がりを設定することができます。
セクションにグラデーション背景を追加する方法：
- 該当するセクションを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
- 「デザイン」下のカラーボックスをクリックします。
- 以下をクリックして、好みの種類のグラデーションを作成します：
リニア、円形、または円錐状のグラデーションを追加する
をクリックします。
に変化します。
をクリックします。
フルードグラデーションを追加する
をクリックします。
セクションの背景に画像を追加する
セクションの背景に画像を追加し、関連する要素が常に表示されるように焦点を調整します。アップロードした画像を使用するか、Wix または Unsplash が提供する無料の画像を選択するか、Shutterstock 画像を購入することができます。
ヒント：
画像の上に色やグラデーションオーバーレイを追加することができます。カラーボックスをクリックして色またはグラデーションを選択し、スライダーをドラッグしてこのレイヤーの不透明度を調整します。
セクションの背景に画像を追加する方法：
- 該当するセクションを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
- 「メディア」下の「＋画像または動画を追加」をクリックします。
- （メディアマネージャーで）次に実行する内容を選択します：
- 独自の画像を選択またはアップロードする。
- 「Wix 画像・動画素材 / Unsplash」タブをクリックして、無料の画像を使用する。
- 「Shutterstock」タブをクリックして、Shutterstock から画像を購入する。
- 「背景を変更」をクリックします。
- （オプション）要素設定パネルで画像背景をカスタマイズします：
- 焦点：「焦点」アイコン
をクリックして、画面のサイズが変更されても常に表示したい画像の部分を選択します。 - 不透明度：スライダーをドラッグして、画像の表示設定を変更します。
- フィットオプション：ドロップダウンをクリックして、この画像をセクションにフィットさせる方法を選択します。
- 焦点：「焦点」アイコン
セクションの背景に動画を追加する
動画背景を追加して、セクションに躍動感を与えましょう。動画の焦点を選択したり、再生速度を変更したり、動画をループ再生するかどうかを決めることができます。
背景に使用できる無料動画のライブラリをご用意しています。また、ご自身のファイルを使用したり、Shutterstock から動画を購入したりすることもできます。
ヒント：
動画背景の上に色やグラデーションオーバーレイを追加することができます。カラーボックスをクリックして色またはグラデーションを選択し、スライダーをドラッグしてこのレイヤーの不透明度を調整します。
セクションの背景に動画を追加する方法：
- 該当するセクションを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
- 「メディア」下の「＋画像または動画を追加」をクリックします。
- （メディアマネージャーで）次に実行する内容を選択します：
- 独自の動画を選択またはアップロードする。
- 「Wix 画像・動画素材 / Unsplash」タブをクリックして、無料の動画を使用する。
- 「Shutterstock」タブをクリックして、Shutterstock から動画を購入する。
- 「背景を変更」をクリックします。
- （オプション）要素設定パネルで動画背景をカスタマイズします：
- 焦点：「焦点」アイコン をクリックして、画面のサイズが変更されても常に表示したい動画の部分を選択します。
- 不透明度：スライダーをドラッグして、動画の表示設定を変更します。
- 再生スピード：ドロップダウンをクリックして、動画の再生速度（例：標準、x0.25、x1.25）を選択します。
- ループ再生：トグルをクリックして、動画の再生方法を変更します：
- 有効：動画はバックグラウンドで無限ループで再生されます。
- 無効：動画は訪問者に一度だけ再生され、その後停止します。
- 焦点：「焦点」アイコン
ライブで動作を確認したい場合：
動画の「再生」ボタンをクリックして、キャンバス上で直接どのように表示されるかを確認します。
セクションの背景にパターンオーバーレイを追加する
セクションの背景に面白いパターンを適用しましょう。さまざまな色とサイズのパターンから選択できます。リストを参照し、お好みのパターンをクリックして、背景との調和を確認してください。
セクションの背景にパターンオーバーレイを追加する方法：
- 該当するセクションを選択します。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。
- 「背景オーバーレイ」下で「パターンオーバーレイを適用」トグルを有効にします。
- 利用可能なパターンから選択します。パターンをクリックしてオーバーレイとして追加し、背景とのフィット感を確認してください。
お役に立ちましたか？
|