WordPress でブログをやっていると画像のリサイズは必須ですよね。写真など多めに使うサイトですと、アイキャッチ画像やギャラリー画像をその度に制作しなければなりません。何回もやって慣れているので簡単かもしれませんが、もっと簡単に作業しましょう。
画像処理ソフトというと Photoshop が定番ですが、他にも Affinity Photo のマクロ機能を使っても同様な事が出来ます。一度設定しておけば、再現出来ますので是非チャレンジして下さい。そんな難しい手順ではありませんのでご活用下さい。
Photoshop はよく使います。しかし同じサイズの画像を使う機会は少ないので、アクション機能はたまにしか使いませんが、WordPress 記事投稿でアイキャッチ画像やギャラリー画像を頻繁に作成するので、覚えておくと手間が激減します。
Photoshop アクション機能 お役立ち
Adobe Photoshop で手順を説明して行きます。
①先ずアイキャッチ用の画像を用意しました。
・幅3648pixel 高さ2736pixel 解像度72pixel です。
上書き保存されますので、複製の画像で作業することをお勧めします。
これを例として 幅768pixel 高さ512pixel 解像度72pixel にリサイズします。
②アクション機能の設定をします。
アクション→4本棒のマークをクイックすると→新規アクションが現れます。クイックします。②を選択すると新規アクションが現れます。
新規アクションの登録で作業を自動化させます。
新規アクションの登録です。わかり易い名前をつけて登録します。ここでは「アイキャッチ 768」にしています。768は画像の横幅を表しています。
アイキャッチ 768が登録されました。
①の画像を呼び込みます。
・手順を決めて置きます。
手順が決まったら、赤い●を押すと次の作業から記録が始まります。
手順１ 画像調整
トーンカーブ・色彩など明暗が必要な場合は調整して「OK」ボタンを押します。続けて、記録されて行きます。
手順２ 解像度
リサイズ・画像解像度を調整します。
リサイズは幅768pixelに、解像度72pixelにします。「OK」ボタンを押します。
手順３ 保存
保存します。
上書き保存で問題ない時は保存の後停止ボタンを押して下さい。
やり直しも記録されてしまいますので、注意して下さい。
手順４ 記録設定完了
保存が終わったら、これで「アイキャッチ 768」は次回から一連の操作が自動化されます。
手順５ 次回の使い方
次の作業をする場合、アクションの「アイキャッチ 768」をアクティブにして選択します。
下段にある►スタートボタンを押すと手順１～３が実行されます。
手順３を終えれば完成です。
アクション記録
下の画像左のように記録された操作が表示されています。
右の画像は次回のアクションのスタート再開位置です。
③保存が終わったら、処理した画像をもう一度読み込みます。
リサイズで幅768pixelにしましたが、アイキャッチ画像ですと当サイトでは縦512pixelです。
幅768pixel 高さ512pixel 解像度72pixel に設定してあるのですが、イメージ→解像度で見ると、幅768pixel は合っているのですが高さが512pixel になっていない場合があります。これは元画像の記録画素数に依ります。
デジカメの標準サイズですと良いのですが縦のサイズが大きかった場合は長方形選択ツールを使って切り抜き作業をします。
高さ512pixel になるよう上下を切り抜きます。縦横比を固定のマークを外すと数値を入れることはできますが、画像が変形してしまいますので、長方形選択ツールを使って調整します。何故横幅で指定したかと言うと、横幅を切り落とすと縦幅もまた調整しなくてはならないからです。
この間繰り返し切り抜きしたり、やり直したりすると思いますが、納得いくまでは上書き保存しないで下さい。Jpeg なので保存を繰り返すと画像が劣化します。保存しなければ「編集→取り消し」で元に戻ります。
次にまた同じアイキャッチを作る場合、画像を読み込み上の右画像の「アイキャッチ 768」を選択してスタートボタンを押せば、瞬時に出来上がります。
ギャラリー画像を作る
ギャラリー画像は中サイズ 300px 300px で説明します。
元になる画像を長方形選択ツールを使って、shift キーを押しながら真四角形に画像のメインを切り抜きます。先ずこれだけです。
次に、上で説明した①②の新規アクションの登録です。「ギャラリー 300」とでも名前を付けて登録します。
③の手順と同じです。幅300pixel 高さ300pixel 解像度72pixel にリサイズします。
アクションの登録にトーンカーブや自動コントラストの作業を入れるのも自在です。しかし余程の画像でない限りリサイズだけで大丈夫でしょう。文字ベースの png はトーンカーブで暗部を出してやると見やすいです。
Affinity Photo のマクロ機能を使ってもいいでしょう。Affinity Photo は無料版を試用してみましたが、機能が分割されており直感的に作業できなかったのですが、習慣になれば難しいものでも無いでしょう。
1枚であれば Mac ならプレビュー→ツール→サイズを調整でもリサイズ・解像度変更が出来ます。
アクション機能の無い画像処理ソフト
無料で使えるGIMPですが、アクション機能はありません。
Photoshop Elements もAdobeの安価なソフトですが、photoshopとは別物です。
残念ですが Photoshop Elements にはアクション機能は搭載されていません。価格面から機能制限があるので、「ちょっと手間だが」が許容できる人にはお勧めです。追加料金なく、ずっと使い続けることができます。標準販売価格 16,000円位
Elementsで制限される機能
①アクションを作ることができない
②トーンカーブを使うことができない
③印刷用のカラーモード「CMYK」を使うことができない
④ベクトルデータを取り扱うことができない
AdobeCCコンプリートプランは、年間プラン(一括払い)72,336円/年 でちょっと高めですが、20以上のクリエイティブ作業に対応したソフトを利用できるのも魅力です。何と言っても機能的に連携されており他には何も要りません。
下記の広告はアプリと講座のスクールです。学割ですが一般の方もスクール生徒になりますので、20以上のアプリが PC２台（同人）ダウンロードして使えます。adobe 認定のスクールです。
注意点：カテゴリー Macの道 Adobeマスター講座に更新時の注意があります。寄って見て下さい。
Adobeマスター講座
デジハリONLINE Adobeマスター講座 https://online.dhw.co.jp/course/adobe/ カテゴリーはMacになっていますが、Windowsでも同じです。 つい最近までこのような反則級[…]
AdobeCC 7日の体験版もあります。試してみてから検討するのも良いでしょう。
お試し体験版はこちらから
AdobeCC（コンプリートプラン）を安く購入する方法として、デジハリのAdobeマスター講座がおススメです。
おわりに
WordPress も慣れてくると、あれもしたい、これも直してみたい、とサイトの体裁が気になってきます。
Photoshopも多機能ですので一紙面で説明出来ませんが、WordPress投稿記事装飾で便利そうな一機能を解説しました。分かりやすいようには解説していますが参考にして下さい。
THE THOR メインビジュアル画像新しく作り直してみました。
THE THOR メインビジュアル設定 今回はTHE THOR メインビジュアル画像新しく作り直してみました。 皆さんも試行錯誤しながら制作していると思います。 何と言ってもブログのTOP画面ですからね。オシャレに作りたいものです。[…]
WordPress アイキャッチ画像上手に作りたい
投稿画面の顔であるアイキャッチ画像、上手に作って綺麗に表示させたい。WordPress開設時には誰もが思う事ですね。長くサイト運営している先駆者たちは知識と技能を持っていますが、初心者や中級者には難解なところがあります。まずWord[…]
私も気が付いた時発信して行きたいと思います。
また来訪して下さい。
