1. 記事・ページの投稿
  2. 画像を編集する方法

画像を編集する方法

2011/5/1

WordPressの投稿画面では、挿入した画像を編集する機能があります。画像編集ソフトのような高度なことはできませんが、サイズ変更やトリミング程度の簡単な編集なら、投稿画面で実行可能です。

WordPressで作成したブログに、写真などのファイルサイズが大きな画像を大量に挿入すると、訪問者がなかなかページを開けなかったりサーバーの容量を圧迫するなどの問題が発生します。
これらを避けるための簡単な方法として、画像のサイズ変更したりトリミング(一部を切り取る)があります。

画像を編集するには

これからご紹介していく画像の編集をするには、画像挿入画面の【画像を編集】ボタンをクリックします。
edit-image

WordPressの画像編集機能でできること

WordPressの画像編集機能でできることは、下記のとおりです。
画像編集機能

  1. 画像の拡大縮小
  2. トリミング
  3. サムネイル設定
  4. 反時計回りに回転
  5. 時計回りに回転
  6. 垂直方向に反転
  7. 水平方向に反転

これらの機能について実例を挙げながらご紹介していきます。
そのサンプルとして、少し大きめの下記画像を用意しました。
edit-image-sample

画像の挿入方法について

画像の挿入について、くわしくは下記ページを参考にしてください。

画像の拡大縮小

画像編集画面の右側にある「画像の拡大縮小」をクリックすると、下のように画像の縦・横サイズの入力欄が表示されます。
画像の拡大縮小

画像の拡大縮小は、元の画像サイズの縦横比が保持されます。

例えば、今回サンプルとして挿入している画像は元サイズが481×360ですが、この横のサイズを200と入力すると縦のサイズが自動的に267へと変更されました。
edit-image-sample

トリミング

トリミングでは、画像の一分を切り取ることができます。
必要な部分を囲むようにしてマウスで選択(ドラッグ)して、画面左上の【トリミング】ボタンをクリックします。
トリミング

トリミングができたら、【保存】ボタンをクリックして記事内に挿入します。サンプル画像は下のように切り抜かれました。

キーボードショートカット

画像のトリミング機能には、以下のキーボードショートカットが利用できます。

  • 矢印: 10px ずつ移動
  • Shift + 矢印: 1px ずつ移動
  • Ctrl + 矢印: 10px ずつサイズ変更
  • Ctrl + シフト + 矢印: 1px ずつサイズ変更
  • シフト + ドラッグ: 縦横比を固定

縦横比の指定

トリミングする部分の縦横比を指定し、ドラッグ中にシフトキーを押しておくことで、比率を固定できます。値は1:1 (正方形)、4:3、16:9 などに指定可能です。トリミングするエリアを選択済みの場合、縦横比を指定すればすぐに適用されます。

その他の画像編集機能

サムネイル設定

サムネイル画像は元サイズの画像と異なるトリミングをすることができます。

たとえば正方形にしたり、見やすくするために画像の一部のみを含めたりといったことが可能です。ここではすべてのサイズの画像を変更するか、サムネイル画像のみを変更するか選択できます。

回転・反転機能

挿入した画像を回転・反転させることができます。

おすすめの書籍

小さなお店&会社の WordPress超入門

WordPressでビジネスサイトを作るために必要な、基本的な知識が理解できる“超”入門書。Web制作に必要なHTML・CSS・PHPなどの専門知識がなくても読み進められる1冊です。SEO(検索エンジン最適化)やセキュリティの対策についても解説されています。

おすすめのテーマ

WordPressテーマ「NEXTAGE (tcd021)」

WordPressテーマ「LAW」

コーポレートサイト(企業サイト)向けのテーマ。第一印象で信頼性や専門性を的確にアピールし、Webサイトのゴールである「お問い合わせ」まで自然に繋がっていく“導線”にこだわったテンプレートです。

カテゴリー

ビジネスサイトを作りたいあなたに

おすすめのテーマ、あります。