初級者向け

【基本】ダッシュボードで行なう画像のトリミング・サイズ変更教えて!

文中の説明画像をクリックすると拡大します。

LINEで送る
Pocket

この記事は約4分で読めます。

WordPress上で画像の編集ができる

WordPressのダッシュボード(管理画面)では、メディアで管理されている画像のトリミングやサイズ変更が自由にできます。

予めグラフィックソフトでサイズ変更やトリミングしてからアップロードしなくても、ダッシュボード上で編集できますし、トリミングやサイズ変更をキャンセルして、元のサイズに復元することも可能です。

まずは、WordPressのメディア機能から、画像ファイルの編集ページまでの手順を紹介します。

メディアライブラリから編集対象の画像を選択する

WordPressに保存されている画像は「メディア」機能で管理されています。「メディア」から「ライブラリ」ページを開いて、編集したい画像を選択しましょう。

画像のトリミングは、どのような画像でも同じ手順なので、自分のWordPressの環境から好きな画像を選択してください。

ここでは、以下のユニコーンの画像をサンプルとして使用します。

ライブラリから画像を1つ選択すると、「添付ファイルの詳細」ページが表示されます。左側に画像が表示され、その下に「画像を編集」ボタンが表示されます。このボタンをクリックしましょう。

これで画像の編集画面にきました。トリミングやサイズ変更はこの画面で行います。

画像のトリミング・サイズ変更

画像の一部分を取り出すことを、トリミングといいます。

先ほどの画像の編集画面の左側に表示されている画像の上でマウスをドラッグして、トリミングしたい範囲を選択します。

トリミング範囲が選択できたら、「トリミング」ボタンをクリックします。そうするとトリミング範囲の画像が表示されます。

選択した部分の画像が表示されました。

また、トリミングする時に予め縦横比を決めてからトリミングさせることも可能です。

この時は、トリミング範囲をドラッグする前に、サイドバーの「画像のトリミング」の「縦横比」を入力しておきます。

縦横比を予め決めて設定しておくことで、トリミング範囲をドラッグする時に縦横比が固定された状態になります。

最終的に、上記のようになりました。

目的のサイズにトリミング出来たら、「保存」ボタンをクリックしましょう。これで画像のトリミングは完了です。

また、ダッシュボードで変更したトリミングをキャンセルして、元のサイズの画像に復元させることも可能です。この場合は、「元の画像を復元」メニューから「画像を復元」ボタンをクリックするだけでOKです。

これで、トリミングした画像が元の大きさの画像に復元できました。

画像の回転

WordPressの画像編集機能にはトリミングだけでなく、画像の回転や反転をさせることができます。

まず、画像の回転機能から紹介します。

画像の「トリミング」ボタンの右に並んでいる2つのボタンをクリックすると、画像が回転します。左のボタンが「左に90度回転」右のボタンが「右に90度回転」させるものです。

画像を左に90度回転させたものが、下の画像です。

画像を右に90度回転させたものが、下の画像です。

画像の回転ボタンを連続でクリックすると、同じ方向に画像が90度ずつ繰り返し回転します。

画像の反転

画像の「上下反転」と「左右反転」も可能です。

画像の回転ボタンの右にある2つのボタンが、画像を反転させるボタンです。左のボタンが、「上下反転」右のボタンが「左右反転」です。

画像を上下反転させたものが、下の画像です。

画像を左右に反転させたものが、下の画像です。

画像の編集を「1つ戻す」と「1つ先に進める」

WordPressの画像編集画面では、画像のトリミングや回転、そして反転などの操作を1つ前の状態に戻したり、先へ進めたりする機能が備わっています。

操作の履歴は多段階に保存されているため、連続して前に戻したり、先へ進めたりすることが可能です。

操作を間違えて元に戻したい時や、戻した操作を先に進めたい時に有用な機能です。

編集を反映させる画像の種類を選択する

編集した画像の変更を適用させる画像タイプを選択することが可能です。選べるタイプは、以下の3つです。

・すべての画像サイズ
・サムネイル
・サムネイル以外の全サイズ

例えば、サムネイル画像は縦横比1対1にしたいが、他のサイズの画像はオリジナルと同じ縦横比の画像を使いたい時など、サムネイルと他のサイズの画像で、異なるサイズの画像を使い分けることが可能です。

この設定は、画像の編集を済ませて、保存ボタンをクリックする前に設定しておく必要があります。

 

まとめ

  • WordPressでは、ダッシュボード(管理画面)で画像のトリミングができる。
  • 縦横比を設定してトリミングを行うこともできる。
  • ダッシュボードでトリミングされた画像は、元のサイズの画像に復元できる。
LINEで送る
Pocket