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の使い方でした。
画像作成の手間が省けるな!

Tags

ぱんこ

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

コメントを残す

メールアドレスが公開されることはありません。

Close
Close