# AX - テキストブロック

## 概要

**AX - テキストブロック** Experience Cloud コンポーネントで、Experience Sites のページにリッチテキスト編集機能を備えた書式付きテキストコンテンツを表示します。

段落、見出し、書式付きテキスト、リスト、またはポータルページに配置する任意の文章コンテンツを追加するために使用します。Experience Builder のリッチテキストエディタを使ってフォント、色、配置、書式を設定できます。

ページの説明、ヘルプテキスト、ポリシーコンテンツ、手順、発表、またはポータルで書式付きテキストコンテンツが必要なあらゆる場所に最適です。

{% hint style="success" %}
Avonni テキストブロックは [リアクティブデータコンポーネントです](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/hajimeni/riakutibukonpnento)
{% endhint %}

## **Avonni テキストブロックコンポーネントの使用**

### **コンポーネントの追加**

* Experience Cloud サイトの Experience Builder 内で、Avonni テキストブロックを追加したいページまたはセクションに移動します。
* コンポーネントパネル内で Avonni テキストブロックコンポーネントを見つけ、ページの希望する位置にドラッグします。

### **テキストエディタの設定**

* コンポーネントを配置すると、「テキストエディタ」設定エリアが表示されます。
* **テキストを入力：** 表示したいコンテンツの入力を始めます。テキストエディタセクション内のリッチテキストコンテンツエディタは、馴染みのあるワードプロセッシング機能を提供し、以下のようなツールを備えています：
  * **書式設定：** 太字、イタリック、下線
  * **見出しレベル：** さまざまなヘッダーサイズ（H1、H2、H3 等）から選択
  * **箇条書きおよび番号付きリスト**
  * **リンク：** ユーザーを他のページやリソースへ誘導するハイパーリンクを追加します。

## 外観のカスタマイズ

Avonni テキストブロックコンポーネントは、テキストコンテンツの視覚的な表示を個別に設定できる多くの外観設定を提供します。これらの設定によりサイトのデフォルトを上書きでき、強調やブランドの一貫性に合わせてコンポーネントの見た目を調整できます。

### **テキスト設定**

* **色：** コントラストと可読性を最適化するためにテキストの色を決定します。カラーピッカーで簡単に選択できます。
* **フォントサイズ：** テキストのサイズを制御します。通常ピクセル（px）やemで表現され、この設定はユーザーがテキストを読みやすいかどうかに直接影響します。
* **フォントスタイル：** イタリックやオブリークなどの変化をテキストに適用します（*注：すべてのフォントにイタリックやオブリークのバリアントがあるわけではありません*).
* **フォントファミリー：** ウェブセーフフォントの選択肢からフォントを選び、テキストの全体的な視覚的特徴を定義します。
* **フォントウェイト：** ライト、ノーマル、ボールドなど、あるいは数値によるフォントウェイトの値を使ってテキストの太さを調整します。

### **背景設定**

* **色：** テキストブロックの背後に表示する背景色を設定します。使いやすさのためにコントラストを考慮し、重要なコンテンツを強調するために戦略的に使用してください。

## **重要な考慮点**

* **上書き：** Avonni テキストブロックコンポーネント内のこれらの外観設定は、Experience Cloud サイト内で設定されたデフォルトスタイルより優先されることを覚えておいてください。
* **判読性：** カスタマイズ時は常に読みやすさを優先してください。良好なコントラストと適切なフォントサイズが重要です。
* **ブランドの整合性：** 外観の選択がサイト全体のブランドスキームに沿うよう努めてください