> 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/chtoriaru/components/banner/with-content-centered.md).

# 中央揃えのコンテンツ付き

## 概要

Avonni Banner コンポーネントでは、コンテンツセクション内に2カラムレイアウトを組み込むことで、視覚的に魅力的でインタラクティブな体験を作成できます。このレイアウトには、2つの異なるボタンが配置されます — 1つは [Avonni Button Dialog](/experience-cloud/experience-cloud-ja/experience-components/ax-button-dialog.md) モーダル操作用に最初の列に配置される、標準の [Avonni Button](/experience-cloud/experience-cloud-ja/experience-components/ax-button.md) 外部アクション用に2番目の列に配置されます。両方のボタンは、それぞれの列内で水平中央揃えにされ、すっきりとした対称的な外観になります。

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

## インタラクティブなステップバイステップ設定ガイド

### Avonni Banner コンポーネントをドラッグし、

* Experience Builder で、バナーを表示したいページ上に Avonni Banner コンポーネントをドラッグします。
* **メディアを設定する：**
  * バナー設定内で画像またはイラストを追加するオプションを見つけます（CMS Media または Media URL）
  * 使用したいイラストをアップロードまたは選択し、（Media Position 属性を使用して）バナーの左側または右側に配置します
  *

### コンテンツレイアウトの準備

1. **Avonni Layout コンポーネントを挿入する：**
   * Avonni Banner のコンテンツセクションに、2カラムに設定した Avonni Layout コンポーネントを配置します。

### ボタンの設定

2. **最初の列に Avonni Button Dialog を追加する：**
   * Avonni Button Dialog コンポーネントをレイアウトの最初の列にドラッグします。
   * ボタン設定を調整して、列内で水平中央揃えにします。
3. **2番目の列に Avonni Button を挿入する：**
   * Avonni Button コンポーネントを2番目の列に配置します。
   * 最初のボタンと同様に、水平配置を中央に設定し、反対側の列にある Button Dialog のレイアウトと一致させます。

## 効果的に使うためのヒント

* 両方のボタンには、わかりやすく魅力的な行動喚起のラベルを明確に付けます。
* ボタンを水平中央揃えにすることで、見た目が整ったプロフェッショナルな印象になり、視覚的にも魅力的で操作しやすくなります。
* 中央揃えのボタンを備えた2カラムレイアウトにより、バランスの取れたデザインになり、両方の選択肢へのユーザーの操作を促します。

## 結論

Avonni Banner コンポーネント内で、2カラムの Avonni Layout と中央揃えのボタンを活用することで、ユーザーにコンテンツへの関与を促す、焦点の定まったインタラクティブなセクションを作成できます。この構成は視覚的な魅力を高めるだけでなく、Salesforce Experience Cloud プラットフォーム上でユーザーを目的のアクションへ導くという機能的な役割も果たします。

<br>


---

# 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/chtoriaru/components/banner/with-content-centered.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.