---
title: "(再利用可能な)画像を追加してください"
slug: "add-a--reusable--image"
abstract: "ページに画像を追加しましょう。"
---
# (再利用可能な)画像を追加してください

SXAにはページデザインを簡単にするためのあらかじめ定義されたレンダリングライブラリが付属しています。ツールボックスからレンダリングをページにドラッグすることで、ページにコンテンツを追加できます。このトピックでは、ページに画像を追加する方法を説明します。

## 画像レンダリング

画像レンダリングは、一度だけ使いたい画像をページに追加します。画像を追加すると、SXAはその画像をページのDataフォルダ内のデータソース項目に保存します:

![Image storage](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/B71EC83230DA4EF48FAA093E2BB76A69.png)

画像レンダリングをページに追加するには:

1.  ツールボックスを開きます。 **メディア** セクションで **「画像**」をクリックします。レンダリングをクリックしてドラッグを始めると、レンダリングをドロップできるプレースホルダーが青色で点灯します。または、タッチパネルで指でレンダリングをページにドラッグするか、ホームタブのレンダリングアイコンをクリックしてください。
    
2.  レンダリングを目的のプレースホルダーの上に配置し、プレースホルダーが青く点灯したら、レンダリングをページに置きます。
    
3.  メディアライブラリから画像を選択するには、「 **画像プロパティ編集** 」をクリックし、該当するフィールドを入力してください。
    
    **セクション**
    
    **財産**
    
    **概要**
    
    キャプション
    
    入力すると、画像の下にテキストが表示されます。
    
    URL
    
    URLを直接入力するか、他のオプションのいずれかを使ってください。
    
    **リンクを挿入**
    
    Sitecoreのアイテムへのリンクを挿入してください。画像をクリックするとユーザーがリダイレクトされます。
    
    **メディアリンクを挿入**
    
    リンクしたいメディアアイテムに移動し、リンクに追加のプロパティを指定します。
    
    **外部リンクを挿入**
    
    リンクを挿入したい外部ウェブサイトのURLを入力し、追加のプロパティを指定します。
    
    **アンカーを挿入**
    
    ページの特定のセクションにリンクを追加するには、まずリンクしたいセクションにアンカーを設置し、そのアンカーリンクを使って訪問者がスクロールせずにそのセクションにアクセスできるようにします。
    
    **メール挿入**
    
    メールアドレスを入力してください。画像をクリックすると指定されたメールアドレス宛てのメールが開きます。
    
    **JavaScriptを挿入**
    
    挿入したいJavaScriptリンクを入力し、そのリンクに関連するプロパティを指定します。
    
    **クリア**
    
    URLフィールドをクリアします。
    
    画像
    
    画像アイテムへのパスを直接入力するか、他のオプションのいずれかを使います。
    
    **閲覧**
    
    メディアライブラリで画像を探すにはクリックしてください。
    
    **性質**
    
    画像のプロパティを変更するためにクリックしてください。
    
    **クリア**
    
    画像を削除してください。
    
    **リフレッシュ**
    
    画像をリフレッシュしてください。
    
    **外部画像リンク**
    
    別のページの画像へのリンクを指定してください。
    
4.  画像のプロパティを変更するには **、「画像の外観を修正**」をクリックしてください。
    
5.  **画像プロパティ**ダイアログボックスでは、以下のフィールドを定義できます:
    
    -   **代替テキスト**:画像ファイルが読み込まれていない場合に表示される画像のテキスト代替を提供します。
    -   **デフォルトの代替テキスト**:変更してはいけない標準Sitecoreフィールド。
    -   **幅と高さ**: **寸法** セクションで画像の幅と高さを変更できます。
    -   **アスペクト比を保持**:選択すると、画像のサイズ変更時にアスペクト比を維持します。
    -   **水平空間**:画像と周囲のテキストの間の空間を水平方向に設定します。
    -   **垂直空間**:画像と周囲のテキストの間の空間を垂直方向に設定します。

## イメージ(再利用可能)レンダリング

ページ全体で画像を再利用することは非常に便利です。例えば、ロゴやプロフィール写真、商品画像をさまざまな場所に使いたい場合もあります。再利用可能な画像はサイトの*Data*フォルダに保存されています: *Site/Data/Images*。

画像(再利用可能な)レンダリングをページに追加するには:

1.  ツールボックスを開きます。 **メディア** セクションで「 **画像(再利用可能)**」をクリックします。
    
    レンダリングをクリックしてドラッグし始めると、レンダリングをドロップできるプレースホルダーが青色で点灯します。あるいは、タッチパネルを使って指でレンダリングをページにドラッグするか、**ホーム**タブの**レンダリング**アイコンをクリックしてもいいです。
    
2.  レンダリングを目的のプレースホルダーの上に配置し、プレースホルダーが青く点灯したら、レンダリングをページに置きます。
    
3.  「 **関連コンテンツ選択** 」ダイアログボックスで画像を選択し、**確定**をクリックします。