Web制作の途中で「画像がまだない」「仮の画像が欲しい」とき、よくありますよね?そんなときに便利なのが「ダミー画像(プレースホルダー画像)」
今回は 簡単にダミー画像を作れるジェネレーター をご紹介します!
- 画像サイズを自由に指定(幅・高さ)
- 背景色と文字色が選べる
- 表示テキストも自由に
- 画像はリアルタイムでプレビュー
- URLとHTMLコードをコピーしてすぐ使える
画像URLをHTMLで使う例
<img src="https://dummy.kobeya.com/?width=400&height=300&bg=cccccc&color=000000&text=No+Image" alt="No Image(400×300)">
<img src="https://dummy.kobeya.com/?width=400&height=300&bg=cccccc&color=000000&text=No+Image" alt="No Image(400×300)">
<img src="https://dummy.kobeya.com/?width=400&height=300&bg=cccccc&color=000000&text=No+Image" alt="No Image(400×300)">
画像URLをCSSで使う例
background-image: url('https://dummy.kobeya.com/?width=600&height=400&bg=eeeeee&color=333333&text=Coming+Soon');
background-image: url('https://dummy.kobeya.com/?width=600&height=400&bg=eeeeee&color=333333&text=Coming+Soon');
background-image: url('https://dummy.kobeya.com/?width=600&height=400&bg=eeeeee&color=333333&text=Coming+Soon');
原寸サイズでダミーを確認
以下はよく使われるOGP画像(1200×630)とInnstagram画像(1080*1080)のサンプルです。
OGP画像(1200×630)
<img src="https://dummy.kobeya.com/?width=1200&height=630&bg=eeeeee&color=333333&text=OGP+Image+1200x630" alt="OGP Image(1200×630)">
Instagram画像(1080×1080)
<img src="https://dummy.kobeya.com/?width=1080&height=1080&bg=eeeeee&color=333333&text=Insta1080x1080" alt="Instagram(1080×1080)">