Webサービス

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

目次
記事内の外部リンクにはアフィリエイトリンクが含まれる場合があります。
WordpressテーマやHTMLテンプレートの作成、CSSの解説をしている方にオススメ。
タグだけで指定サイズの画像を作ってくれるサイト、Placeholder.comです。

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

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





1. 基本形



HTML
<img src="http://via.placeholder.com/350x150">
これだけです。
超簡単。

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


2. サイズを変えてみる


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

100×100

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

500×250

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

219×451

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

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

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

300×300

HTML
<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)

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

png指定

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

gif指定(pngになります)

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

jpg指定

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

jpeg指定

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


4. 色を変えてみる


黒にしてみる

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

青にしてみる

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

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

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

文字の色も変えてみる

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

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

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


5. 文字を変えてみる


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


HTML
<img src="http://via.placeholder.com/300?text=Hello!">
http://via.placeholder.com/300?text=入れたい文字

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


HTML
<img src="http://via.placeholder.com/300?text=Hello!+1234567890">
http://via.placeholder.com/300?text=入れたい文字1+入れたい文字2

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


HTML
<img src="http://via.placeholder.com/300?text=Hello!%0A1234567890">
http://via.placeholder.com/300?text=入れたい文字1%0A入れたい文字2

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


HTML
<img src="http://via.placeholder.com/300?text=こんにちは!">
日本語(全角文字)は表示できません。


6. 組み合わせてみる


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

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

サイズ指定は一番最初かつ省略不可、
入れたい文字は一番最後でないといけません。

間違えると正常に表示されません。

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

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

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

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

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

HTML
<img src="http://via.placeholder.com/250x350.jpg/4b0082/ffa500?text=I'm+hungry!">
フォーマット指定(.png/.jpg/.jpeg)はどこかのオプションの後ろに付けます。
以下は位置を変えてみた場合。同じ画像が出来上がります。

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

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

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

あまみつ

おなごだよ
SE・プログラマーやってたよ
今は事務員のはずだけど開発もさせられるよ

Related Articles

Back to top button