> 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 コンポーネントのスタイル設定とブランド設定を行う方法を説明します。最新の LWR フレームワークを使用している場合でも、従来の Aura フレームワークを使用している場合でも、サイトのルック＆フィールを調整して、シームレスなユーザー体験を実現できます。

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

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

***

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

利用可能なスタイル設定ツールは大きく異なるため、Experience サイトでどのフレームワークが使用されているかを把握することが重要です:

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

{% hint style="warning" %}

#### 重要

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

***

## 個別のスタイル設定

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-eb244433b71a79a3612fd7afa0a9d411bf2a758f%2F2024-04-14_09-52-47.png?alt=media" alt="" width="375"><figcaption></figcaption></figure>

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

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

## テーマの一貫性

* **テーマの自動適用:** Avonni コンポーネントは、デフォルトでサイトのテーマ設定に自動的に適応します。
* **カスタムスタイルで上書き:** コンポーネントレベルで行った調整はデフォルトのテーマスタイルを上書きし、各コンポーネントに対して正確なデザイン制御を提供します。

***

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

* **シームレスなテーマ統合:** Avonni コンポーネントを Digital Experience Platform（DXP）のグローバルテーマ設定に簡単に連携できます。
* **手動でのスタイル入力は不要:** コンポーネントのスタイル属性を DXP の定義済みテーマ値に直接接続できるため、手動でのスタイル入力は不要です。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-595116515cfe70c21e130a47eeffd11548cc672f%2F2023-10-24_14-25-56.png?alt=media" alt="" width="156"><figcaption></figcaption></figure>

***

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

この機能により、Experience サイトのまとまりのある視覚スタイルを簡単に作成できます。

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

### **使い方**

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

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

* **視覚的一貫性:** サイト全体で統一された見た目を簡単に維持できます。
* **時間の節約:** 複数のコンポーネントにわたる繰り返しのスタイル調整を避けられます。
* **洗練されたデザイン:** 優れたコンテンツやレイアウトの作成に集中でき、スタイル設定はより速く簡単になります。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-2fa6e933f0d16bbd8bb2d60bbe859828b3cbcfd4%2FMay%203%2011-06-11.gif?alt=media" alt=""><figcaption></figcaption></figure>

***

## カスタム CSS によるスタイル設定

組み込みのスタイル設定オプションを超えて Avonni コンポーネントの見た目を調整したいですか？方法は次のとおりです:

### **カスタム CSS を使用する理由**

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

### **仕組み**

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fgit-blob-cdff9e0232aa1ab9bffa090ed569aa37f7ce2b25%2F2023-10-24_14-27-15.png?alt=media" alt="" width="174"><figcaption></figcaption></figure>

{% hint style="warning" %}

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

&#x20; **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.