# AX - 画像

## 概要

**AX - 画像** は、Experience Site ページ上で画像を表示し、サイズ変更、トリミング、配置、読み込み動作を制御できる Experience Cloud コンポーネントです。

Salesforce Content Documents、静的リソース、または外部 URL から、商品写真、ロゴ、バナー、プロフィール画像、その他あらゆるビジュアル コンテンツを表示するために使用します。Experience Builder でコードなしで、画像の表示、トリミング、スケーリング方法を設定できます。

商品ギャラリー、ブランドヘッダー、ビジュアル コンテンツ セクション、プロフィール表示、またはポータルで柔軟な画像表示とレスポンシブなサイズ調整が必要なあらゆる場所に最適です。

## チュートリアル

| 名前                                                                                                                                                         | 説明                                                   |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| [**レコード詳細情報を表示するようにマップを設定する**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/chtoriaru/konpnento/di-tu/rekdowosuruyouniwoshimasu) | Avonni Map を使用して Experience Cloud でレコードを表示する方法を学びます。 |

## 設定

{% tabs %}
{% tab title="🎛️ プロパティ" %}

| 名前                                     | 説明                                     | 使用方法                                                               |
| -------------------------------------- | -------------------------------------- | ------------------------------------------------------------------ |
| **CMS 画像または画像 URL**                    | 画像のソースを CMS から、または画像 URL を直接使用して指定します。 | 画像管理の好みに最も適し、簡単なアクセスと更新を可能にするソースを選択してください。                         |
| **幅と高さ**                               | 表示する画像の幅と高さを決定します。                     | 画像の鮮明さを維持しながら、ページ レイアウト内に調和よく収まるサイズを設定します。                         |
| **位置**                                 | 画像の配置を調整します。                           | 画像をコンテナ内で整列させ、バランスの取れた見た目のよいページ レイアウトを維持します。                       |
| **静止画像**                               | 画像を静的として設定するオプション。                     | 画像にレスポンシブな調整が不要で、さまざまな画面サイズでも一定のままにしたい場合にこの設定を使用します。               |
| **フルイド & フルイド拡大**                      | これらのオプションにより、画像のサイズをレスポンシブに調整できます。     | さまざまな画面サイズに画像がスムーズに適応するようにこれらの設定を有効にし、Web ページのレスポンシブ性を高めます。        |
| **サムネイル**                              | 画像をサムネイルとして表示します。                      | ギャラリーやプレビューに適したコンパクトな形式で画像を表示するために、このオプションを利用します。                  |
| **遅延読み込み**                             | 画像の自動読み込みまたは遅延読み込みを選択します。              | 即時表示と全体的なページ パフォーマンスのバランスが取れた読み込み方法を選択することで、ページの読み込み時間を最適化します。     |
| **トリミング サイズ、トリミング フィット、トリミング位置 X と Y** | 関連する部分に焦点を当てるため、画像のトリミングをカスタマイズします。    | 画像の重要な領域が目立つようにトリミング パラメータを定義し、視覚的な伝達効果を高めます。                      |
| **拡大鏡の種類**                             | 画像の詳細を表示するときに適用する拡大スタイルを選択します。         | 画像の詳細をより詳しく確認できる拡大鏡の種類を選択して、ユーザー操作を向上させます。                         |
| **CMS 比較画像または比較 URL**                  | 比較機能の属性をカスタマイズします。                     | 向き、操作、ラベルを決定する属性を使用して比較機能を調整し、使いやすい比較体験を実現します。                     |
| **比較属性**                               | 拡大機能の詳細を定義します。                         | ユーザーが画像の詳細を簡単に確認できるように、拡大鏡の動作と外観をカスタマイズします。                        |
| **拡大鏡の属性**                             | 画像の角の丸みを調整します。                         | 適切な border radius を設定して画像の角をやわらかくしたりシャープにしたりし、画像のスタイリッシュな表現に貢献します。 |
| {% endtab %}                           |                                        |                                                                    |

{% tab title="🎨 スタイリング" %}

{% endtab %}
{% endtabs %}