カスタムテーマレイアウトとテーマレイアウトコンポーネント
テーマレイアウトとテーマレイアウトコンポーネントの組み合わせによって、サイトの各ページの外観と構造をより詳細に制御できます。会社のスタイルに合うようにレイアウトのヘッダーおよびフッターをカスタマイズします。テーマレイアウトプロパティを設定します。または、カスタム検索バーとユーザープロファイルメニューを使用します。その後テーマレイアウトを使用して、1 か所から、テーマレイアウトを個々のページに適用し、すばやくレイアウトを変更できます。コンサルティングパートナーであるか ISV であるか、または単に独自のサイトを改良するかに関わらず、カスタムテーマレイアウトで簡単にブランドを変更できます。
必要なエディション
| 使用可能なインターフェース: Salesforce Classic および Lightning Experience の両方 |
| 使用可能なエディション: Enterprise Edition、Performance Edition、Unlimited Edition、および Developer Edition |
| 必要なユーザー権限 | |
|---|---|
| Experience Cloud サイトを作成する | 「エクスペリエンスの作成および設定」および「設定・定義の参照」 |
| Experience Cloud サイトをカスタマイズまたは公開する |
|
テーマレイアウトコンポーネントは、サイトのテンプレートページの最上位のテンプレート (1) です。テーマレイアウトコンポーネントは、テーマレイアウトを使用してページに整理および適用されます。テーマレイアウトコンポーネントには、共通のヘッダーとフッター (2) が含まれ、多くの場合、ナビゲーション、検索、およびユーザープロファイルメニューが含まれます。一方、コンテンツレイアウト (3) では、ページのコンテンツ範囲を定義します。2 列のコンテンツレイアウトを次に示します。
テーマレイアウトは、テーマレイアウトコンポーネントを共有するサイトページごとに分類します。テーマレイアウトに、テーマレイアウトコンポーネントを割り当てることができます。ページのプロパティでテーマレイアウトを適用します。
forceCommunity:themeLayout インターフェースを実装します。事前作成済みのテーマはすべてこのインターフェース上で開発されており、エクスペリエンスビルダーではデザインプロパティインターフェース (カラーピッカー、画像ピッカー、スライダー) も使用します。また、事前作成済みのテーマではテーマの交換も利用します。元のページ、ページレイアウト、コンポーネントに影響を与えることなく、サイトの全体的なデザインをすばやく変更できます。
たとえば、近日予定されている春のキャンペーンのために 3 つのページを作成するとします。開発者が作成した [Large Header (大きなヘッダー)] テーマレイアウトコンポーネントを使用するようにしたいと考えています。[設定] | [テーマ] 領域で、これらのページを分類するために「Spring (春)」というカスタムテーマレイアウトを追加して、それに [Large Header (大きなヘッダー)] レイアウトコンポーネントを割り当てます。
![[テーマ] 領域](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-262-0-0-production-jajp/7ab92747-9d79-4460-91ff-a8b4ec1ff118/communities/images/community_builder_theme1.png)
次に、[Spring (春)] テーマレイアウトを各ページのプロパティで適用します。各ページに [Large Header (大きなヘッダー)] レイアウトがすぐに適用されます。
![[ページ] の [プロパティ] 領域](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-262-0-0-production-jajp/7ab92747-9d79-4460-91ff-a8b4ec1ff118/communities/images/community_builder_theme5.png)
テーマレイアウトを適用するには、[このページのデフォルトのテーマレイアウトを上書きします] (1) を選択します。この選択により、[テーマレイアウト] オプションが表示されます。次に、使用可能なオプションから新しいレイアウト (2) を選択します。
うまくいっているように見えましたが、マーケティングの統括責任者がヘッダーが場所を取りすぎると判断しました。テーマレイアウトを変更するために各ページのプロパティを更新する必要がないため、簡単に修正できます。[テーマ] パネルで 1 回クリックするだけで、[Spring (春)] を [Small Header (小さなヘッダー)] レイアウトコンポーネントに切り替えて、3 つのページすべてをすぐに更新できます。
![[Spring (春)] カスタムテーマレイアウト種別](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-262-0-0-production-jajp/7ab92747-9d79-4460-91ff-a8b4ec1ff118/communities/images/community_builder_theme3.png)
ここで、[Small Header (小さなヘッダー)] レイアウトに 2 つのカスタムプロパティ、[Blue Background (青い背景)] と [Small Logo (小さいロゴ)] が含まれているとします。これらのプロパティは有効になっていてすべてのキャンペーンページに適用されています。ただし、1 つのページには、小さいロゴプロパティのみを適用する必要があります。
この場合、「Spring B (春 B)」というテーマレイアウトを作成し、それに [Small Header (小さなヘッダー)] レイアウトコンポーネントを割り当て、小さいロゴを有効にすることができます。その後、[Spring B (春 B)] テーマをページに適用します。
![[Spring (春)] カスタムテーマレイアウト種別](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-262-0-0-production-jajp/7ab92747-9d79-4460-91ff-a8b4ec1ff118/communities/images/community_builder_theme4.png)
テーマレイアウトにどのページが関連付けられているか不明な場合は、どうしたらよいでしょう。
![[割り当てられたページ] が表示されている、テーマの [設定] パネル](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-262-0-0-production-jajp/7ab92747-9d79-4460-91ff-a8b4ec1ff118/communities/images/community_builder_theme_settings.png)
テーマレイアウトに関連付けられているページ数とページを 1 クリックで瞬時に把握できます。[設定] | [テーマ] から、テーマレイアウトの行に表示されている [割り当てられたページ] の合計数 (1) をクリックします。この値をクリックすると、そのテーマレイアウトに関連付けられているページのリスト (2) が開きます。
テーマレイアウトを使用すると、必要なだけ詳細な制御を維持しながら、同じテーマレイアウトコンポーネントを異なる方法で簡単に再利用することができます。
関連項目:
- Experience Cloud サイトのページのテーマレイアウトの変更
- Experience Cloud 開発者ガイド: エクスペリエンスビルダーのカスタムテーマレイアウトコンポーネントの作成
- Experience Cloud 開発者ガイド: スワップ可能な検索およびプロファイルメニューコンポーネントの設定
- 開発者ガイド: Build a Condensed Theme Layout Component (集約されたテーマレイアウトコンポーネントの作成)
- Trailhead: Create a Custom Theme Layout Component (カスタムテーマレイアウトコンポーネントの作成)
