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

エクスペリエンスビルダーのカスタムコンテンツレイアウトコンポーネントの作成

エクスペリエンスビルダーには、比率 2:1 の 2 列レイアウトなど、ページのコンテンツ領域を定義するレイアウトがいくつか用意され、すぐに使用できます。ただし、サイト用にカスタマイズされたレイアウトが必要な場合は、カスタムコンテンツレイアウトコンポーネントを作成し、それをエクスペリエンスビルダーで新規ページを作成するときに使用します。サイトテンプレートに付属するデフォルトページのコンテンツレイアウトを更新することもできます。

開発者コンソールでカスタムコンテンツレイアウトコンポーネントを作成すると、そのコンポーネントはエクスペリエンスビルダーの [新規ページ] および [レイアウトを変更] ダイアログボックスに表示されます。 [コンテンツレイアウトの変更] ポップアップウィンドウ

1.新規インターフェースをコンテンツレイアウトコンポーネントに追加する

エクスペリエンスビルダーの [新規ページ] および [レイアウトを変更] ダイアログボックスに表示するには、コンテンツレイアウトコンポーネントに forceCommunity:layout インターフェースを実装する必要があります。

シンプルな 2 列のコンテンツレイアウトのサンプルコードを次に示します。

1<aura:component implements="forceCommunity:layout" description=”Custom Content Layout” access="global">
2    <aura:attribute name="column1" type="Aura.Component[]" required="false"></aura:attribute>
3    <aura:attribute name="column2" type="Aura.Component[]" required="false"></aura:attribute>
4
5    <div class="container">
6        <div class="contentPanel">
7            <div class="left">
8                {!v.column1}
9            </div>
10            <div class="right">
11                {!v.column2}
12            </div>
13        </div>
14    </div>
15</aura:component>

コンポーネントなどのリソースを access="global" としてマークし、リソースを自分の組織外で使用できるようにします。たとえば、インストール済みパッケージで、または他の組織の Lightning アプリケーションビルダーユーザまたはエクスペリエンスビルダーユーザが、コンポーネントを使用できるようにする場合などです。

また、access="global" とマークされているコンポーネント、イベント、インターフェースのドキュメントを作成できます。このドキュメントは、パッケージを使用またはインストールする組織のコンポーネントライブラリに自動的に表示されます。

メモ

2.CSS リソースをコンポーネントバンドルに追加する

次に、必要に応じて CSS リソースを追加してコンテンツレイアウトのスタイルを設定します。

シンプルな 2 列のコンテンツレイアウトのサンプル CSS を次に示します。

1.THIS .contentPanel:before,
2.THIS .contentPanel:after {
3    content: " ";
4    display: table;
5}
6.THIS .contentPanel:after {
7    clear: both;
8}
9.THIS .left {
10    float: left;
11    width: 50%;
12}
13.THIS .right {
14    float: right;
15    width: 50%;
16}

CSS リソースの名前は componentName.css にする必要があります。

3.省略可能: SVG リソースをコンポーネントバンドルに追加する

SVG リソースをコンポーネントバンドルに追加して、エクスペリエンスビルダーに表示されるときのコンテンツレイアウトコンポーネントのカスタムアイコンを定義できます。

エクスペリエンスビルダーのコンテンツレイアウトコンポーネントで推奨される画像サイズは、170 x 170 ピクセルです。ただし、画像のサイズが異なる場合、エクスペリエンスビルダーが適合するように画像を拡大縮小します。

SVG リソースの名前は componentName.svg にする必要があります。

Experience Cloud 開発者ガイド

エクスペリエンスビルダーのカスタムコンテンツレイアウトコンポーネントの作成

1.新規インターフェースをコンテンツレイアウトコンポーネントに追加する

2.CSS リソースをコンポーネントバンドルに追加する

3.省略可能: SVG リソースをコンポーネントバンドルに追加する

関連項目: