> 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 Layout を2列で利用し、Avonni Banner コンポーネント内のボタンを中央揃えにすることで、ユーザーにコンテンツへの関与を促す、集中性の高いインタラクティブなセクションを作成できます。この構成は視覚的な魅力を高めるだけでなく、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.