ブログのアイキャッチ画像が見つからないときに簡単に画像を用意する方法

2018年5月24日2018年5月27日

いつの間にか、Web上の記事にはイメージ画像とかアイキャッチ画像が必須になっています。
Facebook や Twitter でシェアされた際、画像付きと画像無しとでは見た目が変わってきますからね。

でも、ブログの記事を書くとき、このアイキャッチ画像を探すのって結構時間かかりませんか？
このブログの場合、フリーの写真素材サイト、写真AC
[blogcard url="https://www.photo-ac.com/" title="写真素材なら「写真AC」無料（フリー）ダウンロードOK" content="写真素材なら「写真AC」無料（フリー）ダウンロードOK"]
から写真を検索して使わせてもらっているパターンが多いのですが、たまに思ったような画像を見つけられないときがあります。

そんな時に使えるのが「ダミー画像生成 モック用画像作成」のWebサービス Placehold.jp
[blogcard url="http://placehold.jp/" title="Placehold.jp｜ダミー画像生成 モック用画像作成" content="Placehold.jp｜ダミー画像生成 モック用画像作成"]

この Placehold.jp Webページ制作の仕事の時にも、まだ準備されていない画像の代替えとしてよく使わせてもらっています。
例えば
[html]
<img src="http://placehold.jp/150×150.png" alt="">
[/html]
と書くと

こんな風に表示されます。
想定しているサイズの画像の代替えとしてとっても手軽に使えるんですよね。

さらに画像の中の文字列も変更ができます
Placehold.jp Examples 5
[html]<img src="http://placehold.jp/eeeeee/cccccc/240×180.png?text=NoImage" alt="">[/html]
と書くと

こんな感じ。

さらにはPlacehold.jp｜ダミー画像生成 モック用画像作成を使うと、画像サイズ、文字列、背景色、文字色、文字サイズだけでなく、CSSで指定した効果も使えるんです。

ということで、この記事のアイキャッチ画像は
[html]
https://placehold.jp/3d4070/ffffff/600×400.png?text=placehold&css=%7B%22background%22%3A%22%20-webkit-gradient(linear%2C%20left%20top%2C%20left%20bottom%2C%20from(%23666666)%2C%20to(%23cccccc))%22%7D[/html]
[html][/html]
で作ってみました。

これで、FacebookやTwitterにシェアしたとき、ちゃんと画像が表示される・・・かな？

背景色や文字効果などCSSで指定したら、もっとそれらしいアイキャッチ画像ができそうです。