> 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 Site のページ上で、見出し、画像、テキストコンテンツを使って目立つメッセージを表示する Experience Cloud コンポーネントです。

新機能のお知らせ、重要な更新の共有、プロモーションの強調表示、またはブランドメッセージでポータルユーザーを歓迎する用途に使用できます。テキスト、画像、アイコン、CTA ボタンを組み合わせて、ページ上部に注目を集めるアナウンスを作成できます。

ポータルのホームページ、告知セクション、機能のハイライト、またはサイトを訪れる顧客やパートナーに重要な情報を伝える必要があるあらゆる場所に最適です。

{% hint style="danger" %}
このコンポーネントは [スロットを活用し](/experience-cloud/experience-cloud-ja/hajimeni/learning-the-basics.md#understanding-slots) 高度なカスタマイズを実現するため、LWR サイトに最適です。Aura サイトではこのレベルのカスタマイズはサポートされていません。
{% endhint %}

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-bf96d5a1aa7519e2b16ede8f3bb4704a3f621fee%2F2024-02-14_20-48-00.png?alt=media" alt=""><figcaption></figcaption></figure>

## 設定

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

タイトルとコンテンツの設定は簡単なプロセスですが、バナーの効果に大きく影響します。

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

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

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

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

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

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

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

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

Avonni Banner コンポーネントは、テキストや静的画像だけに限りません。動画をバナーデザインに組み込んで、メッセージにアクセントを加え、ユーザーのエンゲージメントを高めましょう。

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-f011ba9c8a4d4574a472e293f9eea608e7934091%2F2024-02-14_20-53-10.png?alt=media" alt=""><figcaption></figcaption></figure>

### 背景画像の追加

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

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

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

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

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

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

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

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

### プロパティ

**タイトル** バナーの主要な見出しを定義し、メインメッセージにすぐ注意を引きます。 **キャプション** 追加のコンテキストを与える簡潔なサブタイトルまたは説明文を添えます。 **コンテンツ** 詳細なテキストでバナーを充実させます — 包括的な説明、解説、または CTA。テキストスタイル（見出し 1～4 または段落 1～2）は［スタイル］タブで設定します。

**コンテンツの水平方向の配置** コンテンツテキストの水平方向の位置を調整します — `左`, `中央`、または `右`.

**CMS 背景** と **背景 URL または式** バナーの背景画像を設定します — CMS コンテンツまたは直接の Web リンクを使用します。

**CMS メディア** と **メディア URL または式** バナーに мультimedia 要素（動画、音声、その他）を組み合わせて、または一部として表示します。 **メディアを背景として表示** テキストを前面に保ちながら、没入感のある体験のためにメディアをバナーの背景として設定します。 **メディアの位置** 配置場所を指定します（左上、中央、右など）。

**オーバーレイカラー** 読みやすさを高めたり、雰囲気を演出したり、ブランドカラーに合わせたりするために色のオーバーレイを追加します。

**クリック可能** バナー全体を、ユーザーを別の場所に移動させたり、定義されたアクションを実行したりするインタラクティブ要素にします（設定は [インタラクション](#interactions)).

### メディア属性

バナーにメディアが含まれる場合、これらの設定で再生を制御します。 **自動再生** ページ読み込み時に自動的に再生を開始します。 **ループ** 終了すると継続的に繰り返し再生します。 **コントロールを非表示** 見た目をすっきりさせるため、プレーヤーのコントロールを非表示にします。 **再生速度** メディアの再生速度を調整します。 **音量** 控えめなBGMから目立つナレーションまで、音声レベルを制御します。

## インタラクション

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

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-3d9fc84708dc88163a34feee353a9a233c36509e%2F2024-03-16_11-16-16.png?alt=media" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-18022913b2d9754a42a890b024ed0c27f3557b62%2F2024-03-16_11-17-42.png?alt=media" alt="" width="365"><figcaption></figcaption></figure>

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

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

<table><thead><tr><th width="184.5">インタラクションの種類</th><th>説明</th></tr></thead><tbody><tr><td><a href="/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/show-toast.md">トーストを表示</a></td><td>クリック後に短い案内メッセージを表示します。アクションの確認や文脈の提供に最適です。</td></tr><tr><td><a href="/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/navigate.md">移動</a></td><td>クリックすると、ユーザーを別のページまたはリソースにリダイレクトします。関連コンテンツやリソースへの誘導に適しています。</td></tr><tr><td><a href="/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-alert-modal.md">アラートモーダルを開く</a></td><td>クリック後に、アラートモーダルで情報や警告を表示します。重要なお知らせに便利です。</td></tr><tr><td><a href="/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-flow-dialog.md">フローダイアログを開く</a></td><td>ダイアログ内で Salesforce フローを起動し、複雑な操作を可能にします。段階的な処理の案内に役立ちます。</td></tr><tr><td><a href="/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/open-confirm.md">確認を開く</a></td><td>操作後に確認ダイアログを表示します。ユーザーの確認や承認が必要なアクションに不可欠です。</td></tr><tr><td><a href="/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/execute-flow.md">フローを実行</a></td><td>ダイアログやパネルなしで、バックグラウンドで自動起動する Salesforce フローを実行します。クリックで何かを開くのではなく、自動化を起動したい場合に便利です。</td></tr><tr><td><a href="/experience-cloud/experience-cloud-ja/puropatipaneru/interactions/download.md">ダウンロード</a></td><td>Salesforce ファイル、公開リンク、または URL から、バナーがクリックされるとファイルをダウンロードします。</td></tr></tbody></table>

## スタイル

{% 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="メディア" %}

* **Object Fit:** メディアが領域内にどのように収まるかを制御します。
  {% endtab %}
  {% endtabs %}

### **注記**

**Object Fit**:

* **`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`**：文字を右に傾けた斜体スタイルでテキストを表示します。

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

* **`左`**：コンテンツをコンテナの左側に配置します。
* **`中央`**：コンテンツをコンテナ内で水平方向中央に配置します。
* **`右`**：コンテンツをコンテナの右側に配置します。


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-banner.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.