> 記事 > WordPress ウェブ制作 パース紹介 マメ知識 > WordPress上で画像を編集する方法(縮小・トリミング)

WordPress上で画像を編集する方法(縮小・トリミング)

2016.06.23.(Thu)Masahiro Natori By.Masahiro Natori

こんにちは、masaです。

本日は、WordPress上で画像を編集する方法について書いてみたいと思います。

複数のカメラなどで撮影された写真を、WordPress上にアップロードしているとそれぞれ撮影されたカメラによって写真のサイズが異なっている場合があります。これを指定したサイズに揃える、ということをやってみたいと思います。

Sponsored Link

画像のアップロード


WordPressのブログなどで画像を使いたい場合、WordPressへ画像をアップロードしてあげる必要があります。WordPressへ画像のアップロードは簡単にドラッグ&ドロップで出来るようになっています。下の図のように、左のWordPress画面はメディアライブラリを開き、右側のエクスプローラー(ファイルが表示される画面、MacならFinder)からアップロードしたいファイルをクリックしそのままずるずると、WordPressの画面に引きずっていくと、WordPressがそれをアップロードファイルとして受け入れてくれます。

medialibrary_upload

画像のスケールを変更する。


メディアライブラリにアップロードした画像ファイルを縮小する方法です。
実験台に使用するのはこの写真。South Perthのフェリー乗り場からの眺めですね。パースとは、本当に絵になる街だと思います。

South Perthのフェリー乗り場からの眺め

もとの画像サイズは1600×1200なのですが、この写真を縮小し 640×480 というサイズにしてみたいと思います。
ちなみに、1600×1200と640×480は縦横が同じ割合になっています。

(1)左下の画像を編集ボタンを押します。

rapture_20160623001123
このような、編集画面が出てきます。
この画面で、
・イメージを切り出す
・90度回転
・水平方向に反転
・垂直方向に反転
・縮尺変更
などを行うことができます。

今回は縦横が同じ場合ですので、右上の「画像縮尺の変更」部分で調整をおこないます。現在「1600」と表示されているのが、この画像の横方向のピクセル(ドット)数で、「1200」と表示されているのが、縦方向のピクセル数になります。この「1600」部分をマウスでクリックし、「640」に書き換えてみてください。

rapture_20160623001654
そうすると、このように、右側の「1200」だった部分が、「480」に自動的に計算、変更されると思います。このような状態になったら「縮尺変更」ボタンを押します。
一瞬ブラウザの画面が白くなりますが、これで画像の縮尺が変更されました。この時点で画像も保存されています。

rapture_20160623001844
終了するには、右上のXボタンを押せばよいです。

画像の一部切り出し


今回はもう1ステップ、この画像を、640×425 というサイズに変更してみます。横のピクセル数は変えずに、縦のピクセル数を変える感じです。縦のピクセル数がもともと480なので、これを55ピクセル分(480-425=55)縮めるという感じになります。

メディアライブラリを開き、先ほど640×480に変換した画像をクリックし、もう一度画像を編集ボタンを押します。(この写真は、先ほど拡大縮小した直後のものなので「画像を保存しました」と表示されていますが、気にしないでください。)

rapture_20160623001844
今回の場合は画像縮尺部分で、「480」を「425」に変えてしまうと横のピクセル数が「567」になってしまいます。縮尺変更では、縦横同じ割合での縮小にしか対応していませんので、ご注意ください。(ちなみに既存の画像を拡大することも出来ません)

画像の切り出しをおこなうときには、左上に表示されている画像を直接左クリックし、クリックしたままマウスを動かします。そうすると、画像の中に範囲を指定することができます。(明るい部分)

rapture_20160623003019
【選択した範囲を動かすには】
この選択された範囲にマウスを近づけると、マウスが4方向矢印アイコンに変わります。この状態でマウスをクリックし、クリックしたままマウスを動かすことで、範囲の大きさを変えずに動かすこともできます。

【選択を広げたり縮めたりするには】
左上、上中央、右上
左中央   右中央
左下 下中央 右下
にある□マークをクリックして、動かすことで範囲を広げたり縮めたりすることも出来ます。

マウスで選択範囲の大きさを変えると、右側中央の「画像のトリミング」と表示されている部分の選択範囲のサイズを表す数値が変わっていきます。
今回は640×425にするので、この値になるまでマウスでジリジリと動かしても良いのですが、直接この数値を書き換えてしまうことで、選択範囲を指定することも可能です。

rapture_20160623004129
このように、640×480から、640×425にする場合、横はいっぱいいっぱいで、縦が切り取られる感じになります。もちろん、この範囲選択をもう少し上や下に動かすことで、切り出される部分を変更することも可能です。

この状態で、左上のrapture_20160623004359
ボタンを押すと、指定のサイズでトリミングが実行されます。

rapture_20160623004451
トリミングが実行されました。切り出されているのがわかりますか?
これで保存ボタンを押すと、画像が保存されます。

rapture_20160623004612

まとめ


今回はWordPress上で画像を編集する方法について書いてみました。最近はWordPressもどんどん高機能になっていて、こんな画像の編集までWordPress上で出来るようになってしまいました。実際に使い勝手もそれほど悪くなく、私としてもトリミングや縮小程度の編集であれば、この画像編集機能で十分だな、と思うくらいです。

難点としては、厳密に640×425にしたいのに、なぜか640×426や、639×426など、指定したものと違うピクセル数の画像が出来上がってしまうことが時々あったりします。これは・・バグなのかもしれませんね。

画像の編集については、私のような年中画像加工をしている者にとってはWeb上でゴチャゴチャやるよりは、アップロードする前に画像編集用のツールを利用して、キチンと加工してからアップロードするのが簡単で手間が掛からないのですが、やはり初心者の方にいきなり「この画像編集ツールをインストールして」というのはハードルが高い、というのも分かります。

実際、画像の編集はなかなかディープな世界なので、画像編集ツールって、多くの場合、やたらボタンやメニューがいっぱいあって、素人には「何が何やら」という物も多いんですよね。もちろん「拡大縮小だけ」みたいに特化したシンプルなツールもあるんですけどね。

なので、Web上で簡単に使えるこの画像編集ツールはかゆいところに手が届く、便利なツールじゃないかと思っています。ブログに複数の写真を載せる場合、大きさが揃っているのといないのとでは、印象がだいぶ違います。これまで「画像加工は難しい」と思われていた方も是非この画像編集機能に挑戦してみてください。きっと出来ると思います。

今回使用したパースの写真で実際に試してみたい、という方は、
こちらを右クリックして「名前をつけてリンク先保存」して試してみてください。

Masahiro Natori

Masahiro Natori
こんにちはMasaです。39歳の時に16年勤めた会社を辞め、2013年4月に家族で日本からパースに引っ越してきました。2013年6月よりGITSに勤務。2014年1月にGITSのサポートでProgrammerとして457ビザを取得。 趣味は音楽を聴くことと、部屋のレイアウトを変えること、ドライブすること。
    関連する記事は見当たりません。
  • facebook
  • twitter