［ブロガー向け］ オンラインエディタでブラウザだけでアイキャッチ画像作ってみようか

文章を打ったり、リンクを作ったり、ブログを書くのに越えなければならないハードルはいくつかあると思うんですが、「アイキャッチづくり」はなかなか面倒です。

アイキャッチのお陰で自分の場合は心的ハードルが激上がりでございます。Photoshopの起動待ちしてる時の「俺は今何をしているんだ感……」は生きている上で必要ない時間のトップ3には楽勝で入ります。

とはいえ、アイキャッチなくせばいいかというと、なければないで色々不都合がありまして、OGPとかOGPとかOGPとか。

アイはキャッチしてもらいたいので、さくっと作れないかいろいろ試してみたのですが、ブラウザで画像加工できるオンライン画像エディターの「Pixlr.com」がなかなか都合が良かったのでご紹介。

素材を用意します

アイキャッチのもととなる画像やイラスト、写真は自分で用意しないとどうしようもないですね。

なにも思いつかない方はスマホで自分の写真をパシャリとやって、それを元にしてもいいでしょう。

とりあえず著作権のフリーそうなものを探すなら「ぱくたそ – フリー写真素材・無料ダウンロード」や「ゆるいフリーイラスト素材集「ぴよたそ」」でどうですかね？

アイキャッチに文字をいれるなら

日本語フリーフォントまとめサイトFONT FREEでダウンロードしておくべき和文フォントのまとめ

フリーフォントをインストールしておきましょう。

画像のダウンロードが面倒なら、スクリーンショット系のソフトオススメよ

Windows でスクリーンショット撮るなら SnapCrab でいいと思うよ。

自分は主にこれ使ってる。

ネットの画像はなんでもかんでも自由に使えるわけではないので、権利関係に配慮しつつ、アイをキャッチしましょう。

じゃあ実際にアイキャッチつくるよ

「ぱくたそ – フリー写真素材・無料ダウンロード」で適当な写真を見つけて、スクショでパソコンに画像を保存します。

Pixlr.comをにアクセスして

自分のブログに合わせたアイキャッチのサイズを入力

上部メニューの「レイヤー」→「画像をレイヤーとして開く」で使いたい画像を読み込みます

読み込んだ画像の位置やサイズを調節します。調節の仕方は「編集」→「自由変形」で。

位置とサイズの調節が終わったら、こんな感じ。

文字を入れる場合文字ツールで

書体やサイズ、位置を調節します。

文字にレイヤースタイルをかけて、可読性、視認性を上げます。

レイヤースタイルの当て方は、上部メニュー「レイヤー」→「レイヤースタイル」

ドロップシャドウやグローあたりをいじれば、文字と画像を重ねても読みやすくなるかと。

保存して終わりです。

おつかれさまでした。

全工程10分かからんかな

画像を探して、アイキャッチ完成まで、慣れれば10分かからない私です。

Photoshopをいちいち立ち上げるのが面倒な場合や自分のパソコンじゃない環境でも、「Photo editor online / free image editing direct in your browser – Pixlr.com」を使えばアイキャッチやブログ用の画像程度の編集ならこなせそうです。

おまけ・リンクを簡単にはれるやつとか、カスタム記事とか

ブログ記事やサイトを紹介するのに「はてなブログ ブログカード」がかなり都合がいいかもしれない

どうせアイキャッチにこだわるなら、サイズにもこだわりたいよね。

Facebookの奴隷となるべくアイキャッチ画像のサイズを再設定してみたのだよ

アイキャッチ作ったら役に立ってほしいよね。

【WordPress】記事公開時にアイキャッチ画像つけてお知らせツイートさせる方法

いろいろとカスタムしてきましたよ。

WordPressブログのデザインや機能を一歩先に進化させるカスタマイズ記事まとめ

文：シンタロヲフレッシュ