それでもわたしはおうちにいたい

おうちが大好きな私がなるべく楽しく暮らすためのブログ

サイト制作時に便利!ダミー画像が必要ならPlacehold.jpがおすすめ!

サイトを作成するときに便利なダミー画像を生成してくれるサービスって色んな種類がありますよね。

私も毎回お世話になっていながら、毎回いつもどれ使ってたっけ?どうやってカスタマイズしたっけ?って検索し直すので自分のためにもまとめますw

シンプルなダミー画像作成に便利なPlacehold.jp

placehold.jp

Placehold.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="" />

最後に

制作の途中でこの辺りにこれくらいのサイズの画像が必要・・・って言う時にささっと画像が当てられるのはとっても便利ですよ!
もしまだ使ったことがないって人がいたら、是非試してみてくださいね。