---
title: "ページに画像を追加してください"
slug: "add-an-image-to-a-page"
abstract: "ページにImageコンポーネントを追加して設定します。"
---
# ページに画像を追加してください

> !注このトピックでは、以前にContent Editorで構築されたコンポーネントの設定方法を説明します。代わりにコンポーネントでプロトタイプされたコンポーネントについて知りたい場合は、[コンポーネント](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/prototyping-components.html "Prototyping components") ドキュメントをご覧ください。

ページビルダーでは、**画像** コンポーネントやフィールドを使ってウェブページに画像を追加できます。その後、メディアライブラリやモダンメディアライブラリのページから画像を選択してフィールドに追加できます。

![Add an image and configure it](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/image3.png)

## メディアライブラリから画像を追加してください

メディアライブラリから **画像** をページのコンポーネントに追加するには:

1.  ページビルダー **エディター** モードで、左側のペインの **Sitemap** タブで、コンポーネントを追加したいページをクリックします。
2.  **コンポーネント**タブで**画像コンポーネントをクリックし**、ページのキャンバスにドラッグします。
3.  ページ内の **Image** 要素をクリックします。右側のペインで、追加したい画像のMedia Libraryパスが分かれば、 **画像パス** フィールドに入力できます。または、画像フィールドが空なら**追加**、置き換えたいコンテンツがある場合は**Change**をクリックしてください。
4.  「**メディア追加**」ダイアログで「 [メディアライブラリ](https://doc.sitecore.com/sai/ja/users/sitecoreai/manage-media/media-library/media-items.html "Media items")」を選択します。
5.  画像にナビゲートするか、名前で検索してください。 **Search** フィールドにテキストを入力すると、ダイアログに検索文字列が含まれ、現在のフォルダまたはそのサブフォルダにある画像がすべて表示されます。
6.  オプションとして、メディアライブラリに新しいメディアファイルをアップロードできます。「 **メディアをアップロード** する :mdiTrayArrowUp:」をクリックし、jpeg、jpg、gif、png、svg、webp、bmpのいずれかの拡張子を持つファイルを選択します。新しいファイルはインデックス化後にライブラリで確認できます。
7.  希望する画像を選択し、「 **選択済みを追加」**をクリックします。
8.  画像をさらに設定するには、 **画像** 親要素を選択してください。右側のペインで **「コンテンツ**」をクリックし、画像設定オプションを編集します:
    -   画像にキャプションを追加するには、 **ImageCaption** フィールドを使ってください。
    -   画像にオルトテキストを追加するには、 **画像のオルトテキスト** フィールドを使います。
    -   画像をリンクとして使うには、 **TargetUrl** フィールドを使ってください。

## 現代メディアライブラリから画像を追加してください

[現代のメディアライブラリ](https://doc.sitecore.com/sai/ja/users/sitecoreai/manage-media/modern-media-library.html "Modern Media Library")の**画像**をページのコンポーネントに追加するには:

1.  ページビルダー **エディター** モードで、左側のペインの **サイトツリー** タブで、コンポーネントを追加したいページをクリックします。
    
2.  **コンポーネント**タブで**画像コンポーネントをクリックし**、ページのキャンバスにドラッグします。
    
3.  ページ内の **画像** 要素をクリックします。右側のペインで、画像フィールドが空なら**「追加**」をクリック、置き換えたいコンテンツがある場合は**「変更**」をクリックしてください。
    
4.  「**メディア追加**」ダイアログで「 **メディア**」をクリックします。
    
5.  「 **メディア追加** 」ダイアログを開くと、**メディア** ページから表示されるアセットは自動的にページビルダーのコンテンツに合わせて調整されます。システムはキャンバス内のページと、タイプ、テキスト、周辺コンテンツなどの構成文脈を分析し、検索クエリを推論します。検索クエリを変更して結果を微調整できます。
    
    あるいは、インテリジェントなコンテキストなしでより広範な検索を行うには、「 **ページコンテキストを含める」**のチェックを外してください。
    
6.  画像にナビゲートするか、名前で検索してください。また、パッケージから提供されているフィルターを使って、メディアで利用可能な画像の一部だけを表示することもできます。
    
7.  オプションで、新しいメディアファイルを現代のメディアライブラリにアップロードできます。 **アップロード :** mdiTrayArrowUp: をクリックし、ファイルを選択してください。すべてのファイル形式に対応していますが、.exe、.bat、.com、.cmd、.msi、.pdb、.vb、.vbs、.ws、.wsf、.scr、.pif、.jar、.regを除きます。
    
8.  現代のメディアライブラリを使う際は、画像の焦点をトリミングしたり更新したりできます。
    
    -   トリミングするには、高さと幅の間のロックアイコンをクリックし、その後**幅と****高さ**の値を更新してください。
    -   [焦点](https://doc.sitecore.com/sai/ja/users/sitecoreai/manage-media/modern-media-library/set-or-remove-a-focal-point.html "Set or remove a focal point")を更新するには、カーソルを焦点の位置に合わせてクリックします。
9.  希望の画像を選択して **「挿入**」をクリックします。
    
    ![The Media picker in Page builder](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/mediapicker.png)
    
    > !注お好きな画像の挿入ボタンが無効になっている場合は、まず [画像に公開リンクを追加する](https://doc.sitecore.com/sai/ja/users/sitecoreai/manage-media/modern-media-library/add-a-public-link.html "Add a public link") か、画像の公開リンク利用可能日を更新してから使用できません。
    
10.  画像をさらに設定するには、**画像** 親要素を選択してください。右側のペインで **「コンテンツ**」をクリックし、画像設定オプションを編集します:
     
     -   画像にキャプションを追加するには、 **ImageCaption** フィールドを使ってください。
     -   画像にオルトテキストを追加するには、 **画像のオルトテキスト** フィールドを使います。
     -   画像をリンクとして使うには、 **TargetUrl** フィールドを使ってください。