サイトを作成するときに便利なダミー画像を生成してくれるサービスって色んな種類がありますよね。
私も毎回お世話になっていながら、毎回いつもどれ使ってたっけ?どうやってカスタマイズしたっけ?って検索し直すので自分のためにもまとめますw
シンプルなダミー画像作成に便利なPlacehold.jp
placehold.jpPlacehold.jpはカスタマイズもしやすいのですごく便利です。画像サイズから色、フォントサイズ、テキストの内容まで変えられます。
基本的な使い方は簡単!こんな風にimgのsrcに画像のURLを入れます。
<img src="http://placehold.jp/350x150.png" alt="" />
するとこんな風に表示されます。すごいねー。便利だねー。
画像のサイズの変え方
画像のサイズを変えたかったらsrc内の数字を書き換えればOK!さっき350x150って書いたところを100x100に書き換えてみますよ。
<img src="http://placehold.jp/100x100.png" alt="" />
すると画像サイズが変わりましたね!
画像の色や文字サイズの変え方
実は背景色や文字色や文字サイズを変えることもできます。ダミー画像の色にまでこだわりたい時は是非!
使い方はこちらも簡単。画像サイズの前に文字サイズ、背景色のカラーコード、文字色のカラーコードを書きます。#は書かなくて大丈夫です。
http://placehold.jp/文字色/300x150.png http://placehold.jp/背景色/文字色/300x150.png http://placehold.jp/文字サイズ/背景色/文字色/300x150.png
今回は文字サイズを20、背景色をピンク(カラーコード#f9c7d4)、文字色を白(カラーコード#fff)に変えてみます。
<img src="http://placehold.jp/20/f9c7d4/fff/300x150.png" alt="" />
テキストの変え方
テキストを変更する時は数字の後に「?text=表示したいテキスト」を入れます。
<img src="http://placehold.jp/16/fa7c96/fff/300x150.png?text=こんにちは世界!" alt="" />
最後に
制作の途中でこの辺りにこれくらいのサイズの画像が必要・・・って言う時にささっと画像が当てられるのはとっても便利ですよ!もしまだ使ったことがないって人がいたら、是非試してみてくださいね。