画像の編集方法

「写真を小さくしたい」

「写真のある一箇所を切り取りたい(トリミング)」

など、wordpressにはちょっとした画像編集機能があります。

こちらではwordpressの管理画面で画像を編集する方法をご紹介します。
お使いのwordpressのバージョンによっては操作画面のデザインが異なる場合があります。
基本的な流れはほぼ同じなので、よろしければ参考にご覧ください。

※ブラウザによって作業が上手くいかない可能性があります。
私の場合はブラウザ「opera」で作業して上手く反映されないことがありました。
こちらの操作はIEで操作したものをご紹介します。

写真を追加

まずは左メニューの「メディア」→「新規追加」から写真をアップロードします。

2323

 

以下の画面で写真を直接ドロップするか、「ファイルを選択」から写真を選んでアップロードします。

 

ada

ライブラリから編集する画像を選択

写真をアップロードしたら、「ライブラリ」から編集する写真を選択します。
クリック後、「画像を編集」のボタンがあるので押すと編集画面へ移動します。

ScreenClip

ScreenClip

 

 

※ポイント

ブログを新規投稿する際に写真を貼り付ける時「メディアを追加」を押しますが、
写真を選択後に右側にある「画像を編集」からも編集画面へ移動することが出来ます。

 

ScreenClip

 

 編集画面で画像を加工する。

こちらの編集画面では簡単な画像の編集ができます。

上部に配置されているアイコンから編集出来ます。
編集が終わったら下の『保存』ボタンを押します。

ScreenClip

画像のサイズを縮小する

画面右側にある「画像旬尺の変更」からサイズを調整できます。(画面が違う人は「画像の拡大縮小」)
こちらでは元の画像を縦横比を変えずにサイズの縮小が出来ます。
なおサイズの拡大は出来ないので縮小したい時のみ利用してください。

サイズを変更したら『縮尺変更』あるいは『伸縮』をクリックして保存します。

ScreenClip

写真をトリミング

トリミング(切り取り)したい写真の場所を直接クリックしてドラックします。
選択された範囲が出来ますので、右上の一番左のマークをクリックし、切り取りを行ないます。

切り取りしたら『保存』を押します。

 

ScreenClip

 

その他のトリミング設定

・選択範囲

トリミングの際にサイズを指定して選択範囲を作成することも可能です。
右側の選択範囲で数値を入力することで任意のサイズを作成できます。

・縦横比

縦横比では比率を保持したまま選択範囲を作成できます。

・サムネイル設定

サムネイル設定ではトリミングした画像をどの画像と置き換えるかの設定をします。
ここは少しややこしいので特に指定がなければそのままでOKです。
画像をアップロードすると「大」「中」「サムネイル」の3つのサイズで画像が自動的に作成されます。
その中の画像を、新しくトリミングした画像と置き換えるかについて設定できます。

 

tewt

 

※ポイント:編集後の写真

「保存」を押して編集したものを保存します。
ライブラリで見ると編集後の写真になっており、元々の画像は表示されなくなります。
少しややこしいことで元の画像はファイルとしては残っていますが、記事に貼り付けることが出来るのは新しく作成された画像だけになります。

元の画像も使用されたい場合は元画像のファイル名を変えて再度アップロードすると、メディアを選択する際に分かりやすくなります。

 

上手くいかない場合(アイキャッチ画像)

ブログやその他(カタログなど)を投稿される際に「アイキャッチ画像を設定」する場合があります。
そのようなケースで画像を設定する際に、任意のトリミングアイキャッチ画像が上手く反映されないことがありました。

そんな時に筆者が行なった投稿方法ですが、上手くいかない際は以下を参考にしてください。

カタログを投稿したい

今回はカタログを例として説明します。
結論としてはアイキャッチ用写真用と2枚の写真を作成してしまいます。
以下のような写真の場合イスの部分をサムネイル(アイキャッチ画像)とし、画像はそのまま貼り付けたい場合です。

a0002_008353_m

 

元の画像をアップロードし、トリミング機能を利用してイスの部分を切り取り保存します。
※元々の画像が大きい場合はサムネイルのサイズにある程度適するようにトリミング前に元画像を縮小する必要があります。

 

ScreenClip

 

画像を保存したら、その写真をパソコンへ一旦保存します。
そしてパソコンに保存した編集後のサムネイル写真をアップロードしてください。
ScreenClip
さらに元の写真を、こちらも名前を変えて再度アップロードします。
少々面倒ですが合計3回写真をアップロードすることになります。
※最初にUPした写真は削除してしまっても構いません。
ScreenClip
このように一度パソコンに取り込んでアイキャッチ用と表示する写真用と2枚分けてしまいます。
その後、この2枚を使ってカタログを投稿します。
aslud

 

uuuu

 

写真の被写体がわざと右や左に配置されている場合は普通にアイキャッチを設定するとはみ出てしまうことがあります。
そんな時にサムネイルの切り取りを調整する際はトリミング機能を利用して画像を作成します。
アイキャッチ画像が絡む投稿で上手くいかない時は参考にしてください。

 

注意点

新しいバージョンでは編集を行なった後にすぐ写真を投稿画面へ追加できるのですが、
以前のバージョンでは、編集画面が新しいウィンドウが開いてしまってそのままブログ貼り付け出来ない場合がありました。
そうゆう時は一度記事を保存して再度編集画面へ進み、加工した写真を貼り付けて投稿してみると良いです。

今回ご紹介した画像の編集は簡単な写真編集しか出来ませんが、以外と便利で自分も使うことが多いです。
写真編集の際はお試し下さい。

 

 

 

» カテゴリー

» 月間アーカイブ

PAGE TOP