画像サイズの縮小とトリミングや回転・反転を行う

WordPress に保存されている画像に対してメディアライブラリ経由で画像のサイズを縮小したり、画像の一部分だけを取り出すトリミングや回転や反転といった画像に対する加工を行うことができます。ここではメディアライブラリで画像の縮小、トリミング、回転・反転を行う方法について解説します。

(Last modified: 2023年01月11日)

画像の編集画面を表示する

例として新しい記事を作成し「画像」ブロックを追加したあと、表示する画像として次のような画像をアップロードしました。

WordPress に保存された画像の編集画面を表示します。画面左側「メディア」の中の「ライブラリ」をクリックしてください。

「メディアライブラリ」の画面が表示されます。 WordPress に保存されている画像や動画の一覧が表示されます。

編集を行いたい画像をクリックしてください。

画像の下に表示されている「画像を編集」をクリックして下さい。

画像に対してトリミングや回転・反転を行うことができる画面が表示されました。

画像のサイズを縮小する

最初に保存されている画像サイズを縮小する方法です。幅と高さの比率を維持したままサイズを縮小することができます。(拡大はできません)。画面右上に表示されている「画像縮尺の変更」で行います。

新しい画像の幅と高さを入力してください。比率は元のままなのでどちらかを入力すると自動的にもう一つの値が決まります。入力が終わりましたら「縮尺変更」をクリックしてください。

保存されている画像のサイズが変更されました。

この時、オリジナルの画像をコピーして指定したサイズに縮小した新しい画像ファイル( goat01-scaled-e1593712305673.jpg )が生成されます。

今後は画像サイズとして「フルサイズ」を選択した場合に goat01-scaled.jpg に代わって goat01-scaled-e1593712305673.jpg ファイルが使用されます。

画像をトリミングする

画像の一部分だけを切り取って使用することをトリミングといいます。トリミングを行いたい場合は、表示されている画像の上でクリックしてからドラッグで範囲を選択してください。なお「Shift」キーを押しながら範囲を選択すると幅と高さの比率を変えずに選択できます。

選択した領域の幅と高さは画像右側「画像のトリミング」の中にある「選択範囲」に表示されています。この値を直接編集することで選択範囲の幅と高さの大きさを調整できます。

次にトリミングした画像をどの画像に対して適用するのかを指定します。「すべての画像サイズ」「サムネイル」「サムネイル以外の全サイズ」から選択できます。今回は「すべての画像サイズ」を選択しました。

選択範囲や変更の対象を選択しましたら、画面左上に表示されている「トリミング」をクリックして下さい。

トリミングした画像が新しい画像として画面に表示されます。これでよければ「保存」をクリックしてください。

トリミングされた画像が保存されました。

画像が変更されたことによって必要な数の新しい画像が自動的に生成されました。今回はすべての画像ファイルがが対象でしたので「サムネイル」「小」「中」「フルサイズ」用に新しい画像が生成されています。今後は例えば画像サイズとして「大」を選択した場合に goat01-1024x683.jpg に代わって goat01-scaled-e1593713610262-1024x683.jpg ファイルが使用されます。

幅と高さの比率を固定してトリミングする

トリミングする時に選択範囲の幅と高さの比率をあらかじめ指定しておくことができます。指定する場合は画面右側「画像のトリミング」の中にある「縦横比」に数値を設定してください。

例えばサムネイル用のトリミングを行う場合などには 1 対 1 と設定しておくと、範囲を選択するときに自動的に 1 対 1 の比率になるように範囲選択できます。

画像の回転と反転を行う

画像を編集する画面では画像を回転させたり反転させる機能が用意されています。画面左上に表示されている「左に回転」「右に回転」「垂直方向に反転」「水平方向に反転」のいずれかをクリックしてください。

例えば「左に回転」をクリックすると画像が反時計回りの方向へ 90 度回転します。

元に戻したあと今度は「水平方向に反転」をクリックすると画像が水平方向に反転します。

変更内容を保存するには、トリミングの場合と同じようにどの画像に対して適用するのかを指定したあと画像左下に表示されている「保存」をクリックして下さい。

画像の保存が完了しました。トリミングの場合と同じく画像が変更されたことによって必要な数の新しい画像が自動的に生成され、今後は新しい画像が使用されます。

元の画像を復元する

画像に対してトリミングを行ったり回転・反転を行った場合でも元のオリジナルの画像に復元することもできます。復元したい場合には画像の右にある「画像を復元」をクリックして下さい。

画像の復元が完了しました。自動的に保存も完了しています。

なお画像を復元しても、画像のサイズ縮小やトリミングなどによって生成された画像は自動的には削除されません。

-- --

メディアライブラリで画像の縮小、トリミング、回転・反転を行う方法について解説しました。