画像を挿入する方法

WordPressの投稿や固定ページの本文中に、画像挿入する方法を紹介します。

WordPressで画像を挿入する方法

WordPressの投稿や固定ページの編集画面には、画像を挿入するためのボタンメディアを追加)が用意されています。

メディアを追加ボタン
投稿編集画面の「メディアを追加」ボタン
WordPressでは、画像・音声・動画ファイルを「メディア」と呼びます。

本文中に画像を挿入する手順

例として、投稿の編集画面(ビジュアルエディタ)で画像を挿入する方法を紹介します。

固定ページの編集画面、およびテキストエディタにおいても、ほぼ同じ手順で画像を挿入することができます。

手順1
本文中の、画像を挿入したい位置にカーソルを合わせメディアを追加をクリックします。

[メディアを追加]ボタンをクリック

手順2
すると、「メディアライブラリ」という画面が開きます。今回は新しく画像をアップロードするので、[ファイルをアップロード]をクリックします。

[ファイルをアップロード]をクリック
アップロードとは、コンピュータ内のデータをインターネット上に転送する操作のことです。WordPressで画像を挿入するためには、コンピュータ内の画像をサーバー(WordPressをインストールしている場所)に転送する操作が必要です。

ここからは、コンピュータ内の画像をアップロードします。操作方法は、次の2通りがあります。

  1. ドラッグ・アンド・ドロップ
  2. ファイルを選択

手順3-1:「ドラッグ・アンド・ドロップ」でアップロード
アップロードしたい画像ファイルを、マウスの左ボタンを押しながら移動させ、移動先で左ボタンを離します。

「ドラッグ・アンド・ドロップ」でアップロード

手順3-2:「ファイルを選択」でアップロード
ファイルを選択をクリックすると、ファイル選択画面が表示されます。選択後、開くをクリックします。

「ファイルを選択」でアップロード

手順4
画像ファイルの設定を変更する画面が表示されます。ひとまず何も設定変更せず、画像を挿入してみましょう。投稿に挿入をクリックします。

投稿に挿入をクリック
固定ページの場合は、固定ページに挿入をクリックします。

プレビューを確認
ビジュアルエディタ上に、画像が挿入されました。実際のウェブページ上ではどのように表示されるでしょうか。プレビューをクリックしてみましょう。

画像挿入後、プレビュー確認

プレビューの表示
ウェブページ上での画像表示のようすを確認できます。

画像挿入後のプレビュー表示
テーマ「Twenty Seventeen」利用時のプレビュー表示

画像ファイルの設定変更

先ほどの手順紹介では、画像ファイルをアップロード後、特に設定変更することなく画像を挿入しました。ここからは、画像ファイルの設定変更画面について紹介します。

画像ファイルの設定変更画面

添付ファイルの詳細

URL
画像ファイルのURLアドレスが表示されます。URLは、変更することはできません
タイトル
画像のファイル名が表示されます。特に変更する必要はありません。
キャプション
挿入した画像のまわりに、文字を表示させたい場合に入力します。表示位置は、テーマによって異なります。
代替テキスト
画像を表示できない環境で、代わりに文字を表示するために使われます。
説明
画像を管理する際に必要な情報を入力します。空欄でも構いません。

添付ファイルの表示設定

配置
画像をどこに配置させるかを指定します。1)左 2)中央 3)右 4)なし から選択できます。
画像ファイルの配置設定による違い
テーマ「Twenty Seventeen」利用時のプレビュー表示
リンク先
画像をクリックしたときに表示するページの、URLを指定できます
項目 リンク先
なし リンク先を指定しません
メディアファイル 元のサイズの画像ファイルを表示します
添付ファイルのページ 画像ファイルの紹介ページを表示します
カスタムURL 任意のURLアドレスを指定します
サイズ
画像のサイズを選択できます。指定できるサイズは、管理画面メニューの[設定]>[メディア]での設定内容によって異なります。
管理画面メニューの[設定]>[メディア]
WordPress管理画面 [設定]>[メディア]

画像の挿入後に設定変更する手順

手順1
ビジュアルエディタで画像をクリックすると、下のようなボタンが表示されます。このボタンで、画像の配置変更・編集・削除をすることができます。ここでは、[編集]ボタンをクリックします。

画像編集ボタン
テキストエディタでは、上のボタンを表示することはできません。

手順2
設定変更が完了したら、更新をクリックします。

設定変更後は更新ボタンをクリック
[編集]ボタンクリック後の画面

アップロード済みの画像を挿入する手順

手順1
すでにアップロードした画像を挿入するには、まず本文中の画像を挿入したい位置にカーソルを合わせメディアを追加をクリックします。

[メディアを追加]ボタンをクリック

手順2
メディアライブラリ画面で、挿入したい画像をクリックして選択し、投稿に挿入(固定ページの場合は固定ページに挿入)をクリックします。
メディアライブラリから挿入画像を選択

関連ページ

2011年3月21日