外観
概要
このガイドでは、Salesforce Experience Cloud 内で Avonni Components のスタイル設定とブランド表現を行う方法を説明します。最新の LWR フレームワークを使用している場合でも、従来の Aura フレームワークを使用している場合でも、サイトの外観と操作感を調整してシームレスなユーザー体験を作成できます。
学べること
フレームワークの互換性：LWR と Aura で利用できるスタイル設定の違いを理解します。
コンポーネント単位のカスタマイズ：ブランドに合わせて個々のコンポーネントを細かく調整します。
テーマの統合：コンポーネントがグローバルサイトスタイルを継承する仕組みを学びます。
効率化ツール：一貫性を保つために「スタイルプロパティをコピー/貼り付け」を使用します。
高度なスタイリング：細かな制御のためにカスタム CSS を使用します
フレームワークの詳細：LWR と Aura
Experience サイトでどのフレームワークが使用されているかを特定することは重要です。利用できるスタイリングツールが大きく異なるためです：
スタイルと表示タブ
利用可能です。細かな余白とレイアウトは Salesforce により直接管理されます。
利用できません。
Avonni 外観タブ
詳細なコンポーネントスタイリングに使用できます。
コンポーネントのスタイリングに使用できます。
グローバルテーマのバインド
DXP のブランディングセットを完全にサポートします。
標準のテーマ継承のみに対応します。
重要
スタイルと表示タブは、プラットフォームによって直接管理される Salesforce のネイティブ機能です。これは、次のもので構築された LWR フレームワーク。もしあなたが Aura サイトを使用している場合は、主に Avonni 専用の外観設定とサイトのグローバル CSS を使用します
個別のスタイリング
各 Avonni Component には専用の外観セクションがあり、そこでスタイルを調整できます。これらの設定により、コンポーネントの外観と操作感を自由にカスタマイズできます。
Experience Site 内の Avonni Components は、サイトのテーマから既定のスタイル設定を自動的に適用するよう設計されています。
ただし、コンポーネントレベルでスタイル調整を行うと、これらの変更はサイトのテーマで設定された対応する既定スタイルを上書きします。この機能により、各コンポーネントをより正確かつ個別にデザイン調整できます。
テーマの一貫性
テーマの自動適用： Avonni Components は、既定でサイトのテーマ設定を自動的に適用します。
カスタムスタイルで上書き： コンポーネントレベルで行った調整は既定のテーマスタイルを上書きし、各コンポーネントを精密にデザイン制御できます。
グローバルテーマ設定との統合
シームレスなテーマ統合： Avonni Components を Digital Experience Platform（DXP）のグローバルテーマ設定に簡単に連携できます。
手動のスタイル入力は不要： コンポーネントのスタイル属性を DXP のあらかじめ定義されたテーマ値に直接接続できるため、手動でスタイルを入力する必要がありません。
スタイルプロパティのコピー/貼り付け
この機能により、Experience Site 全体で一貫したビジュアルスタイルを簡単に作成できます。
仕組みと利点は次のとおりです：
使い方
元となるコンポーネントを見つける： 希望する外観と操作感（色、フォントなど）を持つコンポーネントを見つけます。
スタイルをコピー： コンポーネントの外観設定で「スタイルプロパティをコピー」をクリックします。
対象コンポーネントに適用： スタイルを適用したいコンポーネントを選択し、その外観設定で「スタイルプロパティを貼り付け」を選択します。
便利な理由
視覚的一貫性： サイト全体で統一感のある見た目を簡単に維持できます。
時間を節約： 複数のコンポーネントに対して同じスタイル調整を繰り返す必要がありません。
効率的なデザイン： 優れたコンテンツやレイアウトの作成に集中でき、スタイリングはより速く簡単になります。
カスタム CSS によるスタイリング
組み込みのスタイル設定を超えて Avonni Components の見た目を調整したいですか？方法は次のとおりです：
カスタム CSS を使う理由
独自のブランディング： コンポーネントを Web サイトのデザインやブランドガイドラインに正確に合わせられます。
高度な効果： 標準設定では実現できない視覚要素を実現できます（例：特別なアニメーション、ホバー効果など）。
完全な制御： 制限なく、思いどおりの見た目を実現できます。
仕組み
CSS を作成： カスタム CSS スタイルを記述し、希望する変更を定義します。
サイトに追加： Experience Cloud の標準機能を使用して、この CSS をサイトの head マークアップに含めます。
コンポーネントに適用： Avonni Components にカスタム CSS クラス名を追加します
最終更新
役に立ちましたか？