WordPressの「メディアを編集」機能だけで画像を所定のサイズにトリミングする方法

前回の記事でWordPressの「メディアを編集」はミニマムな機能しか実装されてないので使い勝手が悪いと解説しましたが、それでも画像サイズの変更(リサイズ&トリミング)に限定すれば、実務的には使えるレベルかなと思います。

例えば需要としてありがちな以下のトリミングを主要なフリーの画像編集ソフトで試してみたところ、その機能自体が無かったり、あっても自由度が低くて意図した位置や範囲でトリミングができない、もしくは操作が煩雑でとても使いづらいという印象でした。

デジカメやスマートフォンで撮影した高解像度の写真を元に「任意のエリア」を「所定のサイズ」にトリミングをする

↓画像で説明すると以下のような感じですね。

トリミングのイメージ

もちろん、Photoshop等の高機能なソフトがあれば簡単に出来ることですが、全てのクライアントが得られる環境ではないので、ここではWordPress標準の「メディアの編集」機能だけで上記トリミング例を実現する方法について解説したいと思います。

WordPressの設計や仕様にもよりますが、サイズ指定の画像をカスタムフィールドに登録するようなケースでは、自動生成の画像だと構図や画質に無理があって、手作業でないと対応できない場合もありますので覚えておいて損はないかと思います。

※なおここでは以下を前提に解説させて頂きます

  1. 元画像はデジカメで撮影した4176px x 2784pxの写真
  2. 「1.」の画像を任意のエリアで700px x 250pxの指定サイズにトリミング

目次

  1. 元画像を登録する
  2. 指定の比率でトリミングする
  3. 指定のピクセルにリサイズする
  4. まとめ

1.元画像を登録する

管理画面の【メディア→新規追加】をクリックします。

「メディアのアップロード」画面の「ファイルを選択」ボタンをクリックします。

トリミングしたい画像を選択して「開く」ボタンをクリックします。

2.指定の比率でトリミングする

切り替わった「メディアのアップロード」画面でアップロードした画像右端の「編集」をクリックします。

「メディアを編集」画面の画像下「画像を編集」ボタンをクリックします。

右側メニューの「画像縮尺の変更」ボックスには元画像のピクセル値が表示されていますが、こちらはひとまず置いといてその下段「画像のトリミング」の「縦横比:」に切り抜きたいピクセル値、横「700」と縦「250」を入力します。

左上のサムネイル内をドラッグすると「700:250」の比率で切り抜く範囲が表示されますので、コーナーハンドルや選択範囲内の移動ツールを使ってトリミングしたい構図を決めます。

構図が決まったら左上の「トリミング」ボタンをクリックして切り抜きます。

さらに画像下の「保存」ボタンをクリックしてトリミングした画像を一旦保存します。

3.指定のピクセル値にリサイズする

もう一度、画像下の「画像を編集」ボタンをクリックします。

右側メニュー「画像縮尺の変更」ボックスの「新規サイズ:」で左の横幅に「700」と入力すると自動で縦に「250」と出力されますので、この状態で「縮尺変更」ボタンをクリックします。
これで700ピクセル x 250ピクセルへのトリミング作業が完了です。

4.まとめ

いかがだったでしょうか?手順としてはまず最終的に得たいサイズ(縦横のピクセル数)をトリミングの「比率」と指定して切り抜き、その比率を維持したままリサイズをすれば得たい画像が生成出来るということですね。

Photoshopとかなら一発でできる操作ですが、いきなりプロ向けのソフトはハードルが高い、数は多くないけど「できればOK」程度の需要なら画像サイズ変更手段の一つとして検討する価値はあるかなと思います。

Share!