LINE2017.11.30文字入りのアイキャッチ画像ってオリジナリティが出て、画像を見ただけで何の記事か分かるのでいいですよね。当然ですが、無加工の画像をアイキャッチに設定するよりは手間が掛かります。慣れるまでは若干苦労しますが、慣れれば数分で画像入りのアイキャッチ画像を作ることが出来ます。Paintというソフトを利用して、文字入りのアイキャッチ画像を作成する方法を紹介します。下記リンクより公式サイトにいきます。Paint)のオフィシャルサイトです。Paint)の機能や使い方を紹介しています。medibangpaint.comトップページをスクロールし、真ん中あたりにダウンロードボタンがあります。自分が利用する端末の種類のダウンロードボタンをクリックします。64bit)を元に説明します。自分のOSに合ったダウンロードボタンをクリックします。するとインストーラのダウンロードが開始されます。インストール方法ダウンロードした「MediBangPaintProSetup-12.1-64bit.exe」を実行します。PCの設定によっては実行時に警告が出る可能性がありますが、問題ないのでOKを押して進みます。インストールの設定項目は特に迷うところはないと思うので流れだけ画像を貼っておきます。Paintはユーザー登録なしでも利用できますが、様々な機能制限があります。ユーザー登録自体も無料のためユーザー登録してしまいましょう。(メールアドレスの登録が気になる人は新規でGmailを取得するなどするといいと思います。Paintを起動します。起動すると広告が表示されるのでOKをクリックします。新規登録ボタンをクリックします。必要事項を入力し、新規登録をクリックします。現在TwitterやGoogleアカウントでの登録も可能になっています。ここで紹介するまでもないかと思いますが、文字を入れるアイキャッチ画像を探します。私はよく「Pixabay」や「ぱたくそ」を利用させてもらってます。https://pixabay.com/pixabay.com無料の写真素材はフリー素材のぱくたそぱくたそは人物(男性・女性)や風景の写真、背景に使いやすいテクスチャ素材など、すべて無料でダウンロードができるフリー素材(フリ素)サイトです。あらゆるシーンの写真素材を日々更新しています。27428枚の写真を配布中。www.pakutaso.com今回は目力が素晴らしい猫ちゃんの画像を使ってみます。Paintでアイキャッチ画像の調整それぞれのブログに合ったアイキャッチ画像のサイズを設定します。このブログはSimplicity2を利用していて、本文の横幅が680pxとなっています。それに近しい、16:9の比率で「672px×378px」で作成しています。サイズについては各テーマで最適なサイズを探してみてください。Paint起動後の画面で「イラストを描く」をクリックします。画像の新規作成画面で幅と高さを指定します。今回は672×378で作成します。必要な数値を入力してOKをクリックします。空白のキャンバスが作成されました。このキャンバスに合わせてアイキャッチ画像を作成していきます。[開く]から素材を読み込みます。ドラッグアンドドロップでも同様に読み込めます。Untitledタブの隣に画像が読み込まれていればOKです。メニューバーの[編集]-[コピー]をクリックします。Ctrl+CでもOKです。コピーしたらUntitledタブに移動し、メニューバーの[編集]-[貼り付け]をクリックします。Ctrl+VでもOKです。キャンパスサイズより大きく貼り付けられると思います。メニューバーの[選択範囲]-[変形]をクリックします。Ctrl+TでもOKです。右側にあるナビゲーターのズームアウトを何度かクリックし、全体が表示されるように調整します。右下の■部分をクリックし、ドラッグしてサイズを変更します。位置がずれますが、上手いことキャンバスが隠れるように変形します。変形が完了したらOKをクリックします。右上のナビゲーターのウィンドウサイズに合わせるボタンをクリックすると、ズームアウトしたものが画面いっぱいに広がります。画像に文字を入れる右側のツールバーのテキストツールをクリックし、画像の任意の位置でクリックします。テキスト編集画面で各種設定と文字を入力します。設定は適当にOKしてみます。画像に文字が入りましたね。文字が切れている上に、このままでは猫ちゃんの白い部分と白い文字が重なって見えずらいですね。変更する場合はテキストツールを選択した状態で文字をダブルクリックすれば、先ほどのテキスト編集画面が表示されます。以下の変更をしてみます。横幅が入りきらないので3行目構成にする【中央で揃える】を選択し、文字をセンタリングするふち幅を2pxにして文字にふちをつけるだいぶいい感じになりましたね。画面の右下のレイヤーの追加をクリックし、レイヤーを増やします。新しく追加したレイヤーを選択して、塗りつぶしツールを選択します。左上で色を選択し、ドラッグして文字を隠すようにします。見えなくなってしまいましたね。ここで追加したレイヤーの不透明度を50%にします。文字が浮き出てきましたね。現時点では追加したレイヤーが一番上に表示されているので、文字のレイヤーが一番上にくるようにレイヤーの位置を調整します。レイヤー位置の調整はドラッグアンドドロップで可能です。これで文字が見やすいアイキャッチ画像の完成です。画像を書き出すメニューバーの[ファイル]-[書き出し]をクリックします。書き出し設定で「以下のサイズ内に収めて保存」にチェックが入っていることを確認してOKをクリックします。ファイル名を決めて保存します。作成された画像を見てみます。上手く書き出されましたね。Paintは他にも色々な機能があります。無料なのにすごいですね。初めは試行錯誤が必要ですが、慣れればパッとアイキャッチ画像を作ることが出来ます。不明点があればコメントか問い合わせください。答えられる範囲で答えます。糸ログ関連記事Wordpresshighlight.jsでPowershellコードをハイライトする方法highlight.jsでPowershellのコードをハイライト表示するのに少し苦戦したので、記録しておきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。Paint編~highlight.jsでPowershellコードをハイライトする方法So-net光コラボレーションでDS-Liteアーカイブ2017年11月2017年10月カテゴリーWordpress。