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