WordPress ギャラリー画像を作る

スクリーンショット 2023-10-02 8.29.52.png

WordPress でブログをやっていると画像のリサイズは必須ですよね。写真など多めに使うサイトですと、アイキャッチ画像やギャラリー画像をその度に制作しなければなりません。何回もやって慣れているので簡単かもしれませんが、もっと簡単に作業しましょう。

画像処理ソフトというと Photoshop が定番ですが、他にも Affinity Photo のマクロ機能を使っても同様な事が出来ます。一度設定しておけば、再現出来ますので是非チャレンジして下さい。そんな難しい手順ではありませんのでご活用下さい。

Photoshop はよく使うのですが、しかし同じサイズの画像を使う機会は少ないので、アクション機能はたまにしか使いません。WordPress 記事投稿でアイキャッチ画像やギャラリー画像を頻繁に作成するので、何方かのお役に立てればと思い立ちました。

Photoshop アクション機能 お役立ち

①先ずアイキャッチ用の画像を用意しました。
 幅3648pixel 高さ2736pixel 解像度72pixel です。
②アクション機能の設定をします。

アクション手順の01.png

手順は Photoshop を用いています。参考にして下さい。
アクション→4本棒のマークをクイックすると→新規アクションが現れます。クイックします。②を選択します。新規アクションが現れます。

アクション手順の02.png

新規アクションの登録です。わかり易い名前をつけて登録します。ここでは「アイキャッチ 768」にしています。768は画像の横幅を表しています。
アイキャッチ 768が登録されました。

③①の画像を呼び込みます。
 赤いを押すと次の作業から記録が始まります。
 手順を決めて置きます。
 ここでは、リサイズ・画像解像度・保存までです。
 やり直しも記録されてしまいますので、注意して下さい。

アクション手順の03.png

 これを例として 幅768pixel 高さ512pixel 解像度96pixel にリサイズします。

 別名で保存します。別名は元画像を後でやり直せるように残しておく為です。

アクション手順の05.png

 アクションの□の停止ボタンを押して記録は終了です。

下が出来上がりです。

アクション手順の07.jpg

アクション記録

下の画像左のように記録された操作が表示されています。
右の画像は次回のアクションのスタート再開位置です。

アクション手順の06.png

④保存が終わったら、処理した画像をもう一度読み込みます。
 幅768pixel 高さ512pixel 解像度96pixel に設定してあるのですが、イメージ→解像度で見ると、幅768pixel は合っているのですが高さが512pixel になっていない場合があります。これは元画像の記録画素数に依ります。
記録画素数に依る元画像サイズが合っていない場合、長方形選択ツールを使って、高さ512pixel になるよう上下を切り抜きます。縦横比を固定のマークを外すと数値を入れることはできますが、画像が変形してしまいますので、長方形選択ツールを使って調整します。何故横幅で指定したかと言うと、横幅を切り落とすと縦幅もまた調整しなくてはならないからです。

この間繰り返し切り抜きしたり、やり直したりすると思いますが、納得いくまでは上書き保存しないで下さい。Jpeg なので保存を繰り返すと画像が劣化します。

次にまた同じアイキャッチを作る場合、画像を読み込み上の右画像の「アイキャッチ 768」を選択してスタートボタンを押せば、瞬時に出来上がります。

ギャラリー画像を作る

ギャラリー画像は中サイズ 300px 300px で説明します。
元になる画像を長方形選択ツールを使って、shift キーを押しながら真四角形に画像のメインを切り抜きます。先ずこれだけです。
次に、上で説明した①②の新規アクションの登録です。「ギャラリー 300」とでも名前を付けて登録します。
③の手順と同じです。幅300pixel 高さ300pixel 解像度96pixel にリサイズします。
アクションの登録にトーンカーブや自動コントラストの作業を入れるのも自在です。しかし余程の画像でない限りリサイズだけで大丈夫でしょう。文字ベースの png はトーンカーブで暗部を出してやると見やすいです。

Affinity Photo のマクロ機能を使ってもいいでしょう。Affinity Photo は無料版を試用してみましたが、機能が分割されており直感的に作業できなかったのですが、習慣になれば難しいものでも無いでしょう。

1枚であれば Mac ならプレビュー→ツール→サイズを調整でもリサイズ・解像度変更が出来ます。

Photoshop Elements 機能制限

残念ですが Photoshop Elements にはアクション機能は搭載されていません。価格面から機能制限があるので、「ちょっと手間だが」が許容できる人にはお勧めです。追加料金なく、ずっと使い続けることができます。標準販売価格 16,000円位

①アクションを作ることができない
②トーンカーブを使うことができない
③印刷用のカラーモード「CMYK」を使うことができない
④ベクトルデータを取り扱うことができない

AdobeCCコンプリートプランは、年間プラン(一括払い)72,336円/年 でちょっと高めですが、20以上のクリエイティブ作業に対応したソフトを利用できるのも魅力です。何と言っても機能的に連携されており他には何も要りません。

上記の広告はアプリと講座のスクールです。学割ですが一般の方もスクール生徒になりますので、20以上のアプリが PC2台(同人)ダウンロードして使えます。adobe 認定のスクールです。
注意点:カテゴリー 
Macの道 Adobeマスター講座に更新時の注意があります。寄って見て下さい。

AdobeCC 7日の体験版もあります。試してみてから検討するのも良いでしょう。
お試し体験版はこちらから
https://www.adobe.com/jp/creativecloud.html?sdid=19SCDRPS&mv=search&ef_id=Cj0KCQiA2-2eBhClARIsAGLQ2Rn9Q8CKXNjBVuCau7qF8VTA0AQPccKq_LzsvgEBGErv8kZMscNQL18aApHzEALw_wcB:G:s&s_kwcid=AL!3085!3!476007603078!e!!g!!adobe%20cc%20体験%20版!739872377!102573497214&gclid=Cj0KCQiA2-2eBhClARIsAGLQ2Rn9Q8CKXNjBVuCau7qF8VTA0AQPccKq_LzsvgEBGErv8kZMscNQL18aApHzEALw_wcB

おわりに
WordPress も慣れてくると、あれもしたい、これも直してみたい、とサイトの体裁が気になってきます。私も気が付いた時発信して行きたいと思います。

また来訪して下さい。

 

最新情報をチェックしよう!