---
title: "変換設定を用いて画像フィールドをレンダリングする"
slug: "render-image-fields-using-transformation-settings"
abstract: "Sitecore Content Hubの変換の使い方を学びましょう。"
---
# 変換設定を用いて画像フィールドをレンダリングする

SXAでは [、レスポンシブ画像フィールドを追加](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/render-image-fields-using-the-responsive-image-variant.html "Render image fields using the Responsive Image variant") して画像を正しく拡大・サイズ付けできます。Sitecore Content Hubを使っている場合、そこに設定された変換もSXA画像に使うことができます。そのためには、レスポンシブ画像バリアントのアイテム定義に使えるマッピングをSitecoreで作成する必要があります。

## 変換を設定します

画像の幅、高さ、画質を指定するには:

1.  Sitecore Content Hubを開き、リボンの上で **「管理**」をクリックします。
    
2.  **「設定**」をクリックし、「**変換」**をクリックして画像の幅、高さ、品質を指定します。例えば:
    
    ![Set the transformation settings.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-SCH-transformations.png)
    

## 変換マッピング項目を作成します

Sitecore Content Hubの各変換定義ごとに、変換マッピング項目を作成しなければなりません。

変換写像を追加するには:

1.  コンテンツエディターで、以下へ移動してください:
    
    */sitecore/system/Settings/Feature/Experience Accelerator/Stylelabs/*、右クリック**で変換**、**挿入**、**変換をクリックします。**
    
2.  名前を入力して **「OK」**をクリックします。
    
3.  **プロパティ**セクションの**Transformation.Name**フィールドで、Sitecore Content Hubの変換名を入力します。
    
    ![In the Properties section you can enter the Content Hub transformation name.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-SCH-transformation-name-field.png)
    

## レンダリングバリアントの設定

レスポンシブ画像レンダリングのバリアントにマッピングを追加するには:

1.  コンテンツエディターで、レンダリングバリアントのレスポンシブ画像項目をクリックします。
    
2.  **Stylelabsのバリアント詳細**セクションの**MWidths**フィールドで幅を指定します。左列で最大画像幅を指定し、右列で[変換マッピング項目](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/render-image-fields-using-transformation-settings.html#UUID-8b103ce4-bd1b-8898-144b-302ca3c18eb4_section-5cd3eb299dc73-idm45390846723696 "Create the transformation mapping item")を選択します。
    
    ![Specify image width and the mapping item.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-SCH-responsive-image-widths.png)
    
    今、ページにレンダリングを追加し、データソースでStylelabs画像を選択し、MWidthマッピング付きのレンダリングバリアントを適用すると、変換設定が使われます。
    
    画面サイズに応じて異なる画像が読み込まれます。リンクは変換マッピングのないリンクに似ていますが、変換名が割り当てられたサイズに対して *パラメータt*を追加します。例えば:
    
    [https://portal.stylelabs.io/api/public/content/b5f64bb91cff4032804305c48961d688?v=b9b617a5&t=w320](https://portal.stylelabs.io/api/public/content/b5f64bb91cff4032804305c48961d688?v=b9b617a5&t=w320)
    
    [https://portal.stylelabs.io/api/public/content/b5f64bb91cff4032804305c48961d688?v=b9b617a5&t=w480](https://portal.stylelabs.io/api/public/content/b5f64bb91cff4032804305c48961d688?v=b9b617a5&t=w480)
    
    [https://portal.stylelabs.io/api/public/content/b5f64bb91cff4032804305c48961d688?v=b9b617a5](https://portal.stylelabs.io/api/public/content/b5f64bb91cff4032804305c48961d688?v=b9b617a5)