レスポンシブ画像バリアントを使用した画像フィールドのレンダリング
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
画像をレスポンシブにするということは、ブラウザがページ上の画像のサイズと画面の解像度に基づいて、その画像の異なるサイズのバージョンをダウンロードしてレンダリングすることを意味します。画像に標準のレンダリング バリアントFieldを使用する代わりに、Responsive Imageフィールドを使用してスケーリングとサイズ変更の基準を追加できます。SXAでは、メディア アイテムへの汎用リンクを使用して、ページ上に画像をレンダリングすることもできます。 Responsive Image variantフィールドを使用すると、メディアアイテムのコンテンツを直接レンダリングできます。このフィールドでは、デフォルトのサイズだけでなく、画像の追加のサイズと幅も定義できます。
画像フィールドをレンダリングする
画像フィールドをレンダリングする
スケーリングとサイズ設定のためのResponsive Imageフィールドを追加するには:
-
バリアントを右クリックし、「 Insert」をクリックし、「 Responsive Image」をクリックします。
-
Variant Detailsセクションでは、画像のデフォルトサイズを定義できます。
Responsive Image variantフィールドでは、次の項目を指定できます。
-
Field name – 画像へのリンクを含むフィールドの名前。
-
Sizes – 画面の幅を定義し、その画面幅に最適な画像サイズを示します。たとえば、「 (max-width: 320px) 280px, (max-width: 480px) 440px, 800px 」と入力すると、<img sizes=""> 属性に次のようにレンダリングされます。
-
Widths – 幅をカンマで区切った整数のリストに入力します。例えば： 320, 480, 800.
-
Default size – 指定した場合、サイズは "src" パラメーターのパラメーターとして追加されます。空のままにすると、イメージは元のサイズでレンダリングされます。
Variant Detailsセクションに入力された値は、srcset属性に結合されます。次のスクリーンショットのVariant detailsセクションの値により、次のimgタグが生成されます。
リンクフィールドでの複数の画像のレンダリング
リンクフィールドでの複数の画像のレンダリング
Responsive Image variantフィールドを使用すると、ネストされたフィールドを操作できます。たとえば、商品が掲載されているページがあり、それらの商品にさまざまなサイズの画像の数が異なるとします。メディアアイテムにリンクできるフィールド、参照フィールド、およびResponsive Image variantフィールドを使用すると、複数の画像を同じサイズでレンダリングできます。
複数の画像のサイズを自動調整するには:
-
MultilistまたはMultiroot Treelistフィールドをページ テンプレートに追加します。
-
Sourceフィールドに、必要な画像を収集するためのクエリを入力します。たとえば、サイトのバーチャル メディア フォルダにリンクするようにquery:$siteMediaします。
-
レンダリング画像を使用するコンポーネントのレンダリングバリアントを作成します。バリアントを追加するレンダリングを右クリックし、Insert、Variant Definitionの順にクリックします。
-
名前を入力してOKをクリックします。
-
表示するフィールドを定義するには、レンダリング バリアントに子アイテムを追加します。バリアントを右クリックし、「 Insert」をクリックし、「 Reference」をクリックします。
-
Pass throughフィールドは、ネストされたアイテムのフィールドの名前を定義します。Variant Detailsセクションの「Pass through」フィールドに、ページテンプレートのMultilistまたはMultiroot Treelistフィールドに入力した名前を入力します。
-
手順5で作成した参照アイテムを右クリックし、Insertをクリックして、Responsive Imageをクリックします。
-
Variant Detailsセクションでは、画像のデフォルトサイズを定義できます。たとえば、Default sizeフィールドに「400」と入力すると、ページの画像はすべて既定のサイズが400になります。
