背景設定（色、画像、ビデオ背景）をカスタマイズする

背景と色の設定

背景設定は、ウェブサイトの見た目や雰囲気をコントロールできる重要なデザインツールです。 視覚的なトーンを定義する 単色、グラデーション、画像、ビデオなどのさまざまなスタイルを適用して、ページをカスタマイズします。

単色の背景色、グラデーション、または画像を設定することで、ブランドイメージを強化し、訪問者を引き付ける視覚的に魅力的なレイアウトを作成できます。 

背景設定では、ページ全体の見た目と雰囲気を定義できます。GemPagesでは、以下のことが可能です。

• Apply 無地 すっきりとしたミニマルなスタイル。
• 　 勾配 スムーズな遷移と奥行きを生み出します。
• 追加 画像 or ビデオ デザインをよりダイナミックにします。

背景色を設定する

GemPages v7 では、ページの背景や特定のセクションに単色またはグラデーションを簡単に適用できます。

背景色を設定する

デザインをすっきりと整理し、焦点を絞るために、単色の背景色を使うことができます。これは、セクションに統一感を与え、読みやすさを確保するための最もシンプルな方法です。

ステップ 1: 要素を選択する

• 背景色を適用するセクション、行、または列をクリックします。 
• Video Cloud Studioで 設定 左側のサイドバーで。

ステップ2: 背景設定を見つける

• 設定パネルで、 経歴 のセクションから無料でダウンロードできます。
• 選択する 色圏 選択して ソリッドカラー 背景タイプとして。

ステップ 3: 色を選択する

以下のオプションから単色背景を設定できます。

• カラーピッカーをクリックして手動で色を選択します
• 特定の6進コードを入力します（例：#FCD6DXNUMX）
• 色見本から色を選択してください
• から選択 最近の色 or あなたにおすすめ 一覧表示します。

背景のグラデーションを設定する

グラデーション背景は、2色以上の色をブレンドすることで、モダンでダイナミックな効果を生み出します。特に、重要な部分を強調したり、スムーズなトランジションを作成したりするのに便利です。

ステップ1: グラデーション背景を有効にする:

下 背景設定、選択する 色圏 をクリックして 勾配 背景タイプとして。

ステップ3: グラデーションをカスタマイズする:

• 色を選択: グラデーションに 2 色以上を選択します。
• グラデーションの方向を設定: グラデーションの角度 (垂直、斜め、放射状など) を調整します。
• 不透明度の微調整: 必要に応じて、グラデーション カラーの透明度レベルを調整します。

背景画像を設定する

背景画像を追加すると、テクスチャ、パターン、テーマに沿ったビジュアルを組み込むことで、ページの視覚的な魅力を高めることができます。

ステップ1: 画像の背景を有効にする

経歴 、選択する 画像 背景タイプとして。

ステップ2: 画像の背景を設定する

現在の画像にマウスを移動して 画像をアップロード 新しい画像をアップロードします。 

それ以外の場合は、メディアライブラリ (Shopify ファイル) から選択するか、画像の URL をボックスに貼り付けることができます。

ステップ3: 画像設定を調整する

• スケール： レイアウトに合わせて画像のサイズを調整します。
• ポジション： 中央、左上、右上などの画像の配置を選択して、背景領域内での画像の表示方法を制御します。
• 繰り返す： 画像を背景全体に並べて表示するか、単一のインスタンスとして残すかを決定します。
• 添付ファイル： 背景画像をページと一緒にスクロールするか、視差効果のために固定されたままにするか設定します。
• LCPを最適化: ページの速度を速く維持するために、圧縮された画像を使用します。

色と画像の背景を組み合わせる

背景色と画像を組み合わせることで、デザイン全体の美しさを高めることができます。 

背景色が画像の下に表示されるので、背景が透明な画像を使用する場合に効果的です。

ステップ1: 画像の背景を追加する

• 経歴 セクションで、 画像 オプションを選択します。
• 背景が透明な画像をアップロードまたは選択します。

ステップ2: 色の背景を追加する

それでも、 経歴 セクションで、 色圏 オプション。画像の背後に表示する色を選択します。

適切な背景色を画像と組み合わせることで、ページ全体のトーンを高める、調和のとれた視覚的に魅力的なデザインを作成できます。

背景ビデオを設定する

ビデオ背景は、Web サイトにダイナミックで魅力的なビジュアルを作成するための優れた方法です。

ステップ1：ビデオの背景を有効にする

下 経歴 セクションで、 ビデオ フィールドをクリックして、ビデオ背景設定パネルを開きます。

ステップ3: 背景として使用するビデオを追加する

ノーザンダイバー社の ソース フィールドで、ビデオを添付するソースを選択します。次の2つのオプションがあります。

• ユーチューブ： 背景ビデオとして再生する YouTube ビデオを選択します。
• ビデオホスティング: Shopify ファイルからアップロードされたビデオを選択します。

貼り付け 動画のURL ビデオを埋め込んで背景にします。

あなたは ループビデオ ループ機能を有効にするには、[はい] を選択します。

その他のカスタマイズ オプション

オーバーレイ、テキスト、CTA ボタンをより細かく制御できる高度なビデオ背景の場合は、次のいずれかの要素の使用を検討してください。

• 続きます この記事 ビデオの背景をカスタマイズするには ヒーローバナー.
• あなたが好むなら ビデオバナー 要素、詳細はこちら こちら.

よくあるご質問

1. サイト全体の背景に画像を設定できますか?

2. 画像の代わりにビデオを背景として使用できますか?