ドキュメントCommercePage Builder

PaaS のみ

メディア – バナー

最終更新日: 2025年5月5日
  • トピック:

作成対象:

  • 初心者
  • 中級
  • ユーザー

バナー コンテンツタイプを使用して、Page Builder ステージでコールトゥアクションとボタンでユーザーを引きつけるイラスト付きのインタラクティブコンポーネントを追加します。

NOTE
以前はコンテンツメニューの バナー オプションでしたが、現在は 動的ブロックになっています。

ストアフロントのホームページのバナー

NOTE
Page Builder コンテンツに大きな変更を加える場合は、 管理者セッションの有効期間を増やして、作業中にセッションがタイムアウトしないようにすることをお勧めします。

バナーツールボックス

バナーツールボックスは、バナーコンテナにカーソルを合わせると表示されます。

バナーツールボックス

ツール
アイコン
説明
移動
移動アイコン
バナーをステージ上の別の位置に移動します。
(ラベル)
バナー
現在のコンテンツコンテナをバナーとして識別します。 コンテナの上にマウスポインターを置くと、ツールボックスが表示されます。
設定
設定アイコン
バナーを編集ページを開きます。このページで、バナーとコンテナのプロパティを変更できます。
Hide
アイコンを非表示
現在のバナーを非表示にします。
表示
アイコンを表示
非表示のバナーを表示します。
複製
複製アイコン
バナーをコピーします。
削除
削除アイコン
ステージからバナーを削除します。
Upload New Image
バナーの背景用に、ローカルファイルシステムからギャラリーに画像をアップロードします。
Select from Gallery
バナーの背景にギャラリーの既存の画像を使用します。
NOTE
非表示の要素はデータベースに保存され、顧客には表示されません。 ただし、これらの要素は、サイトをクロールする検索エンジンやその他のボットには表示されます。 また、非表示の属性を持つ API 呼び出しを通じてリクエストされた場合、ステージから削除しない限り、コンテンツの一部として返されます。

バナーを追加

  1. Page Builder パネルで Media を展開し、Banner プレースホルダーをステージにドラッグします。

    バナーコンテンツタイプのステージへのドラッグ

    Upload Image ​ボタンと​ Select from Gallery ボタンが含まれているので、ステージから直接バナーコンテンツをすばやく変更できます。 Edit Banner ​ページのコンテンツを変更することもできます。

  2. バナープレースホルダー内をクリックして テキストエディターを表示し、バナーのコンテンツを入力します。

    コンテンツ設定を使用して、より複雑なバナーコンテンツを含めることもできます。

バナー設定の変更

  1. バナーコンテナにカーソルを合わせてツールボックスを表示し、設定 ( 設定アイコン )アイコンを選択します。

  2. 使用可能な設定の更新について詳しくは、次の節を参照してください。

    • Appearance
    • Content
    • Background
    • Advanced
  3. 完了したら、右上隅の「Save」をクリックして、Edit Banner ​ページを閉じます。

  4. 右上隅にある「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

Appearance

バナーは、4 つの定義済みテンプレートのいずれかに基づいているので、設定と管理が簡単です。

  • 次のいずれかのバナー配置タイプを選択します。

    プレースメント
    説明
    Poster
    コンテンツとボタンをバナーの中央に配置します。 オーバーレイを使用すると、バナーの全幅が拡張されます。
    Collage Left
    バナーの左側の定義済み領域に、コンテンツとボタンを配置します。 オーバーレイを使用すると、定義した領域のみがオーバーレイ対象になります。
    Collage Center
    バナーの中央にある定義済みの領域にコンテンツとボタンを配置します。 オーバーレイを使用すると、定義した領域のみがオーバーレイ対象になります。
    Collage Right
    バナーの右側の定義済み領域にコンテンツとボタンを配置します。 オーバーレイを使用すると、定義した領域のみがオーバーレイ対象になります。

    外観 – 右のコラージュ

  • (オプション)行の Minimum Height を入力します。

    最小の高さは、有効な CSS 単位(100px、50%、50em、100vh など)または計算(100vh - 237px など)を含む数値です。

    例えば、バナーの最小の高さを設定して、ページの完全な高さを引き伸ばすことができ、完全なページの背景画像やビデオに対して魅力的なオプションを提供できます。

Background

バナーの背景表示を定義するオプションは多数あります。 シンプルなカラーまたは背景画像を適用し、より高度な効果を管理できます。

Background Color

スウォッチを選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、背景色を指定します。 この設定により、行の背景色が決まります。 また、カラーの不透明度を調整することもできます。

色なし(デフォルト)

次の 3 つの方法のいずれかで値を設定できます。

  • 定義済みのカラー名(White など)
  • カラーの 16 進数カラー値(例:#ffffff)
  • カラーの rgba 値(不透明度の割合)(rgba(255, 255, 255, 0.75) など)。

カラーを選択する場合は、「カラーなし ボックスの左側にあるスウォッチをクリックし す。

カラースウォッチの選択

カラーボックスをクリックして再度カラーピッカーを開くと、スライダの下のボックスに現在の赤、緑、青、アルファ値(rgba)が表示されます。 最後の数値は、現在の不透明度の割合を小数で示します。 スライダを使用して、不透明度を調整したり、必要な小数値を入力したりできます。

不透明度の設定

NOTE
Page Builder では、背景画像に透明度レイヤー(アルファチャンネル を含めることもできます。このレイヤーを使用して、様々な不透明度の背景を作成できます。

Background Type

背景の種類は、画像またはビデオです。 デフォルト Page BuilderImage で、様々な画像設定が表示されます。 Video を選択すると、Page Builder は画像設定をビデオ設定にスワップします。 両方の背景タイプの設定について、次の節で説明します。

背景の種類

画像タイプの設定

背景の種類 を Image に設定する場合、次の設定を使用して背景画像の表示を定義します。

背景画像付きバナー

  • Background Image – 必要に応じて、用意されているツールを使用してバナーに適用する背景画像を選択します。

    ツール
    説明
    Upload
    ローカルコンピューターからギャラリーに画像ファイルをアップロードし、それをバナーの背景画像として適用します。
    Select from Gallery
    バナーの背景画像として、ギャラリーから既存の画像を選択するように求めるプロンプトを表示します。
    カメラアイコン
    画像をカメラタイルにドラッグするか、ローカルファイルシステム内の画像を参照できます。
  • Background Mobile Image – 必要に応じて、同じツールを使用して、モバイルデバイスでの表示に使用する別の背景画像を選択します。

  • Background Size – このオプションを設定して、バナーの幅に対する背景画像の拡大縮小を指定します。

    オプション
    説明
    Cover
    背景画像はバナーの全幅をカバーしています。
    Contain
    背景画像は、コンテンツ領域の幅に制限されます。
    Auto
    現在のスタイル シートからサイズを適用します。

    背景サイズ

  • Background Position – このオプションを設定して、背景画像をバナーに対してどのように固定するかを指定します。

    アンカー
    位置
    Top
    左/中央/右
    Center
    左/中央/右
    Bottom
    左/中央/右

    アンカーポイントは、プッシュピンのようなもので、指定した背景位置で画像をバナーにアタッチします。

  • Background Attachment – 添付ファイルタイプを設定して、スクロールするページに対する背景画像の移動を指定します。

    オプション
    説明
    Scroll
    添付された背景画像は、ページがスクロールすると下に移動するように同期されます。
    Fixed
    (モバイルでは使用できません)コンテナが画像の上をスクロールし、指定された背景位置に固定されるので、背景画像は移動しません。
  • Background Repeat – 背景画像を繰り返してスペースを埋める場合は、この設定 Yes を変更します。

ビデオタイプの設定

Background Type ​を Video に設定した場合は、次の設定を使用して背景画像の表示を定義します。

  • Video URL – 有効なビデオ URL を入力します。 有効なビデオ URL は、次へのリンクです。

    • YouTube ビデオ:https://youtu.be/CoDhMRUUjeI
    • Vimeo ビデオ:https://vimeo.com/190156113
    • 有効なビデオ ファイル (.mp4 を推奨): https://myvideos.com/spiral.mp4

    背景ビデオの URL

  • Overlay Color - ビデオに透明の濃淡を適用するカラーを選択します。

  • Infinite Loop - No に設定すると、ビデオを 1 回再生して停止します。 Yes (デフォルト)に設定すると、ビデオは無限ループで繰り返されます。

  • Lazy Load - No に設定すると、非表示の場合でもビデオがページと共に読み込まれます。 Yes (デフォルト)に設定されている場合、ビデオは画面に表示されているときにのみソースから読み込まれます。

  • Play Only When Visible - ビデオが表示されているかどうかに関係なく、ビデオの読み込み直後に再生を開始するには、No に設定します。 Yes (デフォルト)に設定されている場合、ビデオは表示されているときにのみ再生を開始します。

  • Fallback Image – 必要に応じて、ビデオが読み込まれる前および何らかの理由でビデオが読み込まれない場合に画面に表示する画像を指定します。

Content

バナーコンテンツは、ステージ上で直接変更することも、設定を変更する場合に変更することもできます。 設定では、バナーリンク、ボタン、オーバーレイなど、より複雑なコンテンツ機能が提供されます。 コンテンツの位置は、 アピアランスの配置設定を反映します。

ステージ上のシンプルなコンテンツ

  1. プレースホルダーテキストをクリックし、バナーに表示するテキストを入力します。

    テキストボックスの上にエディターツールバーが表示されます。

    ステージ上でのコンテンツの編集

  2. エディターツールバーを使用して、テキストの入力や書式設定のほか、リンク、画像、ウィジェットなどの要素を挿入します。

    書式設定されたテキストを使用したステージ

設定の複雑なコンテンツ

  1. バナーコンテナの上にマウスポインターを置くと、ツールボックスが表示されます。次に、設定 ( 設定アイコン)アイコンを選択します。

  2. 「Content」セクションまでスクロールし、Message Text ​エディターを使用してバナーテキストを入力および書式設定します。

    テキストリンク、画像、ウィジェットなどの要素を挿入することもできます。

    メッセージテキストエディター

  3. 必要に応じて、バナー Link を指定します。

    リンクは、顧客がバナーボタンまたは領域をクリックすると表示される宛先ページです。 次の 3 つのリンクタイプのいずれかを使用できます。

    • URL – 相対 URL または完全修飾 URL へのリンク。
    • Product – 製品名または SKU に基づいて宛先ページを識別します。 部分的または完全な名前に基づいて、名前で製品を検索します。 検索結果リストから製品を選択します。
    • Category - カテゴリツリー内の特定のカテゴリまたはサブカテゴリとして宛先ページを識別します。 名前の一部または全部に基づいてカテゴリを検索します。 表示されたツリーの展開セクションからカテゴリを選択します。
    • Page – 宛先ページを特定のコンテンツページとして識別します。 名前の一部または全部に基づいてページを検索します。 検索結果リストからページを選択します。
    NOTE
    2.4.1 リリース以降、ストアフロントの表示に関する問題により、Page Builder はバナーとネストされたテキスト内のリンクのリンクをサポートしなくなりました。 Message Text ​でリンクを使用している場合、「Link」オプションを設定することはできません。 バナー全体に 1 つのリンクを使用する場合は、テキストからすべてのリンクを削除できます。
    リンク設定がブロックされています
  4. 必要に応じて、リンクをたどるように顧客に促すボタンを追加します。

    バナーの外観を設定すると、テキストの下に 1 つのリンクまたはボタンが配置されます。 追加するリンクまたはボタンのプロパティを入力します。

    テキストおよびボタン(またはリンク)を使用した外観

    NOTE
    バナーに ブロックを追加して、複数のボタンやリンクを使用することもできます。 競合を避けるために、すべてのリンクまたはボタンを個別のブロックに保持し、リンクまたはボタンをバナーに直接追加しないでください。
    • Show Button を次のいずれかに設定します。

      オプション
      説明
      Always
      ボタンは常にバナーに表示されます。
      On Hover
      ボタンは、マウスポインターを置いたときにのみバナーに表示されます。
      Never Show
      ボタンがバナーに表示されない。
    • ボタンに表示する Button Text を入力します。

    • Button Type を次のいずれかに設定します。

      オプション
      説明
      Primary
      現在のスタイル シートからプライマリ ボタン スタイルを適用します。
      Secondary
      現在のスタイル シートからセカンダリ ボタン スタイルを適用します(該当する場合)。
      Link
      ボタンではなくハイパーリンクを作成します。

      現在のテーマのボタンのスタイルによって、ボタンの形式が決まります。 通常、プライマリボタンの背景色は、セカンダリボタンの背景色よりも目立ちます。

  5. Show Overlay を次のいずれかに設定します。

    オプション
    説明
    Always
    オーバーレイは常に表示されます。
    On Hover
    オーバーレイは、カーソルを合わせたときにのみ表示されます。
    Never Show
    オーバーレイが表示されません。

    オーバーレイを使用して、Appearance 設定で定義されたアクティブなコンテンツ領域に背景色を適用することができます。 バナーの背景画像は、バナーの全幅に対して表示されたままになります。

    オーバーレイの表示を選択した場合は、Overlay Color を設定します。

    • カラーなし スウォッチをクリックし、スウォッチを選択します。
    • カラーなし フィールドに、有効なカラー名または 16 進数値を入力します。

    オーバーレイカラー

  6. 右上隅にある「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

    テキストメッセージとボタンを含むバナー

Search Engine Optimization

これらの設定のテキストは、検索エンジンに表示され、ページのインデックス作成方法が改善されます。

  • Alternative Text しくは、表示するデジタルアクセシビリティツールの alt テキストの説明を入力します。

    代替テキストの使用は、アクセシビリティのベストプラクティスであり、一部のロケールでは法律で義務付けられています。 HTMLすると、alt 属性は image タグのサブセットです。<image title="tooltip" alt="description" src="image.jpg">

  • Title Attribute:マウスオーバーしたときにツールヒントとして表示するテキストを入力します。

    ベストプラクティスとして、説明的でキーワードの多いタイトルを選択すると、検索エンジンによる画像のインデックス作成方法が改善されます。 HTMLすると、title 属性は image タグのサブセットです。<image title="tooltip" alt="description" src="image.jpg">

Advanced

  1. バナーに追加されるコンテンツコンテナの水平方向の位置を制御するには、Alignment のいずれかを選択します。

    オプション
    説明
    Default
    現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。
    Left
    指定したパディングを許可して、バナーコンテナの左境界線に沿ってコンテンツコンテナを揃えます。
    Center
    コンテンツコンテナをバナーコンテナの中央に揃え、指定したパディングを許容します。
    Right
    指定したパディングを考慮して、コンテンツコンテナをバナーコンテナの右端に沿って配置します。
  2. バナーコンテナの 4 つの側面すべてに適用する Border スタイルを設定します。

    オプション
    説明
    Default
    関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。
    None
    コンテナの境界線の表示はしません。
    Dotted
    コンテナの境界線は点線で表示されます。
    Dashed
    コンテナの境界線は破線で表示されます。
    Solid
    コンテナの境界線は実線で表示されます。
    Double
    コンテナの境界線は二重線で表示されます。
    Groove
    コンテナの境界線は溝付き線で表示されます。
    Ridge
    コンテナの境界線は、境界線として表示されます。
    Inset
    コンテナの境界線は、インセットされた線として表示されます。
    Outset
    コンテナの境界線は、先頭行として表示されます。
  3. None 以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。

    • Border Color - カラーを指定するには、見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力します。

      境界線のカラー

    • Border Width – 境界線の幅のピクセル数を入力します。

    • Border Radius – 境界線の各コーナーを丸めるために使用する半径のサイズを定義するピクセル数を入力します。

  4. (オプション)バナーコンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。

    複数のクラス名はスペースで区切ります。

  5. バナーの外側の余白と内側のパディングを指定する Margins and Padding の値をピクセル単位で入力します。

    対応する各値をバナーコンテナ図に入力します。

    オプション
    説明
    Margins
    コンテナのすべての側面の外側の端に適用される空白スペースの量。
    Padding
    コンテナのすべての側面の内側の端に適用される空白のスペースの量です。
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d