アイキャッチ画像の制作
WordPress メインビジュアル画像、アイキャッチ画像、サイズや解像度で悩みますよね。アイキャッチ画像の場合はホバーエフェクトで、画像が見切れてしまうことがありテキストなどの配置に気を使います。
メインビジュアル画像、アイキャッチ画像の作り方など結構あるのですが、これで「決まり」と言ったものが無いので試行錯誤して作ってみました。テーマなどによってサイズがマチマチかも知れませんが参考までに。
またWordpressテーマデモサイトからイメージをDLしてサイズ、解像度を調べるのも有効です。
サイズが大きかったり解像度が大きかったりすると、容量が大きくなるのはご承知だと思いますが、反対に小さかったり、解像度が低かったりすると見た目が悪くなります。
当初Wordpress開設時、私も試行錯誤しました。完全ではありませんが、ほぼ満足したので、初心者の方、いまだに悩んでいる方のお役に立てればと思います。
このサイトはTHE THORテーマデモ3です。
メインビジュアル画像はホバーエフェクトをかけて無いと思いますので、頻繁に作成するアイキャッチ画像をメインに説明します。
Adobe Photoshopを使用した手順になりますが、レイヤー機能を備えた画像処理ソフトであれば同様な操作が出来ます。
①メインビジュアル画像
まず元画像をリサイズします。pixelをpxに言い換えて説明します。
解像度72px サイズを幅1280px×高さ513pxにリサイズ変更して下さい。解像度が先です。
サイズが合わない場合上下左右バランスをとって切り抜くと良いでしょう。きっちりサイズが切り抜かれたら、名前をつけて.jpegで保存です。保存した後であまり補正・再修正しないで下さいね。JPEGは非可逆圧縮なので保存を繰り返すことで画像が劣化してしまいます。
②アイキャッチ画像
元画像を解像度72px サイズを幅768px×高さ512pxにリサイズ変更して下さい。これも解像度が先です。名前をつけて.jpegで保存です。
これで表示させる元の画像が出来ました。
これからホバーエフェクトで見切り範囲内に画像・テキストを配置するレイヤーの制作手順に入ります。
アイキャッチ画像のレイヤー（マスク）
まず先ほど「アイキャッチ画像」解像度72px 幅768px/高さ512px を制作しましたが、
③画像処理ソフトで新規に、解像度72px 幅768px/高さ512pxのレイヤーを作ります。レイヤーパレットでレイヤーの複製を作ります。元のレイヤーは背景色があるので削除してしまいます。背景が透明になったと思います。スポイトツールで青系（赤系でも良いです）選択して、レイヤーを塗り潰しツールで塗り潰します。次にパレットから不透明度と言うスライダーがあるので20～25パーセント位で透明度を下げます。
名前をマスク1で保存形式はPNGで保存します。レイヤーは1枚です。
④次に先程と同じく新規に、解像度72px 幅681px/高さ454pxのレイヤーを作ります。レイヤーパレットでレイヤーの複製を作ります。元のレイヤーは背景色があるので削除してしまいます。手順は同じです、塗り潰しは暗色（反対色）を選ぶと良いでしょう。後で切り抜きますので透明度はこのまま。これも名前をマスク2でPNGで保存します。
さて、2つのマスクが出来ました。
まず新たに③の画像を呼び込みます。次に④の画像を呼び込みます。上部にマスク1とマスク2が表示されています。
マスク2を「レイヤーを複製」で保存先をマスク1に指定します。
マスク1を表示させると、マスク2が重なっているのが確認できます。レイヤーマスク2を確認して移動ツールで真ん中に設置します。マスク2をレイヤーパレットでロック（鍵のあるマーク）した方がやり易いでしょう。レイヤーパレットのレイヤー1を選択しマスク2の範囲をツールパレットの「長方形選択ツール」で選択、削除（delete）してしまいます。レイヤー1の目玉マークをクイックすると非表示になり、透明になっている筈です。
これでマスク2は要らなくなりました。レイヤーパレットからロックを外し削除します。複製レイヤーなので元のファイルは残っています。レイヤーは1枚です。上書き保存でPNGです。マスク1は捨てないで下さいね。こちらが必要になるレイヤーです。
と、面倒だな、もっと簡単に、そう思ったら、私のGoogleドライブにファイルが入っています。こちらから完成レイヤーをダウンロード出来ます。Googleアカウントが必要です。ご自分のアカウントまたは新規アカウントでどうぞ。右クイックでダウンロードできます。
https://drive.google.com/drive/folders/1x1AjRtfVglh7QbMOnyuvnBkj1ISeOptL?usp=sharing
無料ですからご自由にどうぞ。DL出来ない場合はお問い合わせからご連絡下さい。ファイルを添付してお送りします。ファイルサイズは8KBです。
マスクの使い方
さて、長い解説になりましたが制作したマスク1の使い方の説明です。
まず、元となる②のお気に入りの画像（ここでは「TEST用画像」です）をPhotoshopで呼び込みます。
次に③で作った処理ずみのレイヤー（マスク1）（768pxマスクとなっています）を呼び込みます。
①～順番に手順して行きます。
④で「TEST用画像.png」を保存先に指定してOKです。
⑤に768pxマスクレイヤーが呼び込まれました。「TEST用画像.png」のレイヤーを表示させると「768pxマスク」が重なっています。念のためレイヤー1のコピーはロックして置きます。
マスク1の範囲内にアイテムを配置します。
アイテムの配置が決まったら、レイヤーパレットからレイヤー1のコピーをロックを外して削除し、レイヤーパレットのアイテムが入ったレイヤーを全て統合して出来上がりです。
上手く行ったでしょうか。
今後手順を覚えておいてレイヤーを工夫して他の画像に応用して下さい。
補足ですが、記事中に挿入する画像は、幅480px 解像度72px が適度な大きさと思います。
おわりに
記事の入力はiText Expressで体裁を整えています。このままWordpress新規記事にコピー＆ペーストしてしまいます。
iText ExpressはRTFDに対応しているので画像を含めた文書ファイルを作成できるので便利ですよ。
Mac、Windowsの方検索してDLして試用してみてはいかがですか。無料です。
詳しくは「Wordpress 便利な記事作成」で紹介しています、寄り道してみて下さい。
以上の記事の制作画像はAdobe PhotoshopとIllustratorを使用して制作しました。
Adobe（アドビ）マスター講座ですが、Adobe CCが学べて、アプリケーションも正規版です。お安く手に入るので、まだお持ちでない方検討してみては如何でしょう。
Adobeマスター講座
安く導入する方法として、ご紹介してきましたが残念ですが、当サイトでの ASP は2024/08/23で終了しました。
ご愛顧有り難うございました。再開されるようでしたら当サイトで再度紹介したいと思います。なお、デジハリONLINEプロモーションは引き続き運営されていますので、直接お問い合わせ下さい。
長い解説になりました。お役に立てると幸いです。
