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