Applies ToSharePoint Server サブスクリプション エディション SharePoint Server 2019 Microsoft 365 の SharePoint 一般法人向け Office SharePoint 管理センター 21Vianet が運用している SharePoint Online

サイトに最新のページを追加するとき、ページの構成要素である Web パーツを追加し、カスタマイズします。 この記事では、Image Web パーツの使用方法について説明します。 これを使用して、サイト、コンピューター、または Web から、ページに画像を挿入します。 既存のイメージをトリミング、サイズ変更、置き換えることができます。

ページに画像を追加する

イメージ Web パーツを追加する

画像をトリミングする

イメージのサイズを変更する

ドラッグまたは貼り付けによって既存のイメージを置き換える

ページ上の画像を追加または置換する

ページ上の画像を追加または置き換える最も簡単な方法は、ドラッグまたは貼り付けだけです。 

ドラッグして新しいイメージを追加するか、既存のイメージを置き換えます

  1. まだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

  2. 次のいずれかの操作を行います。 イメージを追加するには、使用するイメージを配置するセクションにドラッグするだけです。イメージを置き換えるには、置き換えるイメージをダブルクリックして選択し、新しいイメージをドラッグします。

必要に応じて、イメージのサイズを変更またはトリミングし直す必要がある場合があります。

貼り付けによって画像を置き換える

  1. まだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

  2. 既存のイメージを追加または置き換えるイメージをコピーします。

  3. ページで、イメージ Web パーツ内の画像をダブルクリックして選択します。

  4. キーボードで Ctrl キーを押しながら V キーを押す

イメージ Web パーツを追加する

  1. まだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

  2. 既存の Web パーツの上または下、またはタイトル領域の下にマウス ポインターを合わせ、[ Circled plus sign used to add a modern web part to a page] をクリックし、[ イメージ ] Web パーツを選択します。

  3. 次のいずれかから最近使用した画像または画像を選択します。

    • Microsoft が提供するストック イメージ

    • Web 検索

    • サイト

    • コンピューター

    • リンク

    • 組織が承認済みの画像のセットを指定している場合は、そのセットを [組織] から選択できます。

      ファイル ピッカー オプションの図。

      注: 

      • Web 検索では、クリエイティブ コモンズ ライセンスを利用する Bing 画像を使用します。 ページに画像を挿入する前に、ライセンスを確認する責任があります。

      • SharePoint 管理で、Organizationのアセット ライブラリを作成する方法については、「organizationアセット ライブラリを作成する」を参照してください。

      • SharePoint 管理者の場合は、画像を取得するためのパフォーマンスを向上させるために、コンテンツ配信ネットワーク (CDN) を有効にすることをお勧めします。 CDN の詳細については、こちらをご覧ください

  4. [ 開く ] または [ イメージの追加] をクリックします (画像のソースに応じて)。

  5. 必要に応じて、Web パーツのイメージの下にキャプションを入力します。

  6. [ Web パーツ Web part edit button の編集 ] (左側) をクリックして画像を変更し、画像へのリンクを追加し、画像にテキストを追加し、代替テキストを追加または変更します (スクリーン リーダーを使用するユーザー向け)。

    イメージ Web パーツ ツールボックス

    自動代替テキスト 画像を挿入すると、代替テキスト (スクリーン リーダーを持つユーザー向け) が自動的に生成されます。 多くの場合、変更または削除しない限り、テキストはイメージと共に自動的に保存されます。 画像の代替テキストの信頼度が高くない場合は、画像にアラートが表示され、代替テキストを確認して変更したり、保持したりできます。

    代替テキスト プロンプトを含む画像

注:  SharePoint Server サブスクリプション エディション と SharePoint Server 2019 は、Web パーツを編集する場合にのみ代替テキストをサポートします。

画像をトリミングする

事前に設定された縦横比を使用せずに、または使用せずに画像をトリミングできます。

  1. まだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

  2. 変更する画像をクリックします。 画像を編集するためのツール バーが表示されます。

    イメージ ツール バー

    • 1. 縦横比

    • 2. フリー比率でトリミング

    • 3. 元に戻す

    • 4. リセット

    • 5. プレビュー (保存)

縦横比を使用したトリミング

縦横比でトリミングすると、画像の幅と高さの割合を決定できます。 次の図の青で囲んだ領域は、1:1 (正方形) の縦横比の選択を示しています。

縦横比トリミングの例
  1. [ 縦横比 ] ボタン 縦横比トリミング ボタンクリックします。

    追加のツール バーが表示され、さまざまな縦横比のオプションが表示されます。

    縦横比ツール

    目的の縦横比を選択します。 16:9 は左端の縦横比オプションで、次に 3:2、4:3、1:1 が続きます。 プレビュー ボックスが表示され、画像のトリミング方法が表示されます。 画像内のトリミング ボックスを移動して、トリミングされた領域を変更できます。

    トリミング ボックスを回転させ、縦横比の向きを変更するには、[トリミング ボックスの回転 ] ボタンをクリック トリミング ボックスの回転ボタン

  2. 完了したら、[ 保存 ][保存]をクリックします。

手動でトリミングする

フリートリミングの例
  1. [ フリーレシオでトリミング] ボタンをクリック 縦横比なしのトリミング ボタン 、縦横比を使用せずにトリミングします。 次に、画像の両側にある正方形の 1 つをドラッグして、画像を狭く、広く、高く、または短くします。

  2. 完了したら、[ 保存 ][保存]をクリックします。

イメージのサイズを変更する

編集モードの間は、サイズ変更ハンドルを表示するためにイメージを選択するか、イメージ ツールバーの [サイズ 変更] ボタンを選択して、画像のサイズを変更できます。 次に、いずれかのハンドルをドラッグして、イメージを目的のサイズにします。

画像のハンドルのサイズを変更する

注: 

元に戻すまたはリセットする

[ 元に戻す ] ボタン トリミングを元に戻す を使用して、最後の操作を元に戻します。 [ リセット ] ボタン イメージトリミングをリセットする を使用して、一度に行ったすべての変更を元に戻し、最後に保存してからの状態に画像を返します。

ドラッグまたは貼り付けによって既存のイメージを置き換える

ページに既存のイメージ Web パーツがある場合は、Web パーツを編集して別の画像を選択してイメージを置き換えたり、置き換えるイメージの上に新しいイメージをドラッグまたはコピーして貼り付けることができます。 貼り付けには、貼り付けのキーボード ショートカット (Ctrl + V) を使用する必要があります。 手順:

コピーして貼り付ける

  1. まだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

  2. 既存の を置き換えるイメージをコピーします。

  3. ページで、イメージ Web パーツ内の画像をダブルクリックして選択します。

  4. キーボードで Ctrl キーを押しながら V キーを押す

ドラッグ アンド ドロップ

  1. まだ編集モードになっていない場合は、ページの右上にある [編集] をクリックします。

  2. 既存のイメージを置き換えるイメージを選択します。

  3. ページで、イメージ Web パーツ内の画像をダブルクリックして選択します。

  4. イメージを既存のイメージの上にドラッグします。

注: 必要に応じて、イメージのサイズを変更またはトリミングし直す必要がある場合があります。

関連項目

イメージ ギャラリー Web パーツ

ヒーロー Web パーツ

ヘルプを表示

その他のオプションが必要ですか?

サブスクリプションの特典の参照、トレーニング コースの閲覧、デバイスのセキュリティ保護方法などについて説明します。

コミュニティは、質問をしたり質問の答えを得たり、フィードバックを提供したり、豊富な知識を持つ専門家の意見を聞いたりするのに役立ちます。