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

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

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

使い方を解説していきます。

1. 基本形

<img src="http://via.placeholder.com/350x150">

これだけです。
超簡単。

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

2. サイズを変えてみる

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

100×100

<img src="http://via.placeholder.com/100x100">

500×250

<img src="http://via.placeholder.com/500x250">

219×451

<img src="http://via.placeholder.com/219x451">

http://via.placeholder.com/350x150

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

300×300

<img src="http://via.placeholder.com/300">

正方形の場合、1辺だけのサイズ指定でも作成可能。

実験してみたところ、サイズ上限は横・縦ともに30,000ぐらいまでのようです。
35,000まで上げると画像が表示されなくなり、URLに飛ぶと「Too big of an image!」と表示されました。

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

png、gif、jpg/jpegからフォーマットを指定することもできます。
…が、gifは今機能していないようです（gif指定でもpngになります）。

デフォルト（png）

<img src="http://via.placeholder.com/300">

png指定

<img src="http://via.placeholder.com/300.png">

gif指定（pngになります）

<img src="http://via.placeholder.com/300.gif">

jpg指定

<img src="http://via.placeholder.com/300.jpg">

jpeg指定

<img src="http://via.placeholder.com/300.jpeg">

4. 色を変えてみる

黒にしてみる

<img src="http://via.placeholder.com/300/000000">

青にしてみる

<img src="http://via.placeholder.com/300/0000ff">

http://via.placeholder.com/300/000000

URLにカラーコードを追加すると、画像全体の色が変わります。
（カラーコードに#は不要）

文字の色も変えてみる

<img src="http://via.placeholder.com/300/bdb76b/b22222">

http://via.placeholder.com/300/bdb76b/b22222

カラーコードを2つ指定すると、1つ目が画像全体の色、2つ目が文字の色になります。

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

5. 文字を変えてみる

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

<img src="http://via.placeholder.com/300?text=Hello!">

http://via.placeholder.com/300?text=入れたい文字

使える文字は半角英数字、記号です。

<img src="http://via.placeholder.com/300?text=Hello!+1234567890">

http://via.placeholder.com/300?text=入れたい文字1+入れたい文字2

途中でスペースを入れたい場合は、スペースを入れたい場所に「+」を入れてつなぎます。

<img src="http://via.placeholder.com/300?text=Hello!%0A1234567890">

http://via.placeholder.com/300?text=入れたい文字1%0A入れたい文字2

途中で改行したい場合は、改行したい場所に「%0A」を入れてつなぎます。
文字サイズの調整まではできないようです。

<img src="http://via.placeholder.com/300?text=こんにちは！">

日本語（全角文字）は表示できません。

6. 組み合わせてみる

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

http://via.placeholder.com/サイズ/…/…?text=入れたい文字

サイズ指定は一番最初かつ省略不可、
入れたい文字は一番最後でないといけません。
間違えると正常に表示されません。

正方形サイズ指定＋画像色指定＋文字色指定

<img src="http://via.placeholder.com/250/814721/00a7db">

長方形サイズ指定＋画像色指定＋文字色指定＋文字列指定

<img src="http://via.placeholder.com/400x100/ffe4e1/006400?text=Are+you+hungry?">

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

<img src="http://via.placeholder.com/250x350.jpg/4b0082/ffa500?text=I'm+hungry!">

フォーマット指定（.png/.jpg/.jpeg）はどこかのオプションの後ろに付けます。
以下は位置を変えてみた場合。同じ画像が出来上がります。

<img src="http://via.placeholder.com/250x350/4b0082.jpg/ffa500?text=I'm+hungry!">

<img src="http://via.placeholder.com/250x350/4b0082/ffa500.jpg?text=I'm+hungry!">

以上、Placeholder.comの使い方でした。
画像作成の手間が省けるな！