#  外観

## 概要

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

### **学習内容**

* **フレームワークの互換性**：LWR と Aura で利用可能なスタイリングオプションの違いを区別します。
* **コンポーネントレベルのカスタマイズ**：ブランドに合わせて個々のコンポーネントを微調整します。
* **テーマ統合**：コンポーネントがグローバルなサイトスタイルをどのように継承するかを学びます。
* **効率化ツール**：一貫性を保つために「スタイルプロパティのコピー/貼り付け」を使用します。
* **高度なスタイリング**：詳細な制御のためにカスタム CSS を使用します

***

## フレームワーク固有の違い：LWR と Aura

Experience Site がどのフレームワークを使用しているかを特定することが重要です。利用可能なスタイリングツールは大きく異なります：

| 機能                        | LWR フレームワーク                                | Aura フレームワーク             |
| ------------------------- | ------------------------------------------ | ------------------------ |
| **Style & Visibility タブ** | 利用可能。グラニュラーな間隔やレイアウトを Salesforce が直接管理します。 | 利用不可。                    |
| **Avonni Appearance タブ**  | 深いコンポーネントスタイリングのために利用可能です。                 | コンポーネントスタイリングのために利用可能です。 |
| **グローバルテーマのバインディング**      | DXP ブランディングセットを完全にサポートします。                 | 標準テーマの継承に限定されます。         |

{% hint style="warning" %}

#### 重要

Style and Visibility タブはプラットフォームによって直接管理される Salesforce のネイティブ機能です。これは **LWR フレームワーク**で構築されたサイトでのみ利用可能です。 **Aura** サイトを使用している場合、主に Avonni 固有の Appearance 設定とサイトのグローバル CSS を使用することになります
{% endhint %}

***

## 個別のスタイリング

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

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fsj6SXXtH3ED3tLhmd7vW%2F2024-04-14_09-52-47.png?alt=media&#x26;token=663c39e9-01e4-4e0b-94c5-2a58296eb147" alt="" width="375"><figcaption></figcaption></figure>

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

ただし、コンポーネントレベルでスタイルを調整した場合、これらの変更はサイトのテーマで設定された対応するデフォルトスタイルを明確に上書きします。この機能により、各コンポーネントに対してより正確で個別化されたデザインカスタマイズが可能になります。&#x20;
{% endhint %}

## テーマの一貫性

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

***

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

* **シームレスなテーマ統合：** Avonni コンポーネントをデジタルエクスペリエンスプラットフォーム（DXP）のグローバルテーマ設定に容易にリンクします。
* **手動でのスタイル入力は不要：** コンポーネントのスタイリング属性を DXP の事前定義されたテーマ値に直接接続し、手動のスタイル入力を不要にします。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FZRgUVwgJixDJwEAB0To0%2F2023-10-24_14-25-56.png?alt=media&#x26;token=abe9f0c7-6ba6-4780-9aea-5ce772e3fcda" alt="" width="156"><figcaption></figcaption></figure>

***

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

この機能は、Experience Sites の統一されたビジュアルスタイルの作成を簡素化します。&#x20;

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

### **使用方法**

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

### **役立つ理由**

* **視覚的一貫性：** サイトの統一された外観を容易に維持します。
* **時間の節約：** 複数のコンポーネントにわたる繰り返しのスタイル調整を避けられます。
* **合理化されたデザイン：** スタイリングをより速く簡単にし、優れたコンテンツとレイアウトの構築に集中できます。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F3XZBGjaCNsSo6n2qLkTP%2FMay%203%2011-06-11.gif?alt=media&#x26;token=cb74e278-d3b2-4fad-b927-c03b483a227c" alt=""><figcaption></figcaption></figure>

***

## カスタム CSS スタイリング

組み込みのスタイリングオプションを超えて Avonni コンポーネントの外観を調整したいですか？方法は次のとおりです：

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

* **ユニークなブランディング：** コンポーネントを正確にウェブサイトのデザインやブランドガイドラインに合わせます。
* **高度なエフェクト：** 標準設定では実現できない視覚要素（例：特殊なアニメーション、ホバーエフェクトなど）を実現します。
* **完全な制御：** 制限なしに望む正確な外観を得られます。

### **仕組み**

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%2Fg5yP6eXs4ehhEVjwU0CH%2F2023-10-24_14-27-15.png?alt=media&#x26;token=cc574a34-35ea-46fc-a0f3-b61976aac9cf" alt="" width="174"><figcaption></figcaption></figure>

{% hint style="warning" %}

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

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