---
title: "画像コンポーネントを追加"
slug: "add-an-image-component"
abstract: "画像コンポーネントをページに追加する方法。"
---
# 画像コンポーネントを追加

> !注このトピックで説明されている手順はエクスペリエンスエディターを使用してください。

画像コンポーネントをページに追加できます。画像コンポーネントを配置したら、画像を追加したり、例えば画像をリンクとして機能させるなどプロパティを指定したりできます。

ページに画像を追加するには:

1.  ツールボックスを開きます。あるいは**、HOME**タブの**コンポーネント**ボタンをクリックして「**レンダリングの選択**」ダイアログボックスを開くこともできます。
    
2.  **メディア**セクションから、レンダリングを追加したいプレースホルダーに**Image**コンポーネントをドラッグ&ドロップします。ドラッグすると、プレースホルダーが青く変わります。
    
3.  画像を選択し、画像プロパティを指定するには、フローティングツールバーで **「画像プロパティを編集** 」をクリックし、[該当するフィールドを入力](https://doc.sitecore.com/xp/ja/users/sxa/103/sitecore-experience-accelerator/add-an-image-component.html#UUID-a4d2c774-31e1-25f3-0f81-cfff199c7ebc_section-idm4555297516852833114491892217 "Properties in the Edit images dialog box")してください。
    
    ![The floating toolbar for the Image component](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/SXA-headless-floating-toolbar-image.png)
    
4.  画像のプロパティを変更するには **、「画像の外観を修正**」をクリックしてください。
    
5.  **画像プロパティ**ダイアログボックスでは、以下のフィールドを定義できます:
    
    -   **代替テキスト** - 画像ファイルが読み込まれていない場合に表示される画像のテキスト代替を提供します。
    -   **デフォルトの代替テキスト** - 変更してはいけない標準フィールド。
    -   **幅と高さ** - **寸法** セクションで画像の幅と高さを変更できます。
    -   **アスペクト比を保持** する - 画像のサイズ変更時はアスペクト比を維持してください。
    -   **水平空間** - 画像と周囲のテキストの間の空間を水平方向に設定します。
    -   **垂直空間** - 画像と周囲のテキストの間の垂直方向の空間を設定します。

> !注画像を追加すると、テキストはコンテンツエディター内のページのDataフォルダ内のデータソース項目に保存されます。

## 画像編集ダイアログボックス内のプロパティ

**セクション**

**財産**

**概要**

キャプション

入力すると、テキストは画像の下に表示されます。

URL

URLを直接入力するか、他のオプションのいずれかを使ってください。

**リンクを挿入**

Sitecoreのアイテムへのリンクを挿入してください。画像をクリックするとユーザーがリダイレクトされます。

**メディアリンクを挿入**

リンクしたいメディアアイテムに移動し、リンクに追加のプロパティを指定します。

**外部リンクを挿入**

リンクを挿入したい外部ウェブサイトのURLを入力し、追加のプロパティを指定します。

**アンカーを挿入**

ページの特定のセクションにリンクを追加するには、まずリンクしたいセクションにアンカーを設置し、そのアンカーリンクを使って訪問者がスクロールせずにそのセクションにアクセスできるようにします。

**メール挿入**

メールアドレスを入力してください。画像をクリックすると指定されたメールアドレス宛てのメールが開きます。

**JavaScriptを挿入**

挿入したいJavaScriptリンクを入力し、そのリンクに関連するプロパティを指定します。

**クリア**

URLフィールドをクリアします。

画像

画像アイテムへのパスを直接入力するか、他のオプションのいずれかを使います。

**閲覧**

画像はメディアライブラリでご覧いただけます。

**性質**

画像のプロパティを変更するためにクリックしてください。

**クリア**

画像を削除してください。

**リフレッシュ**

画像をリフレッシュしてください。

**外部画像リンク**

別のページの画像へのリンクを指定してください。