> 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 %}

<figure><img src="/files/45f51c57dbf23ccbbf9b6e7fc8b1fede0d8d5a84" alt=""><figcaption></figcaption></figure>

***

## Avonni バナーの設定

### タイトルとコンテンツの追加

タイトルとコンテンツの設定は簡単な手順であり、バナーの効果に大きな影響を与えます。

**タイトルとコンテンツの追加**

**1. カスタムプロパティエディターの使用:**

* **コンテンツの入力**: Avonni Banner コンポーネント内で提供されるカスタムプロパティエディターに、タイトルとコンテンツを直接すばやく入力できます。この方法は使いやすく効率的で、迅速な更新や編集が可能です。

**2. テキストのスタイル設定オプション:**

* **サイトテーマから継承**: Avonni Banner コンポーネントでは、タイトルとコンテンツが Experience Cloud サイトのテーマ設定からテキストスタイルを継承できます。これによりサイト全体で一貫性が保たれ、統一感のある見た目になります。
* **カスタムスタイル設定**: より具体的な要件には、カスタムプロパティエディター下部にある Avonni 専用のスタイルカスタマイズを使用できます。このオプションでは、サイト全体のテーマとは独立して、タイトルとコンテンツのスタイルを手動で設定できます。
* **カスタムスタイル設定の利点**: カスタムスタイル設定は、バナーを目立たせたい場合、重要なメッセージを強調したい場合、またはバナーにサイトの他の部分とは異なる独自のスタイルが必要な場合に特に便利です

### コンテンツの水平配置を定義

* **中央:** バナーの中央にテキストを配置し、バランスの取れた見た目にします。
* **左:** テキストを左寄せにして、従来型のレイアウトにします。
* **右:** テキストを右寄せにして、独自性のあるデザインにします

### メディア要素を定義

Avonni Banner コンポーネントは、テキストや静止画像だけに限定されません。動画をバナーのデザインに取り入れてメッセージに活気を与え、ユーザーエンゲージメントを高めましょう。

* **動画でバナーを強化する**
  * 動画要素を追加して、バナーをよりダイナミックで魅力的にします。
  * 動画を最適な視覚効果の位置に配置します。次のオプションから選択できます: 右、左上、上中央、右上、左、左下、下中央、右下。
  * 必要に応じて、動画をクリック可能にして、ユーザーがクリックして操作できるようにします。
* **追加の動画設定**
  * バナーの読み込み時に動画を自動再生するかどうかを選択します。
  * 動画を繰り返しループ再生します。
  * 動画プレーヤーのコントロールを表示するか非表示にするかを決定します。
  * 動画の再生速度を制御します。
  * 動画の開始音量レベルを設定します。

<figure><img src="/files/ad875c2a596c820418e7291ba8b5fefbb7a44485" alt=""><figcaption></figcaption></figure>

### 背景画像の追加

この機能は、視覚的に印象的な第一印象を作るのに役立ち、バナーの見た目をサイト全体のブランディングやテーマに合わせるために使用できます。

背景画像は3つの異なる方法で追加できます:

**1. 手動アップロード:**

* ユーザーはデバイスから直接画像ファイルをアップロードできます。
* このオプションは、カスタムグラフィック、会社のロゴ、または既に作成済みでローカルに保存された特定のマーケティング素材に最適です。

**2. Experience Cloud サイト式を使用して生成:**

* 背景画像はサイト式に基づいて動的に生成できます。
* この方法では、ユーザーの操作、サイトデータ、または Experience Cloud サイト内で定義された特定条件に基づいて、バナーをリアルタイムにカスタマイズできます。

**3. CMS メディアから:**

* ユーザーは統合されたコンテンツ管理システム（CMS）から画像を選択できます。
* このオプションでは画像ライブラリにアクセスでき、サイトのコンテンツリポジトリに既に含まれている高品質で関連性の高い画像を便利に選べます。

### インタラクション機能

**クリック可能なバナー**

Avonni Banner コンポーネントの主なインタラクティブ機能の1つは、クリック可能にできることです。これにより受動的な閲覧者が能動的な参加者に変わり、コンテンツへのより深い関与を促します。

<figure><img src="/files/fbad6615ddcf51914ea8dc53b7ee42b348bb885c" alt=""><figcaption></figcaption></figure>

**インタラクションの実装**

バナーをクリック可能にするには、まず clickable トグルをオンにします。次に、「Link To」セクションを使用して、バナーがクリックされたときに何が起こるかを選択します。これにより、バナーに便利な機能を追加できます。

<figure><img src="/files/18b6f49bd5b6403c50c518f076e88934f452c24b" alt="" width="365"><figcaption></figcaption></figure>

**インタラクションの定義**

ユーザーがバナーをクリックすると、コンポーネントは事前定義されたインタラクションを実行できます。このレベルのカスタマイズにより、ユーザー体験はインタラクティブになり、サイト固有のニーズや目標に合わせて調整されます。

<table><thead><tr><th width="184.5">インタラクションの種類</th><th>説明</th></tr></thead><tbody><tr><td><a href="/pages/873e675a7ffa256f4722eb14395db37918667ed4">トーストを表示</a></td><td>クリック後に簡潔で情報量のあるメッセージを表示します。操作の確認や文脈の提示に最適です。</td></tr><tr><td><a href="/pages/1a89ae030463a25850aa0044937529fc30d4f074">移動</a></td><td>クリックすると、ユーザーを別のページやリソースにリダイレクトします。関連コンテンツやリソースへ誘導するのに適しています。</td></tr><tr><td><a href="/pages/e014a9588590b4d18a1aae4b92a518a9b2d92ddc">アラートモーダルを開く</a></td><td>クリック後にアラートモーダルで情報や警告を表示します。重要なお知らせに便利です。</td></tr><tr><td><a href="/pages/0fabfe6607d355d8178f54471ac36feab7e62390">フロー ダイアログを開く</a></td><td>ダイアログ内で Salesforce フローを開始し、複雑なインタラクションを可能にします。段階的なプロセスの案内に役立ちます。</td></tr><tr><td><a href="/pages/e1bdc94d7a494e5c9acb91195b500e8dbc8ebcbf">確認ダイアログを開く</a></td><td>インタラクション後に確認ダイアログを表示します。ユーザーの確認や承認が必要な操作に不可欠です。</td></tr></tbody></table>

***

## 仕様

{% tabs %}
{% tab title="🎛️ プロパティ" %}

<table><thead><tr><th width="264">設定</th><th>説明</th></tr></thead><tbody><tr><td><strong>タイトル</strong></td><td>バナーの主要な見出しを定義し、主メッセージへすぐに注意を引きます。</td></tr><tr><td><strong>タイトルのテキストスタイル</strong></td><td><p>さまざまなテキストスタイルでタイトルの外観をカスタマイズできます:</p><ul><li><strong>見出し</strong>: 強調の度合いに応じて、見出しレベル 1 ～ 4 から選択します。</li><li><strong>段落</strong>: 適切なトーンと目立ち具合に応じて、段落スタイル 1 または 2 を選択します。</li></ul></td></tr><tr><td><strong>キャプション</strong></td><td>タイトルに簡潔なサブタイトルや説明文を添え、追加の文脈や後続コンテンツへの導入を提供します。</td></tr><tr><td><strong>キャプションのテキストスタイル</strong></td><td><p>定義済みのテキストスタイルでキャプションの見た目をカスタマイズできます:</p><ul><li><strong>見出し</strong>: 重要度に応じて、見出し 1 ～ 4 から選択します。</li><li><strong>段落</strong>: タイトルを補完するために、段落 1 または 2 を選択します</li></ul></td></tr><tr><td><strong>コンテンツ</strong></td><td>詳細なテキストでバナーを充実させ、包括的な説明、解説、または CTA を提供します。ここでメッセージの具体的な内容をより深く伝えられます。</td></tr><tr><td><strong>コンテンツの水平配置</strong></td><td>コンテンツテキストの水平方向の位置を調整します。左寄せ、中央寄せ、右寄せのいずれのレイアウトでも、このプロパティによりコンテンツが全体のデザイン方針に沿って配置されます。</td></tr><tr><td><strong>CMS 背景</strong></td><td>コンテンツ管理システムのコンテンツをバナーの背景として利用し、一貫性と更新のしやすさを確保します。</td></tr><tr><td><strong>背景 URL</strong></td><td>バナーの背景画像の取得元となる特定の Web リンクを定義し、コンテンツに視覚的な文脈や強化を与えます。</td></tr><tr><td><strong>メディア URL</strong></td><td>バナーに並べて表示する、またはバナーの一部として使用したいマルチメディア要素へのリンクです。動画、音声、その他のインタラクティブメディアを指定できます。</td></tr><tr><td><strong>背景としてメディアを表示</strong></td><td>メディアをバナーの背景として設定し、テキストコンテンツを前面に保ちながら没入感のあるマルチメディア体験を実現します。</td></tr><tr><td><strong>メディアの位置</strong></td><td>バナー上でのメディアの配置を指定します。中央、左、右、またはレイアウトに合う任意のカスタム配置を選べます。</td></tr><tr><td><strong>オーバーレイカラー</strong></td><td>バナーに色のオーバーレイを追加し、可読性の向上、雰囲気の演出、ブランドカラーとの整合に役立てます。</td></tr><tr><td><strong>クリック可能</strong></td><td>バナーをインタラクティブな要素に変えます。有効にすると、バナー全体がクリック可能な要素として機能し、ユーザーを指定リンクへ誘導したり、定義済みのアクションを実行したりできます。</td></tr></tbody></table>
{% endtab %}

{% tab title="🏞️ メディア属性" %}

| 設定             | 説明                                                              |
| -------------- | --------------------------------------------------------------- |
| **自動再生**       | ページ読み込み時にメディアを自動的に再生し、すぐにマルチメディア体験を提供します。                       |
| **ループ**        | メディアを連続ループで再生し、終了時に最初から再開するようにします。                              |
| **コントロールを非表示** | よりすっきりした見た目のために、メディアプレーヤーのコントロールを非表示にし、ユーザーの操作を挟まずに再生できるようにします。 |
| **再生速度**       | メディアの再生速度を調整します。ユーザーの好みやデザイン意図に応じてコンテンツのテンポを調整するのに役立ちます。        |
| **音量**         | 控えめなBGMであっても、前面に出る音声ナレーションであっても、提供したいユーザー体験に合うようにメディアの音量を調整します。 |
| {% endtab %}   |                                                                 |

{% tab title="🎨 外観" %}

{% endtab %}
{% endtabs %}

### **注**

**オブジェクトフィット**:

* **`fill`**: 画像をコンテナに合わせて伸縮し、歪む可能性があります。
* **`contain`**: 画像のアスペクト比を維持し、トリミングせずにコンテナ内に収めます。
* **`cover`**: 画像のアスペクト比を維持しますが、コンテナ全体を完全に覆うために一部が切り取られる場合があります。
* **`none`**: 画像はコンテナのサイズに関係なく元のサイズのまま表示されます。
* **`scale-down`**: 次の間の差を比較し `none` と `contain`、より小さい具体的なオブジェクトサイズを適用します。

**境界線スタイル:**

* **`none`**: 境界線は表示されません。
* **`solid`**: 途切れのない連続した線で境界線を作成します。最も一般的でわかりやすいスタイルです。
* **`dashed`**: 境界線は短い線分、つまり破線として表示されます。
* **`dotted`**: 境界線は丸い点の連なりで構成されます。
* **`double`**: 境界線には平行な2本の実線を使用します。2本の線の間隔は透明か、背景と同じ色になります。
* **`groove`**: 境界線がページに彫り込まれたように見え、3D の外観になります。効果は境界線の色の値によって異なります。
* **`ridge`**: groove の逆で、ページから浮き出しているように見え、別の3D効果を与えます。見た目は境界線の色の影響を受けます。
* **`inset`**: 上と左の境界線に影を付け、要素がページに埋め込まれているように見せます。一方、右と下の境界線は強調表示されます。
* **`outset`**: inset の逆で、右と下の境界線に影を付け、上と左の境界線を強調することで、要素がページから飛び出しているような印象を与えます。

**フォントスタイル**:

* **`normal`**: テキストを標準の非イタリック体で表示します。
* **`italic`**: テキストを斜体で表示し、文字を右に傾けます。

**水平方向の配置**:

* **`left`**: コンテンツをコンテナの左側に配置します。
* **`center`**: コンテンツをコンテナ内で水平中央に配置します。
* **`right`**: コンテンツをコンテナの右側に配置します。


---

# 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=<question>&goal=<endgoal>
```

`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.