# コンテンツを中央揃えにして

## 概要

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

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

## 対話型ステップバイステップ構成ガイド

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

* Experience Builder で、バナーを表示したいページ上に Avonni Banner コンポーネントをドラッグします。
* **メディアを設定する:**
  * バナー設定内で画像やイラストを追加するオプションを見つけます（CMS メディア または メディア 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: 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:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/konpnento/ban/kontentsuwoenishite.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.