Loading
システム管理者に対するフィッシング耐性MFA・全従業員ユーザーMFAの適用のお知らせ 続きを読む
Experience Cloud
カスタムテーマレイアウトとテーマレイアウトコンポーネント

詳細情報:

  1. Salesforce ヘルプ
  2. ドキュメント
  3. Experience Cloud

カスタムテーマレイアウトとテーマレイアウトコンポーネント

テーマレイアウトとテーマレイアウトコンポーネントの組み合わせによって、サイトの各ページの外観と構造をより詳細に制御できます。会社のスタイルに合うようにレイアウトのヘッダーおよびフッターをカスタマイズします。テーマレイアウトプロパティを設定します。または、カスタム検索バーとユーザープロファイルメニューを使用します。その後テーマレイアウトを使用して、1 か所から、テーマレイアウトを個々のページに適用し、すばやくレイアウトを変更できます。コンサルティングパートナーであるか ISV であるか、または単に独自のサイトを改良するかに関わらず、カスタムテーマレイアウトで簡単にブランドを変更できます。

必要なエディション

使用可能なインターフェース: Salesforce Classic および Lightning Experience の両方
使用可能なエディション: Enterprise Edition、Performance Edition、Unlimited Edition、および Developer Edition
必要なユーザー権限
Experience Cloud サイトを作成する 「エクスペリエンスの作成および設定」および「設定・定義の参照」
Experience Cloud サイトをカスタマイズまたは公開する
  • 「エクスペリエンスの作成および設定」および「設定・定義を参照する」かつサイトのメンバーであること

    または

  • 「設定・定義を参照する」、「サイトのメンバーであること」、「適切なロールベースのサイトアクセス権限があること」

テーマレイアウトコンポーネントは、サイトのテンプレートページの最上位のテンプレート (1) です。テーマレイアウトコンポーネントは、テーマレイアウトを使用してページに整理および適用されます。テーマレイアウトコンポーネントには、共通のヘッダーとフッター (2) が含まれ、多くの場合、ナビゲーション、検索、およびユーザープロファイルメニューが含まれます。一方、コンテンツレイアウト (3) では、ページのコンテンツ範囲を定義します。2 列のコンテンツレイアウトを次に示します。

1 ～ 3 の番号が付けられた、テーマレイアウトとコンテンツレイアウトを含むテンプレートページ

テーマレイアウトは、テーマレイアウトコンポーネントを共有するサイトページごとに分類します。テーマレイアウトに、テーマレイアウトコンポーネントを割り当てることができます。ページのプロパティでテーマレイアウトを適用します。

メモ
メモ 開発者コンソールでカスタムテーマレイアウトコンポーネントを作成するには、forceCommunity:themeLayout インターフェースを実装します。事前作成済みのテーマはすべてこのインターフェース上で開発されており、エクスペリエンスビルダーではデザインプロパティインターフェース (カラーピッカー、画像ピッカー、スライダー) も使用します。また、事前作成済みのテーマではテーマの交換も利用します。元のページ、ページレイアウト、コンポーネントに影響を与えることなく、サイトの全体的なデザインをすばやく変更できます。
例
例

たとえば、近日予定されている春のキャンペーンのために 3 つのページを作成するとします。開発者が作成した [Large Header (大きなヘッダー)] テーマレイアウトコンポーネントを使用するようにしたいと考えています。[設定] | [テーマ] 領域で、これらのページを分類するために「Spring (春)」というカスタムテーマレイアウトを追加して、それに [Large Header (大きなヘッダー)] レイアウトコンポーネントを割り当てます。

[テーマ] 領域

次に、[Spring (春)] テーマレイアウトを各ページのプロパティで適用します。各ページに [Large Header (大きなヘッダー)] レイアウトがすぐに適用されます。

[ページ] の [プロパティ] 領域

テーマレイアウトを適用するには、[このページのデフォルトのテーマレイアウトを上書きします] (1) を選択します。この選択により、[テーマレイアウト] オプションが表示されます。次に、使用可能なオプションから新しいレイアウト (2) を選択します。

うまくいっているように見えましたが、マーケティングの統括責任者がヘッダーが場所を取りすぎると判断しました。テーマレイアウトを変更するために各ページのプロパティを更新する必要がないため、簡単に修正できます。[テーマ] パネルで 1 回クリックするだけで、[Spring (春)] を [Small Header (小さなヘッダー)] レイアウトコンポーネントに切り替えて、3 つのページすべてをすぐに更新できます。

[Spring (春)] カスタムテーマレイアウト種別
例
例

ここで、[Small Header (小さなヘッダー)] レイアウトに 2 つのカスタムプロパティ、[Blue Background (青い背景)] と [Small Logo (小さいロゴ)] が含まれているとします。これらのプロパティは有効になっていてすべてのキャンペーンページに適用されています。ただし、1 つのページには、小さいロゴプロパティのみを適用する必要があります。

この場合、「Spring B (春 B)」というテーマレイアウトを作成し、それに [Small Header (小さなヘッダー)] レイアウトコンポーネントを割り当て、小さいロゴを有効にすることができます。その後、[Spring B (春 B)] テーマをページに適用します。

[Spring (春)] カスタムテーマレイアウト種別

テーマレイアウトにどのページが関連付けられているか不明な場合は、どうしたらよいでしょう。

[割り当てられたページ] が表示されている、テーマの [設定] パネル

テーマレイアウトに関連付けられているページ数とページを 1 クリックで瞬時に把握できます。[設定] | [テーマ] から、テーマレイアウトの行に表示されている [割り当てられたページ] の合計数 (1) をクリックします。この値をクリックすると、そのテーマレイアウトに関連付けられているページのリスト (2) が開きます。

テーマレイアウトを使用すると、必要なだけ詳細な制御を維持しながら、同じテーマレイアウトコンポーネントを異なる方法で簡単に再利用することができます。

関連項目:

 
読み込み中
Salesforce Help | Article