この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

カスタムテーマレイアウトのしくみ

テーマレイアウトの仕組みを理解するため、エクスペリエンスビルダーの視点から物事を見てみましょう。エクスペリエンスビルダーでは、テーマレイアウトとテーマレイアウトコンポーネントを組み合わせることで、コミュニティの各ページの外観と構造をより詳細に制御できます。会社のブランドとスタイルに合わせてレイアウトのヘッダーとフッターをカスタマイズし、テーマプロパティを設定するか、カスタム検索バーとユーザプロファイルメニューを使用できます。その後テーマレイアウトを使用して、1 か所から、テーマレイアウトコンポーネントを個々のページに適用したり、すばやくレイアウトを変更したりすることができます。

テーマレイアウトは、コミュニティ内で同じテーマレイアウトコンポーネントを共有するページを分類します。既存のテーマレイアウトに、テーマレイアウトコンポーネントを割り当てることができます。その後、ページのプロパティでテーマレイアウト (つまりテーマレイアウトコンポーネント) を適用します。

カスタマーサービスには次のテーマレイアウトとコンポーネントが含まれていますが、必要に応じてカスタムコンポーネントを作成したり、レイアウトを切り替えたりすることができます。

[ログイン] では、テーマレイアウトコンポーネント、[ログインのボティレイアウト] テーマレイアウトが [ログイン] ページに適用されます。
ログイン関連以外のすべてのページには、デフォルトが適用されます。

例

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

次に、[Spring (春)] テーマレイアウトを各ページのプロパティで適用します。各ページに [Large Header (大きなヘッダー)] レイアウトがすぐに適用されます。[このページのデフォルトのテーマレイアウトを上書きします。](1) を選択してテーマレイアウトを表示します。使用可能なオプションから新しいレイアウト (2) を選択します。 [ページ] の [プロパティ] 領域

例

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

例

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

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

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

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

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

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

Lightning コミュニティ開発者ガイド

カスタムテーマレイアウトのしくみ

例

例

例

関連項目: