> 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/puropatipaneru/appearance.md).

# 外観

## 概要

このガイドでは、Salesforce Experience Cloud 内で Avonni Components のスタイル設定とブランド表現を行う方法を説明します。最新の LWR フレームワークを使用している場合でも、従来の Aura フレームワークを使用している場合でも、サイトの外観と操作感を調整してシームレスなユーザー体験を作成できます。

### **学べること**

* **フレームワークの互換性**：LWR と Aura で利用できるスタイル設定の違いを理解します。
* **コンポーネント単位のカスタマイズ**：ブランドに合わせて個々のコンポーネントを細かく調整します。
* **テーマの統合**：コンポーネントがグローバルサイトスタイルを継承する仕組みを学びます。
* **効率化ツール**：一貫性を保つために「スタイルプロパティをコピー/貼り付け」を使用します。
* **高度なスタイリング**：細かな制御のためにカスタム CSS を使用します

***

## フレームワークの詳細：LWR と Aura

Experience サイトでどのフレームワークが使用されているかを特定することは重要です。利用できるスタイリングツールが大きく異なるためです：

| 機能                | LWR フレームワーク                                 | Aura フレームワーク           |
| ----------------- | ------------------------------------------- | ---------------------- |
| **スタイルと表示タブ**     | 利用可能です。細かな余白とレイアウトは Salesforce により直接管理されます。 | 利用できません。               |
| **Avonni 外観タブ**   | 詳細なコンポーネントスタイリングに使用できます。                    | コンポーネントのスタイリングに使用できます。 |
| **グローバルテーマのバインド** | DXP のブランディングセットを完全にサポートします。                 | 標準のテーマ継承のみに対応します。      |

{% hint style="warning" %}

#### 重要

スタイルと表示タブは、プラットフォームによって直接管理される Salesforce のネイティブ機能です。これは、次のもので構築された **LWR フレームワーク**。もしあなたが **Aura** サイトを使用している場合は、主に Avonni 専用の外観設定とサイトのグローバル CSS を使用します
{% endhint %}

***

## 個別のスタイリング

各 Avonni Component には専用の外観セクションがあり、そこでスタイルを調整できます。これらの設定により、コンポーネントの外観と操作感を自由にカスタマイズできます。

<figure><img src="/files/b827487e9a46fb29aecc865f3c7ad81234b896ea" alt="" width="375"><figcaption></figcaption></figure>

{% hint style="warning" %}
Experience Site 内の Avonni Components は、サイトのテーマから既定のスタイル設定を自動的に適用するよう設計されています。

ただし、コンポーネントレベルでスタイル調整を行うと、これらの変更はサイトのテーマで設定された対応する既定スタイルを上書きします。この機能により、各コンポーネントをより正確かつ個別にデザイン調整できます。
{% endhint %}

## テーマの一貫性

* **テーマの自動適用：** Avonni Components は、既定でサイトのテーマ設定を自動的に適用します。
* **カスタムスタイルで上書き：** コンポーネントレベルで行った調整は既定のテーマスタイルを上書きし、各コンポーネントを精密にデザイン制御できます。

***

## グローバルテーマ設定との統合

* **シームレスなテーマ統合：** Avonni Components を Digital Experience Platform（DXP）のグローバルテーマ設定に簡単に連携できます。
* **手動のスタイル入力は不要：** コンポーネントのスタイル属性を DXP のあらかじめ定義されたテーマ値に直接接続できるため、手動でスタイルを入力する必要がありません。

<figure><img src="/files/0e639d4eaa2a4030a68f2c6c129cae8af518c320" alt="" width="156"><figcaption></figcaption></figure>

***

## スタイルプロパティのコピー/貼り付け

この機能により、Experience Site 全体で一貫したビジュアルスタイルを簡単に作成できます。

仕組みと利点は次のとおりです：

### **使い方**

1. **元となるコンポーネントを見つける：** 希望する外観と操作感（色、フォントなど）を持つコンポーネントを見つけます。
2. **スタイルをコピー：** コンポーネントの外観設定で「スタイルプロパティをコピー」をクリックします。
3. **対象コンポーネントに適用：** スタイルを適用したいコンポーネントを選択し、その外観設定で「スタイルプロパティを貼り付け」を選択します。

### **便利な理由**

* **視覚的一貫性：** サイト全体で統一感のある見た目を簡単に維持できます。
* **時間を節約：** 複数のコンポーネントに対して同じスタイル調整を繰り返す必要がありません。
* **効率的なデザイン：** 優れたコンテンツやレイアウトの作成に集中でき、スタイリングはより速く簡単になります。

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

***

## カスタム CSS によるスタイリング

組み込みのスタイル設定を超えて Avonni Components の見た目を調整したいですか？方法は次のとおりです：

### **カスタム CSS を使う理由**

* **独自のブランディング：** コンポーネントを Web サイトのデザインやブランドガイドラインに正確に合わせられます。
* **高度な効果：** 標準設定では実現できない視覚要素を実現できます（例：特別なアニメーション、ホバー効果など）。
* **完全な制御：** 制限なく、思いどおりの見た目を実現できます。

### **仕組み**

1. **CSS を作成：** カスタム CSS スタイルを記述し、希望する変更を定義します。
2. **サイトに追加：** Experience Cloud の標準機能を使用して、この CSS をサイトの head マークアップに含めます。
3. **コンポーネントに適用：** Avonni Components にカスタム CSS クラス名を追加します

<figure><img src="/files/5854297f9ff23464067f6ef21aee75e9ba90dc81" alt="" width="174"><figcaption></figcaption></figure>

{% hint style="warning" %}

#### フレームワークに関する注意

では **LWR**では、余白（マージン/パディング）には「スタイル」タブを使用できることが多いですが、 **Aura**これらはカスタム CSS クラスまたはコンポーネントの内部スペーシング設定で対応する必要があります。
{% endhint %}


---

# 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/puropatipaneru/appearance.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.