画像を編集する方法

WordPressには、アップロードした画像ファイルを編集する機能があります。サイズ変更やトリミング(切り抜き)、回転・反転などの操作を行うことができます。

WordPressの管理画面で画像を編集する方法

WordPressの管理画面からアップロードした画像ファイルを編集するには、下のような編集画面にアクセスします。

WordPress 画像ファイルの編集画面
WordPress 画像ファイルの編集画面

画像ファイル編集画面の開き方

画像ファイル編集画面の開き方は、次の3つのケースによって異なります。

  • 記事編集画面から新しく画像を挿入する場合
  • 記事編集画面で挿入済みの画像を編集する場合
  • メディアライブラリから画像を選択する場合

画像ファイル編集画面の開き方①
記事編集画面から新しく画像を挿入する場合

手順1
投稿や固定ページの編集画面で画像を挿入するには、メディアを追加をクリックします。

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

手順2
画像をアップロード(またはアップロード済みの画像を選択)すると、下の画面が開きます。ここで[画像を編集]をクリックすると、画像ファイル編集画面が開きます。

[画像を編集]をクリック

画像ファイル編集画面の開き方②
記事編集画面で挿入済みの画像を編集する場合

手順1
記事編集画面でビジュアルエディタを利用している場合、挿入済みの画像をクリックすると下のようなボタンが表示されます。ここで[編集]ボタンをクリックします。

画像編集ボタン

手順2
オリジナルを編集をクリックすると、画像ファイル編集画面が開きます。

オリジナルを編集をクリック

画像ファイル編集画面の開き方③
メディアライブラリから画像を選択する場合

手順1
メディアライブラリは、管理画面メニューの[メディア]>[ライブラリ]から開くことができます。

[メディア]>[ライブラリ]

手順2
メディアライブラリで編集したい画像をクリックすると、下の画面が開きます。ここで画像を編集をクリックすると、画像ファイル編集画面が開きます。

画像を編集をクリック

画像ファイル編集画面でできること

画像ファイル編集画面では、以下の項目について編集することができます。

画像ファイル編集画面
  1. トリミング(切り抜き)
  2. 回転
  3. 反転
  4. 元に戻す/やり直す
  5. 縮小
  6. 編集適用範囲の指定

画像ファイル編集画面でできること①
トリミング(切り抜き)

画像の上で切り抜きたい部分をドラッグすると、選択した範囲が明るくなります。次に、[トリミング]ボタンをクリックします。

切り抜きたい部分を選択し[トリミング]ボタンをクリック

縦横比を指定してからドラッグすると、縦横比を固定して切り抜き部分を選択することができます。

縦横比を固定してトリミング

画像ファイル編集画面でできること②
回転

左側のボタンをクリックすると反時計回りに、右側のボタンをクリックすると時計回りに画像を回転させることができます。

画像の回転

画像ファイル編集画面でできること③
反転

左側のボタンをクリックすると垂直方向に、右側のボタンをクリックすると水平方向に画像を反転させることができます。

画像の反転

画像ファイル編集画面でできること④
元に戻す/やり直す

左側のボタンをクリックすると、実行した操作を元に戻す(取り消す)ことができます。右側のボタンをクリックすると、元に戻した(取り消した)操作をやり直すことができます。

画像ファイル編集画面でできること⑤
縮小

画像のサイズを変更(縮小)できます。拡大することはできません。縦・横どちらかの数値を入力すると、もう一方は縦横比を維持した数値が自動的に表示されます。

画像のサイズ変更

画像ファイル編集画面でできること⑥
編集適用範囲の指定

編集内容を適用する範囲を指定できます。ここには、以下の選択肢があります。

  • すべての画像サイズ
  • サムネイル
  • サムネイル以外の全サイズ
WordPress管理画面からアップロードした画像のサイズについて

WordPress管理画面からアップロードした画像ファイルは、元のサイズに加えて下記サイズのファイルが自動生成されます。

  • サムネイル(初期値:幅・高さが150ピクセル)
  • 中サイズ(初期値:幅・高さの上限が300ピクセル)
  • 大サイズ(初期値:幅・高さの上限が1024ピクセル)

つまり、先ほどの編集適用範囲にある選択肢を指定することにより、下表○印の付いた画像ファイルを編集することができます。

選択肢 元のサイズ サムネイル 中サイズ 大サイズ
すべての画像サイズ
サムネイル
サムネイル以外の全サイズ

編集内容の保存

すべての編集作業が完了したら、保存をクリックします。

画像編集内容の保存

関連ページ

2011年3月24日