Contentのビジュアルプレゼンテーション

Content モジュールのビジュアルプレゼンテーション

デフォルトテンプレート

Contentモジュールのプレゼンテーションは事前定義済みまたはデフォルトのテンプレートを使うことで、簡単に設定することができます。

• 全てのテンプレートがレスポンシブデザインに対応しています。

• 必要に応じた動的な画像の処理（小さな端末上でのみサムネイルをロードする）

• 必要に応じたネイティブな Retina端末用の画像サポート（より大きな画像を含むレイアウトではより高解像度の画像を組み込むために、最新のHTML技術を使っています）

• 技術者では無いユーザー向けに簡易ですぐにモジュールのアイテムをチューニングするオプション（ブランドカラー、フォント、書式設定のために、簡易なCSS変数を使用してベースとなるテンプレートをすぐに調整できます）

• 指定されたカラム数のサポート

• 簡略化された画像の使用（テンプレートからJavaScriptベースの画像リサイズヘルパータグを削除しましたが、必要であればコードヒントとして引き続き表示されます）

• 全ての画像のスケーリング/サイズ処理の強化

• CSSクラスがスコープされているので、サイト内の他の部分に影響は与えません

• さらに最適化されたテンプレート（テンプレートのファイルサイズを削減したので、サイトやアプリに追加されるHTMLコードが削減されたことになります）

テンプレート オプション:

(以下アイコンの左から右の順)

	サンプル	説明
Image Above, Text Below		画像とテキストを使用した、コンテンツの発見を促進するためのレコメンドで、よく使われるコンテンツのレイアウトです。このタイル形式のレイアウトに必要なアイテムと列数を選択します。各アイテムはデスクトップとタブレット端末では列の定義に対応するために拡大/縮小し、モバイル端末では1列に対応します。アイテムの最大サイズや画像の高さをすぐに修正するためには上でご案内したプレゼンテーション管理の画面から Style 内にあるCSS変数を使用します。
Image on Left		右レールや左レール、または水平方向のスペースが限られた場所に適しています。モバイル端末ではこのユニットが全ての画面幅を埋めることになり、ユーザ端末の幅に対応します。
Image on Right		'Image on left' テンプレートの代替案に該当するもので、左にテキスト、右に画像が好ましいサイト向けに位置を入れ替えています。
Text Only		名前にある通り、このテンプレートを使用すると画像が含まれません。ページ内で既にたくさんの画像が使用されている場合に使用すると効果的です。
Hero		最初の2つのアイテムを強調し、他のアイテムが残りのスペースを埋め、必要に応じて複数の行に折り返す、視覚的に魅力的なレイアウトです。アイテムの高さと幅はCSS変数を使ってすぐに設定できます。
Section Front		サイトセクションまたはトピック/テーマからハイライトを表示するのに適しています。'Section Front' は最初のアイテムのみ画像があることでビジュアルが強調され、残りのアイテムはテキストのみになります。レイアウトはモバイル端末の幅に準拠し、あらゆる端末サイズに適合します。

テンプレートのカスタマイズ

Contentモジュールのビジュアルをカスタマイズするには該当するモジュールを開いた状態で、右上にある以下のアイコンを選択します。

プレゼンテーション ビュー

"プレゼンテーション" はコンテンツモジュールのビジュアルをプレビューすることができ、モジュールを作成する際のステップ "アイテム数とフォーマット" で選択したテーマとアイテム数で表示されます。

ビジュアルプレゼンテーションの調整

"プレゼンテーションと表示" のプレビュー画面の下部にあるボタンではモジュールのビジュアルプレゼンテーションをレビューする、編集する機能があります。モジュールのHTMLテンプレート、CSSスタイル、カスタムJSはこちらで編集、追加できます。

パーソナライズドコンテンツのレスポンスフィールド

モジュールのビジュアルプレゼンテーションにフォームフィールドを追加したい場合、それらをHTMLテンプレートに直接追加できます。

"設定" >> "パーソナライズド コンテンツ" タブに移動すると、Content のレスポンスフィールドのオン/オフを切り替えることができます。

フィールド:

'フィールド' の列の項目を選択/切り替えすると、レスポンスのペイロードにその項目が追加されます。ただし、そのフィールドでその項目が使用可能な場合にのみ、返されます。例えば、ある記事は 'xyz-category' がない場合、そのアイテムに対するレスポンスに 'xyz-category' は含まれません。

必須:

存在すべきレスポンスのフィールドは 'Required' 列の項目を使って設定できます。ここで選択した項目によって、どのキュレートされたアイテムを返すのかが決まります。例えば、 'createtime' の Required フィールドをオンにすると、このフィールドを持たないアイテムは返されません。

Last updated: December 23, 2021