外観

概要

このページは、Experience Site向けのAvonniコンポーネントのスタイリングガイドです。ここでは、シームレスで視覚的に魅力的なユーザー体験を作成するために、サイトの見た目と雰囲気をカスタマイズする方法を紹介します。

学べること

• 個別カスタマイズ： 各Avonniコンポーネントの外観を微調整し、ブランドに合った独自のスタイルを実現します。

• テーマ統合： Avonniコンポーネントを既存のExperience Siteのテーマと調和させる方法を理解しつつ、必要に応じてスタイルを上書きする柔軟性を保つ方法を学びます。

• 効率化ツール： コピー/ペーストでスタイルプロパティを使用して、サイト全体の視覚的一貫性を素早く確立する方法を学びます。

• 高度なスタイリング： カスタムCSSの使用方法を学び、さらに多くのカスタマイズオプションや独自の効果を実現します。

重要性

よくスタイリングされたExperience Siteは、プロフェッショナルな印象を確立し、ユーザーのエンゲージメントを高め、ブランドアイデンティティを強化します。Avonniコンポーネントは、広範なコーディングを必要とせずに理想的な外観を実現するための柔軟性とツールを提供します

個別のスタイリング

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

テーマの一貫性

• 自動テーマ適用： Avonniコンポーネントはデフォルトでサイトのテーマ設定に適応します。

• カスタムスタイルで上書き： コンポーネントレベルで行った調整はデフォルトのテーマスタイルを上書きし、各コンポーネントに対して精密なデザイン制御を提供します。

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

• シームレスなテーマ統合： Avonniコンポーネントをデジタルエクスペリエンスプラットフォーム（DXP）のグローバルテーマ設定に簡単にリンクできます。

• 手動でのスタイル入力は不要： コンポーネントのスタイリング属性をDXPの事前定義されたテーマ値に直接接続することで、手動のスタイル入力の必要性を排除します。

スタイルプロパティのコピー/ペースト

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

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

使い方

1. ソースコンポーネントを見つける： 望ましい外観（色、フォントなど）を持つコンポーネントを見つけます。

2. スタイルをコピー： コンポーネントの「外観」設定で「スタイルプロパティをコピー」をクリックします。

3. ターゲットコンポーネントに適用： スタイルを適用したいコンポーネントに移動し、その「外観」設定で「スタイルプロパティを貼り付け」を選択します。

有用な理由

• 視覚的一貫性： サイトの統一された外観を簡単に維持できます。

• 時間の節約： 複数のコンポーネントにわたる繰り返しのスタイル調整を回避します。

• 効率的なデザイン： スタイリングがより速く簡単になるため、優れたコンテンツとレイアウトの構築に集中できます。

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

組み込みのスタイリングオプションを超えてAvonniコンポーネントの外観を調整したい場合は、次の方法を参照してください：

カスタムCSSを使う理由

• ユニークなブランディング： コンポーネントをウェブサイトのデザインやブランドガイドラインに正確に合わせます。

• 高度な効果： 標準設定では実現できない視覚要素（例：特殊なアニメーション、ホバー効果など）を実現します。

• 完全なコントロール： 制限なく望む正確な外観を得られます。

仕組み

1. CSSを作成： 目的の変更を定義するカスタムCSSスタイルを書きます。

2. サイトに追加： Experience Cloudの標準機能を使用して、このCSSをサイトのheadマークアップに含めます。

3. コンポーネントに適用： カスタムCSSクラスの名前をAvonniコンポーネントに追加します