---
title: "レスポンシブ画像バリアントを使って画像フィールドをレンダリングする"
slug: "render-image-fields-using-the-responsive-image-variant"
abstract: "画像をレスポンシブにしましょう。"
---
# レスポンシブ画像バリアントを使って画像フィールドをレンダリングする

画像をレスポンシブにするということは、ブラウザがページ上の画像のサイズや画面解像度に応じて異なるサイズの画像をダウンロード・表示することを意味します。標準のレンダリングバリアントフィールドを使う代わりに、**レスポンシブ画像**フィールドを使ってスケーリングやサイズの条件を追加できます。SXAでは、メディアアイテムへの汎用リンクを使ってページ上の画像をレンダリングすることもできます。**レスポンシブイメージバリアント**フィールドでは、メディアアイテムから直接コンテンツをレンダリングできます。このフィールドでは、画像のデフォルトサイズや追加のサイズや幅を定義できます。

## 画像フィールドをレンダリングします

スケーリングとサイズ調整用の **レスポンシブ画像** フィールドを追加するには:

1.  [レンダリングバリアントを追加](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/create-a-rendering-variant.html "Create a rendering variant")してください。
2.  バリアントを右クリックし、「 **挿入**」をクリックし、「 **レスポンシブ画像**」をクリックします。
3.  **バリアント詳細**セクションでは、画像のデフォルトサイズを定義できます。

**レスポンシブ画像バリアント**フィールドでは、以下を指定できます:

-   **フィールド名** – 画像へのリンクを含むフィールド名。
    
-   **サイズ** – 画面幅を定義し、その幅に最適な画像サイズを示します。例えば、(max-width: 320px) 280px, (max-width: 480px) 440px, 800px入力すると、<img sizes=""> 属性に描画されます:
    
    <img src="/-/media/Project/Tenant/Site/26056130\_2115225655366272\_5152181870065454436\_n/MyImage.JPEG?w=400&amp;hash=C54AFF8A74289E7B0A776137DFF1D4F89DDEFF93" alt="Simple description of the image" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
    
-   **幅** – コンマ区切られた整数リストに幅を入力します。例えば: 320, 480, 800.
    
-   **デフォルトサイズ** – 指定されている場合、そのサイズは "src" パラメータのパラメータとして加えられます。空のままにすると、画像は元のサイズでレンダリングされます。
    

**バリアント詳細**セクションに入力された値はsrcset属性で統合されます。以下のバ**リアント詳細**セクションのスクリーンショットの値は、以下のimgタグを生成します。

![The responsive image settings.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/D27E95974EC14F6F8713EB3692DD88DD.png)

![The source for the responsive image.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/7FC3B30D302241AD853C7717EB7E523A.png)

## リンクフィールド内の複数の画像をレンダリングする

**レスポンシブ画像バリアント**フィールドは、入れ子子状フィールドを扱うことを可能にします。例えば、製品が載ったページがあり、それらの製品ごとに異なるサイズの画像が存在する場合です。メディアアイテムにリンクできるフィールド、参照フィールド、**レスポンシブイメージバリアント**フィールドを使うことで、複数の画像を同じサイズにレンダリングできます。

複数の画像を自動サイズ化するには:

1.  ページテンプレートに **マルチリスト** または **マルチルートツリーリスト** フィールドを追加してください。
    
2.  **ソース**フィールドにクエリを入力して、欲しい画像を集めます。例えば、query:$siteMediaサイトのバーチャルメディアフォルダへのリンクを貼ります。
    
    ![Query for images example.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/59DE1F650F824141BC65FEF81F7225D2.png)
    
3.  レンダリング画像を使いたいコンポーネントのレンダリングバリアントを作成します。バリアントを追加したいレンダリングを右クリックし、「 **挿入**」→「 **バリアント定義**」をクリックします。
    
4.  名前を入力して**OK**をクリックします。
    
5.  表示するフィールドを定義するには、レンダリングバリアントに子項目を追加できます。バリアントを右クリックし、「 **挿入**」をクリックし、「 **参照**」をクリックします。
    
6.  **パススルー**フィールドは、入れ子された項目からフィールド名を定義します。**バリアント詳細**セクションの**パススルー**フィールドで、ページテンプレートの**マルチリスト**または**マルチルートツリーリスト**フィールドで入力した名前を入力します。
    
7.  ステップ5で作成した参照項目を右クリックし、「 **挿入**」をクリックし、「 **レスポンシブ画像**」をクリックします。
    
8.  **バリアント詳細**セクションでは、画像のデフォルトサイズを定義できます。例えば、**デフォルトサイズ**フィールドに400を入力すると、ページの画像はすべてデフォルトサイズ400になります。
    
    ![Responsive image default size field.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/E0F2A927F04C41578E00E90713A38372.png)