Experience Cloud 開発者ガイド
jエクスペリエンスビルダーのカスタムコンテンツレイアウトコンポーネントの作成
エクスペリエンスビルダーには、比率 2:1 の 2 列レイアウトなど、ページのコンテンツ領域を定義するレイアウトがいくつか用意され、すぐに使用できます。ただし、サイト用にカスタマイズされたレイアウトが必要な場合は、カスタムコンテンツレイアウトコンポーネントを作成し、それをエクスペリエンスビルダーで新規ページを作成するときに使用します。サイトテンプレートに付属するデフォルトページのコンテンツレイアウトを更新することもできます。
開発者コンソールでカスタムコンテンツレイアウトコンポーネントを作成すると、そのコンポーネントはエクスペリエンスビルダーの [新規ページ] および [レイアウトを変更] ダイアログボックスに表示されます。
![[コンテンツレイアウトの変更] ポップアップウィンドウ](https://developer.salesforce.com/docs/resources/img/ja-jp/248.0?doc_id=images%2Fcommunity_builder_layout.png&folder=communities_dev)
1.新規インターフェースをコンテンツレイアウトコンポーネントに追加する
エクスペリエンスビルダーの [新規ページ] および [レイアウトを変更] ダイアログボックスに表示するには、コンテンツレイアウトコンポーネントに forceCommunity:layout インターフェースを実装する必要があります。
シンプルな 2 列のコンテンツレイアウトのサンプルコードを次に示します。
2.CSS リソースをコンポーネントバンドルに追加する
次に、必要に応じて CSS リソースを追加してコンテンツレイアウトのスタイルを設定します。
シンプルな 2 列のコンテンツレイアウトのサンプル CSS を次に示します。
CSS リソースの名前は componentName.css にする必要があります。
3.省略可能: SVG リソースをコンポーネントバンドルに追加する
SVG リソースをコンポーネントバンドルに追加して、エクスペリエンスビルダーに表示されるときのコンテンツレイアウトコンポーネントのカスタムアイコンを定義できます。
エクスペリエンスビルダーのコンテンツレイアウトコンポーネントで推奨される画像サイズは、170 x 170 ピクセルです。ただし、画像のサイズが異なる場合、エクスペリエンスビルダーが適合するように画像を拡大縮小します。
SVG リソースの名前は componentName.svg にする必要があります。