> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-banner.md). # AX - バナー ## 概要 **AX - バナー** は、Experience Sites ページ上で見出し、画像、テキストコンテンツを含む目立つメッセージを表示する Experience Cloud コンポーネントです。 新機能の告知、重要な更新の共有、プロモーションの強調、またはブランド化されたメッセージでポータル ユーザーを歓迎するために使用します。テキスト、画像、アイコン、CTA ボタンを組み合わせて、ページ上部に注目を集めるお知らせを作成できます。 ポータルのホームページ、お知らせセクション、機能のハイライト、またはサイトを訪れる顧客やパートナーに重要な情報を伝える必要があるあらゆる場所に最適です。 {% hint style="danger" %} このコンポーネント [スロットを活用し](/experience-cloud/experience-cloud-ja/hajimeni/learning-the-basics.md#understanding-slots) 高度なカスタマイズを実現するため、LWR サイトに最適です。Aura サイトではこのレベルのカスタマイズはサポートされていません。 {% endhint %}
## 設定 ### タイトルとコンテンツの追加 タイトルとコンテンツの設定は簡単なプロセスですが、バナーの効果に大きく影響します。 **タイトルとコンテンツの追加** **1. カスタムプロパティエディターの使用：** * **コンテンツの入力**：Avonni Banner コンポーネント内で提供されるカスタムプロパティエディターに、タイトルとコンテンツを直接すばやく入力できます。この方法は使いやすく効率的で、迅速な更新や編集が可能です。 **2. テキストのスタイル設定オプション：** * **サイトテーマから継承**：Avonni Banner コンポーネントでは、タイトルとコンテンツが Experience Cloud サイトのテーマ設定からテキストスタイルを継承できます。これによりサイト全体の一貫性が保たれ、統一感のある外観になります。 * **カスタムスタイル**：より具体的な要件に対応するために、カスタムプロパティエディター下部の Avonni 専用スタイル設定カスタマイズを使用できます。このオプションでは、サイト全体のテーマに依存せず、タイトルとコンテンツのスタイルを手動で設定できます。 * **カスタムスタイルの利点**：カスタムスタイルは、バナーを目立たせたり、重要なメッセージを強調したり、サイトの他の部分とは異なる独自のスタイルが必要な場合に特に便利です ### コンテンツの水平方向配置を定義 * **中央：** テキストをバナー中央に配置して、バランスの取れた見た目にします。 * **左：** 伝統的なレイアウトにするには、テキストを左揃えにします。 * **右：** 独自性のあるデザインにするには、テキストを右揃えにします ### メディア要素を定義 Avonni Banner コンポーネントは、テキストや静止画像だけに限りません。バナーデザインに動画を取り入れて、メッセージに動きを加え、ユーザーエンゲージメントを高めましょう。 * **動画でバナーを強化** * 動画要素を追加して、バナーをより動的で魅力的にしましょう。 * 最も視覚的な効果が高くなるように動画を配置します。次のオプションから選択できます：右、左上、上中央、右上、左、左下、下中央、右下。 * 必要に応じて、動画をクリック可能にして、ユーザーがクリックで操作できるようにします。 * **追加の動画設定** * バナーの読み込み時に動画を自動再生するかどうかを選択します。 * 動画を繰り返しループ再生します。 * 動画プレーヤーのコントロールを表示するか非表示にするかを決めます。 * 動画の再生速度を調整します。 * 動画の開始時の音量レベルを設定します。
### 背景画像の追加 この機能は、視覚的に印象的な第一印象を作るのに便利で、バナーの外観をサイト全体のブランディングやテーマに合わせるためにも使用できます。 背景画像は次の3つの方法で追加できます： **1. 手動アップロード：** * ユーザーはデバイスから画像ファイルを直接アップロードできます。 * このオプションは、カスタムグラフィック、会社ロゴ、またはあらかじめ作成してローカルに保存した特定のマーケティング資料に最適です。 **2. Experience Cloud サイト式を使用して生成：** * 背景画像は、サイト式に基づいて動的に生成できます。 * この方法では、ユーザーの操作、サイトデータ、または Experience Cloud サイト内で定義された特定の条件に基づいて、バナーをリアルタイムにカスタマイズできます。 **3. CMS メディアから：** * ユーザーは統合されたコンテンツ管理システム（CMS）から画像を選択できます。 * このオプションでは画像ライブラリにアクセスでき、サイトのコンテンツリポジトリにすでにある高品質で関連性の高いグラフィックを便利に選択できます。 ### プロパティ **タイトル** バナーの主見出しを定義し、主要メッセージにすぐに注意を引きます。 **キャプション** 簡潔なサブタイトルまたは説明を添えて追加の文脈を提供し、 **コンテンツ** 詳細なテキストでバナーを充実させます。包括的な説明、解説、または CTA を含めることができます。テキストスタイル（見出し 1～4 または段落 1～2）は［スタイル］タブで設定します。 **コンテンツの水平方向配置** コンテンツテキストの水平方向の位置を調整します — `左`, `中央`、または `右`. **CMS 背景** と **背景 URL または式** バナーの背景画像を設定します。CMS コンテンツまたは直接の Web リンクを使用します。 **CMS メディア** と **メディア URL または式** バナーの横または一部として、マルチメディア要素（動画、音声など）を表示します。 **背景としてメディアを表示** メディアをバナーの背景に設定して没入感のある体験を提供しつつ、テキストを前面に保ちます。 **メディアの位置** 配置を指定します（左上、中央、右など）。 **オーバーレイカラー** 読みやすさを高めたり、雰囲気を演出したり、ブランドカラーに合わせたりするために、カラーオーバーレイを追加します。 **クリック可能** バナー全体を、ユーザーを別の場所に移動させたり定義済みアクションを起動したりするインタラクティブ要素に変えます（設定は [インタラクション](#interactions)). ### メディア属性 バナーにメディアが含まれる場合、これらの設定で再生を制御します。 **自動再生** ページ読み込み時に自動的に再生を開始します。 **ループ** 終了すると連続して再生し直します。 **コントロールを非表示** プレーヤーのコントロールを非表示にして、すっきりした見た目にします。 **再生速度** メディアの再生速度を調整します。 **音量** 控えめなBGMからメインのナレーションまで、音量レベルを調整します。 ## インタラクション **クリック可能なバナー** Avonni Banner コンポーネントの主要なインタラクティブ機能の1つは、クリック可能にできることです。これにより受動的な閲覧者が能動的な参加者へと変わり、コンテンツへのより深い関与を促します。
**インタラクションの実装** バナーをクリック可能にするには、まずクリック可能トグルをオンにします。次に、［リンク先］セクションを使って、バナーがクリックされたときに何が起こるかを選択します。これにより、バナーに便利な機能を追加できます。
**インタラクションの定義** ユーザーがバナーをクリックすると、コンポーネントはあらかじめ定義されたインタラクションを実行できます。このレベルのカスタマイズにより、ユーザー体験はインタラクティブになり、サイト固有のニーズと目標に合わせられます。
インタラクション種別説明
トーストを表示クリック後に簡潔でわかりやすいメッセージを表示します。操作の確認や文脈の提供に最適です。
移動クリックすると、ユーザーを別のページやリソースにリダイレクトします。関連コンテンツやリソースへの誘導に適しています。
アラートモーダルを開くクリック後にアラートモーダルで情報や警告を表示します。重要なお知らせに役立ちます。
Flow ダイアログを開くダイアログ内で Salesforce フローを開始し、複雑なインタラクションを可能にします。段階的なプロセスの案内に役立ちます。
確認ダイアログを開くインタラクション後に確認ダイアログを起動します。ユーザーの確認や承認が必要な操作に不可欠です。
## スタイリング {% tabs %} {% tab title="サイズ" %} バナーの寸法を制御します。 {% endtab %} {% tab title="枠線" %} バナーの境界線（色 / サイズ / スタイル / 角丸）を制御します。 {% endtab %} {% tab title="マージン" %} バナーの外側の余白を制御します。 {% endtab %} {% tab title="パディング" %} バナーの内側の余白を制御します。 {% endtab %} {% tab title="タイトル" %} * **色 / フォントサイズ / フォントスタイル / フォントウェイト：** タイトルテキストのスタイルを設定します。 * **水平配置：** タイトルを配置します。 {% endtab %} {% tab title="キャプション" %} * **色 / フォントサイズ / フォントスタイル / フォントウェイト：** キャプションテキストのスタイルを設定します。 {% endtab %} {% tab title="コンテンツ" %} * **色 / フォントサイズ / フォントスタイル / フォントウェイト：** コンテンツテキストのスタイルを設定します。 * **水平方向の配置 / 幅：** コンテンツの配置と幅を制御します。 {% endtab %} {% tab title="背景" %} * **色：** 背景色を設定します。 * **画像の Object Fit：** 背景画像がバナー内でどのように表示されるかを制御します。 {% endtab %} {% tab title="メディア" %} * **オブジェクトフィット：** メディアが領域内をどのように埋めるかを制御します。 {% endtab %} {% endtabs %} ### **注意** **オブジェクトのフィット**: * **`塗りつぶし`**：画像をコンテナに合わせて引き伸ばし、歪む可能性があります。 * **`収める`**：画像のアスペクト比を保ち、トリミングせずにコンテナ内に収めます。 * **`覆う`**：画像のアスペクト比を保ちますが、コンテナ全体を完全に覆うために一部がトリミングされる場合があります。 * **`なし`**：画像はコンテナのサイズに関係なく元のサイズのまま表示されます。 * **`縮小`**：差異を比較し、 `なし` と `収める`、より小さい具体的なオブジェクトサイズを提供します。 **境界線のスタイル：** * **`なし`**：境界線は表示されません。 * **`実線`**：連続した途切れのない線で境界線を表示します。最も一般的でわかりやすいスタイルです。 * **`破線`**：境界線は短い線分やダッシュの連なりとして表示されます。 * **`点線`**：境界線は丸い点の連なりで構成されます。 * **`二重線`**：境界線には平行な 2 本の実線を使用します。2 本の線の間は透明または背景と同じ色になります。 * **`溝`**：境界線がページに彫り込まれているように見え、3D の外観になります。効果は境界線の色に左右されます。 * **`隆起`**：groove の逆で、ページから浮き出ているように見え、別の 3D 効果を与えます。見た目は境界線の色の影響を受けます。 * **`内側`**：上辺と左辺が陰影付きで表示され、要素がページに埋め込まれているように見えます。一方、右辺と下辺は強調表示されます。 * **`外側`**：inset の逆で、右辺と下辺が陰影付き、上辺と左辺が強調表示され、要素がページから飛び出しているような印象を与えます。 **フォントスタイル**: * **`標準`**：標準の斜体でないフォントスタイルでテキストを表示します。 * **`斜体`**：文字を右に傾けた斜体スタイルでテキストを表示します。 **水平配置**: * **`左`**：コンテンツをコンテナの左側に配置します。 * **`中央`**：コンテンツをコンテナ内で水平方向中央に配置します。 * **`右`**：コンテンツをコンテナの右側に配置します。 --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-banner.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.