SNS
facebookアイコン twitterアイコン Google+アイコン rssアイコン
にほんブログ村 IT技術ブログへ

ダミー画像をURLだけで表示出来るジェネレーター3選!!

予約管理システムなら調整さんCalendarが無料、簡単でおすすめ

Web製作時にサイトのレイアウトを作成する際に、ここには画像を配置する予定だけど、とりあえずダミー画像を配置しておくということがあります。ただ、都度ダミー画像を作成していたのでは非常に手間が掛かってしまいます。

そんな時に便利なのがダミー画像を生成してくれるサービスです。画像のURLにサイズ、色などの情報(パラメータ)を渡すだけでダミー画像が表示出来てしまいます。そんなURLのみで完結出来るWebサービスを3つ紹介します。

スポンサードリンク
スポンサードリンク

Web制作に使える、URLだけでダミー画像を表示出来るWebサービス3選!!


198-1.png

Placehold.jp|ダミー画像生成 モック用画像作成

まずは1つ目、上記サイトで使い方は解説されていますが日本語なので使い方はすぐに理解出来ると思います。

基本的な使い方としては画像のURLとして

形式:http://placehold.jp/120x120.png

といったURLを指定するだけです。

↓は実際にimgタグのsrcに上記のURLを指定してみました。
ダミー画像サンプル1


他にも文字サイズ/背景色/テキスト色なども指定することが出来ます。
指定方法は下記のような方法です。 
形式:http://placehold.jp/{文字色}/150x100.png
形式:http://placehold.jp/{背景色}/{文字色}/150x100.png
形式:http://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png

文字色を指定
http://placehold.jp/FF0000/220x100.png


背景色、文字色を指定
http://placehold.jp/000000/FF0000/220x100.png


文字サイズ、背景色、文字色を指定
http://placehold.jp/50/000000/FF0000/220x100.png



任意のテキストを表示する(日本語もOK)
形式:http://placehold.jp/300x50.png?text={表示したい文字列}

http://placehold.jp/300x50.png?text=日本語もOK


文字サイズ、背景色、文字色、任意の文字を一度に指定することも可能です。

http://placehold.jp/50/FF9933/000000/420x100.png?text=ダミー画像です


ここで紹介した画像はすべて、png形式の画像ですがjpg形式にも対応しています。jpgにしたい場合は拡張子部分を.jpgに変更すればjpg画像として表示されます。

また、ここでは省略しますが、スタイルシートでグラデーション・角丸などにすることも可能です。placehold.jpのサイトにCSSを生成してくれるジェネレーターがあるのでそちらを確認してみてください。



198-2.png

Dynamic Dummy Image Generator - DummyImage.com

こちらもURLを指定するだけでダミー画像を表示してくれるサービスです。

URLの形式
http://dummyimage.com/横幅x縦幅/背景色/文字色.png&text=任意の文字

http://dummyimage.com/300x100/000000/ffffff.png&text=任意の文字


こちらもさきほどと同様に背景色/文字色、任意テキスト(日本語OK)を表示することが出来ます。画像フォーマット(.png, .jpg, .gif)の3種類に対応しており、拡張子部分を変更するだけで画像形式を変更することが出来ます。

テキスト指定なしで、gif画像にするなら
http://dummyimage.com/300x100/FFCCCC/ffffff.gif


といった感じで、これも簡単にダミー画像を利用することが出来ます。
画像サイズについては、よく使われるサイズがショートカットとして用意されています。ショートカットについてはサイトを参照してみてください。


198-3.png

Fake images please?

最後に紹介するのは、日本語には対応してはいないのですが、フォントが指定出来るところがポイントでしょうか。

正方形の画像
http://fakeimg.pl/100/


縦横サイズ指定の画像
http://fakeimg.pl/250x100/


背景色の指定
http://fakeimg.pl/250x50/ff0000/


背景色、文字色の指定
http://fakeimg.pl/350x50/ff0000/ffffff/


テキストの指定(※日本語には非対応)
http://fakeimg.pl/350x100/?text=Hello


フォントの指定
http://fakeimg.pl/350x100/?text=Hello&font=lobster


フォント指定として(bebas / lobster / museo / yanone)の4つが指定可能です。



いかがでしょうか、URL指定だけでダミー画像が使えるサービスを3つ紹介しました。placehold.jpが日本語に対応しており、フォントサイズも指定可能でCSSなども使えばグラデーション、角丸も出来るので機能は豊富でおすすめです。Fake imageも日本語には対応していませんが、フォントを指定出来るのでサイトのイメージによっては良いかもしれません。いずれにせよ、URLだけで簡単にダミー画像が使えるのは非常に便利ではないでしょうか。ダミー画像なので細かいこだわりがないのであれば、3つともおすすめだと思います。


ブログの記事外注に使える記事作成代行についてまとめてみました



Chromebook 売れ筋ランキング

Powered by amaprop.net

便利なWebサービスの関連記事






気になる備忘録「最新5記事」

お時間あれば、最新記事も読んでみてください。



コメントの投稿

非公開コメント

最新記事

(現在の記事数: )
全記事一覧
プロフィール

peacepopo

Author:peacepopo
気になったこと書くよ



アフィリエイト、ブログ運営に記事の外注サービスを活用
PickUP

スポンサードリンク


SNSシェア