うえせいWP.net

WordPressのホームページ制作とWEB活用コンサルティング【大阪府】

SNS

うえせいの、文字入り「WordPressアイキャッチ画像」のつくり方

うえせいの、文字入り「WordPressアイキャッチ画像」のつくり方

ブログ記事のアイキャッチ画像には、写真に文字を入れる加工をしてから投稿しています。
理由は、FacebookやTwitterなんかにシェアした時に、目に止まりやすいからです。

特に、何も考えずやっていたのですが

A さん

いつも、アイキャッチ画像に文字を入れていますが、どうやってやってますか?

という質問も頂いたので、いつも私うえせい(@charin_co)がやっている方法をご紹介します。

 

sponsored link

前提として、サイズは「横1200px 縦630px」にする

文字を入れるからには、文字が途中で切れたりすると意味がないので、文字はキッチリ表示されるようなサイズにしておく必要があります。

いろいろやってみましたが、うえせいの使用状況では「Facebook」の規格にあわせておくことがベストなようです。

TwitterやLINEにもシェアをするのですが、Facebookが一番厳しく、縦横比が狂うと文字が切れてしまう可能性があります。

逆にFacebookの規格「1,200 x 630px」に合わせていると、他のSNSでは縦幅が狭くて微妙な感じにはなりますが、文字か切れてしまうことはないようです。

つまり

1,200px x 630px

に、サイズを調整しておくことが大切になります。

 

AdobeのPhotoshop CCを使う方法

基本的に、WordPressのアイキャッチ画像を文字を入れて作る場合は、AdobeのPhotoshopを使用しています。
理由は、慣れているからですが、機能かとても多いアプリなので、是非使い方をマスターしておくといいでしょう。

▼Photoshop CCは、無料体験版をダウンロードしてみてください。

 

1 Photoshopで新規作成を選択する

Photoshop新規
このようなダイヤログが表示されるので、新規を選択します。

Photoshop新規
この画面で、今から作る画像の大きさなんかを指定するのですが、これと全く同じにしておくと問題ないです。

そして、この画像のデータを「プリセットを保存」しておくと次回から、いちいち入力する必要が無くなりますよ。
Photoshopプリセット
▲このようにプリセットとして表示されるものを選択するだけでOKです。

 

2 表示されたら、アイキャッチ画像にしようと思っていた画像を埋め込む

埋め込む画像
メニューバーの「ファイル」から、「埋め込みを配置」をクリック。
埋め込みをする画像を選択する。

埋め込み画像
こんな感じに表示されるので、四隅をつかんでサイズ調整を行います。

Photoshop埋め込み
これでOKなから、上の「◯」をクリックして埋め込み画像のサイズ調整を確定させると埋め込み完了です。

あとは、文字入力ツールで画像の上に文字を置けば完了です。
アイキャッチ画像のつくり方

ただし、今回は白抜きの文字だけで、見やすいですがどうしても文字に縁を付けたい場合があるので、メニューバーの「レイヤー」→「レイヤースタイル」をクリックして
レイヤースタイル

eyecatch-tsukurikata6
境界線を設定すれば出来上がりです。

ちなみに、うえせいの場合はまわりの色(今回の場合は木目)の色を選んで、似ていて少し濃い色の縁を付けてまわりの色と違和感の内容に心がけています。

 
▼縁を付けて出来上がったのがコチラ
アイキャッチ画像2

ちょっと見た目が違いますよね。
うえせい(@charin_co)は、あまり縁を付けない方がいい派なんですが、読めないと意味がないと思っているので、読みやすく文字に縁を付けることがあります。
 

次のページで、iPadの時の「文字入りアイキャッチ画像」のつくり方です。

「うえせいや」のLINE@を友だち追加して下さい

うえせいのお知らせやメッセージを受け取ったり、ブログ相談会の募集告知を受け取ったりしたい方は、ううえせいやのLINE@を友だち追加してくださいね!
「うえせいや」のLINE@を友だち追加して下さい

sponsored link

合同会社うえせいやについて

合同会社うえせいやについて
「合同会社うえせいや」では、リーズナブルで柔軟性の高い月額管理費が0円の、自分で更新できるホームページの制作を承っております。
最終的に納品の際には、使い方のご指導をさせて頂くとともに、以降のサボート費用を質問の回答に限り、永年0円としておりましす。
ですので、以降の更新はご自身で、しかもスマホからも可能です。

お申込み、お問合せは無料です。
お気軽に、以下よりご連絡ください。

こんな記事も書いています