ページへの背景画像とビデオの追加

公開日: 2024年11月13日更新日: 2026年10月20日

ページに背景画像や背景動画を追加すると、視覚的なインパクトが大きく高まり、コンテンツの雰囲気を演出できます。背景は、ブランドを際立たせ、統一感のある外観を作り、ページをより魅力的にするのに役立ちます。このガイドでは、ページに背景画像や背景動画を追加してカスタマイズする方法を説明します。

必要条件

アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ

背景オプションへのアクセス

ページエディターで、上部のバーに移動します。
カスタマイズ（歯車）アイコンをクリックし、設定の下にある本文を選択します。ファネル外のページでは、上部のバーで設定をクリックし、本文を選択します。
本文の設定で、背景オプションを見つけます。
背景オプションをオンに切り替えて、背景のプロパティにアクセスします。

背景画像または背景動画の追加

背景プロパティを使用すると、セクション、行、列、フレックスコンテナなどのさまざまなコンテナや、動画などの個々の要素に背景画像を追加してカスタマイズできます。背景オプションをオンにすると設定が有効になり、背景画像のソース、スタイル、フィット、色のオプションを設定できます。

画像URL: 背景画像の URL を入力するか、ClickFunnels の画像ギャラリーに直接アップロードします。
画像スタイル: コンテナ内での背景画像の表示方法を制御します。
- なし: 追加のスタイル設定を行わずに、背景画像を元のサイズと位置で表示します。画像がコンテナより小さい場合は隙間が残ることがあります。
- フルセンター: サイズを変更せずに画像をコンテナの中央に配置します。画像がコンテナより小さい場合は空白が残ることがあります。
- フルセンター（パララックス）: 画像を中央に配置し、パララックススクロール効果を適用します。画像がメインコンテンツとは独立して動くことで、奥行きのある見た目になります。
  
  注:
  
  iOS の制限により、Apple のモバイルデバイスではパララックス効果が自動的に無効になります。iOS デバイス（Safari およびその他の WebKit ブラウザ）は、CSS でパララックススクロールを実装するうえで中心となる background-attachment: fixed をサポートしていないか、サポートが限定的です。レイアウトを維持するため、背景は静的なスタイル（例: フルセンター）で表示されます。
- 幅100%にフィル: 縦横比を維持したまま画像を拡大してコンテナの幅全体をカバーします。縦方向がトリミングされる場合があります。
- 幅と高さ100%にフィル: 画像を引き伸ばしてコンテナの幅と高さの両方を埋めます。縦横比を維持するため、画像の一部がトリミングされます。
- 繰り返さない: 画像を繰り返さずに 1 回だけ表示します。余ったスペースは空白のままになります。
- 繰り返す: 画像をタイル状に並べて、コンテナの幅と高さの両方をカバーします。
- 水平に繰り返す: コンテナの幅方向にのみ画像を繰り返します。
- 垂直に繰り返す: コンテナの高さ方向に画像を縦に並べます。
画像フィット: 配置を整えるために、コンテナ内での画像の位置（中央、左上、右下など）を指定します。
色: このオプションでは、背景と前景の色を設定できます。
- 背景色: 背景画像を使用しない場合は、単色またはグラデーションの色を背景として直接適用できます。カラーピッカーからカスタムの色を選択するか、一貫性を保つためにスタイルガイドから色を選択します。背景画像を使用している場合、通常は背景色は表示されませんが、画像の読み込み中に一時的に表示されたり、画像の読み込みに失敗した場合のフォールバックとして表示されたりすることがあります。
- 前景色: 背景画像の上にオーバーレイを追加します。不透明度を調整して、画像に色味を付けたり柔らかい印象にしたりできます。このレイヤーにより、読みやすさを高めたり、画像にスタイリッシュな色味を加えたりできます。
背景動画: 動画を背景として使用するには、「背景動画」オプションをオンに切り替えます。YouTube または Vimeo の動画 URL を入力すると、その動画がコンテナの背景に設定されます。

動画 URL を入力すると、次のオプションが表示されます。
- 終了アクション: 動画の終了時の動作を選択します: 動画をループ、URLにリダイレクト（リダイレクトURL を入力し、必要に応じて 新しいタブで開く をオンにします）、または ポップアップを表示。
- 背景スタイル: コンテナ全体をカバーするには 100%をフィル を、背景オフセットY (%) と 背景オフセットX (%) で動画の位置を調整するには 動画をオフセット を選択します。
- モバイルで動画背景を隠す: モバイルデバイスでは動画をオフにします。
- カラー背景をオーバーレイとして使用: 動画の上に背景色をオーバーレイとして表示します。
注:

背景動画は、ページの本文と、セクション、行、フレックス コンテナで使用できます。

💡 詳しくはこちら: イメージ: イメージの追加と管理