画像編集ソフトも、画像ダウンロードさえも不要！タグだけで指定サイズの画像を作ってくれるplaceholder.jpの使い方

WordpressテーマやHTMLテンプレートの作成、CSSの解説をしている方にオススメ。
タグだけで指定サイズの画像を作ってくれるサイト、placehold.jpです。


ちょっとここにこのサイズのテスト用画像が欲しい…というときに助かります。
画像編集ソフトをいちいち開いて画像を自作する必要なし！
しかも画像ダウンロードすら不要なので、自サイトの容量を圧迫しません。
便利すぎる…。

※スミマセン、ぶっちゃけPlaceholder.comという同様の海外サービスの解説記事の焼き直しです。Placeholder.comが消えてしまったので…。

それでは、使い方を解説していきます。

1. 基本形

<img src="https://placehold.jp/500x300.png">

これだけです。
超簡単。

では、これをアレンジしていきます。

2. サイズを変えてみる

1px単位で指定可能です。

100×100

<img src="https://placehold.jp/100x100.png">

500×250

<img src="https://placehold.jp/500x250.png">

219×451

<img src="https://placehold.jp/219x451.png">

https://placehold.jp/500x300.png

URLのこの部分を変更すると、いろんなサイズの画像が作れます。
横x縦の順で指定します。

あらかじめ、「バナーによくあるサイズ」「WEB制作によくあるサイズ」などもプルダウンで用意されています。
便利。

サイズ上限は横・縦ともにMAX4桁です。

3. フォーマットを変えてみる

png、jpgからフォーマットを指定することもできます。

デフォルト（png）

<img src="https://placehold.jp/3d4070/ffffff/150x150.png">

jpg指定

<img src="https://placehold.jp/3d4070/ffffff/150x150.jpg">

4. 色を変えてみる

黒に白文字にしてみる

<img src="https://placehold.jp/000000/ffffff/500x300.png">

青に黄色字にしてみる

<img src="https://placehold.jp/0062ff/fbff00/500x300.png">

https://placehold.jp/000000/ffffff/500x300.png

URLにカラーコードを追加すると、背景色と文字色を指定できます。
（カラーコードに#は不要）
カラーコード1つ目が背景色、2つ目が文字色です。

カラーコードの参考サイト

5. 文字を変えてみる

デフォルトでは画像の中の文字は「横サイズ×縦サイズ」ですが、変更できます。

<img src="https://placehold.jp/38b263/ff00ae/500x300.png?text=Hello!">

https://placehold.jp/38b263/ff00ae/500x300.png?text=入れたい文字

<img src="https://placehold.jp/7a12ab/ff7300/500x300.png?text=%E6%97%A5%E6%9C%AC%E8%AA%9E%0A%E3%81%AB%E3%81%BB%E3%82%93%E3%81%94">

2バイト文字（漢字・ひらがな・カタカナなど）もOK。
改行も使えます。

https://placehold.jp/7a12ab/ff7300/500x300.png?text=入れたい文字1%0A入れたい文字2

途中で改行したい場合は、改行したい場所に「%0A」を入れてつなぎます。

<img src="https://placehold.jp/14/3d4070/ffffff/500x300.png?text=aiueo">

https://placehold.jp/文字サイズ（数値）/3d4070/ffffff/500x300.png?text=aiueo

文字サイズも指定できます。

6. 組み合わせてみる

複数のオプションを組み合わせてみます。
オプションの指定順には一部決まりがあります。

https://placehold.jp/文字サイズ/背景色/文字色/横幅x縦幅.拡張子?text=入れたい文字

正方形サイズ指定＋背景色指定＋文字色指定

<img src="https://placehold.jp/814721/00a7db/250x250.png">

長方形サイズ指定＋背景色指定＋文字色指定＋文字列指定

<img src="https://placehold.jp/ffe4e1/006400/400x100.png?text=Are+you+hungry?">

長方形サイズ指定＋文字サイズ指定＋背景色指定＋文字色指定＋フォーマット指定＋文字列指定

<img src="https://placehold.jp/20/4b0082/ffa500/250x350.jpg?text=I'm+hungry!">

7. CSSを使ってみる

なんと驚き、CSSまで適用させることができます。

<img src="https://placehold.jp/000000/ffffff/300x300.png?css=%7B%22border-radius%22%3A%2215px%22%2C%22background%22%3A%22%20-webkit-gradient(linear%2C%20left%20top%2C%20left%20bottom%2C%20from(%23666666)%2C%20to(%23cccccc))%22%7D">

https://placehold.jp/000000/ffffff/300x300.png?css=JSON化したCSSパラメータ文字列

上記の画像に設定されたCSSを解読すると、下記のようになります。

{"border-radius":"15px","background":" -webkit-gradient(linear, left top, left bottom, from(#666666), to(#cccccc))"}

エンコード・デコードサービスを使うとわかりやすいかもです。

<img src="https://placehold.jp/000000/ffffff/300x300.png?text=test&css=%7B%22border-radius%22%3A%2215px%22%2C%22background%22%3A%22%20-webkit-gradient(linear%2C%20left%20top%2C%20left%20bottom%2C%20from(%23666666)%2C%20to(%23cccccc))%22%7D">

画像に入れるテキストも指定している場合は、text=～の後に&でつなぎます。 textがあるときとないときで&でつなぐか?でつなぐか変わりますので注意。


placehold.jpでは、ダミー画像としてだけでなく、faviconやOGP用画像としての使用法も提案されてます。
ペイントソフトを使わなくても、サクッとアイキャッチ画像なども作れるのはいいですね。
faviconなどに使う場合は、サービス終了に備えてダウンロードしておくのがオススメ。