画像素材がダミーのままだけど、コーディングを進めなければならないなんて時が時折あったりします。画像をいれないまま進めるのもひとつの手ですが、やはり何かしらダミー画像などを用意して進めたりしておきたいところ。
そんなときに画像をわざわざ用意せずともURLを入れるだけで画像を表示してくれるサービスがあります。
Placehold.it – Quick and simple image placeholders
以前から知っていたものの、これまで使いドコロもなかったために便利さに気づいていなかったのですが、最近使うようになった Middleman のヘルパに入っていたこともあり、利用するようになりました。
自分のメモ用として使い方を書いておきます。
使い方
使い方は img にサービスのURLと入れたい画像のサイズや色などを指定するだけ
サイズを縦横を入れただけの表示
<img src="http://placehold.it/350x150" alt="" />
サイズを１つのみ
<img src="http://placehold.it/300" alt="" />大きい画像
<a href="http://placehold.it/800x300"><img src="http://placehold.it/800x300" alt="" /></a>小さい画像
<img src="http://placehold.it/10" alt="" />テキストの変更
デフォルトでは画像のサイズが表示されるようになりますが、任意で変更することも可能です。ただし、海外のサービスということもあり、日本語は表示されません。
<img src="http://placehold.it/300&text=HAM" alt="" />色を変更する場合
背景色やテキストの色を変更する場合は、サイズの後ろに 背景色 ⇒ テキストカラーの順で指定をします。
色の変更
<img src="http://placehold.it/300/ff1493/ffffff" alt="" />
<img src="http://placehold.it/300/cccccc/1e90ff" alt="" />画像の形式を変更
デフォルトでは gif 形式で表示されるのですが、他にも jpeg, jpg, png これらが表示できるそうです。
各画像の形式
<img src="http://placehold.it/150.gif/&text=gif" alt="" />
<img src="http://placehold.it/150.jpeg/&text=jpeg" alt="" />
<img src="http://placehold.it/150.jpg/&text=jpg" alt="" />
<img src="http://placehold.it/150.png/&text=png" alt="" />
拡張子の位置は数字の後ろでもカラーコードの後ろでもどちらでも大丈夫なようです。
この Placehold.it の他にも、同様のサービスはいくつかあるらしいです。
Dynamic Dummy Image Generator - DummyImage.com
lorempixel - placeholder images for every case
後者のほうはランダムで画像をいれられるようなので、これまた良さそうなサービスです。今度試してみようと思います。
