今回はダミー画像を生成してくれるPlacehold.jpというWebサービスを紹介します。
ブログの記事を執筆したり、Webページを作成する際に役立ちますのでぜひ覚えていってください。
Placehold.jpができること
Placehold.jpでは基本的に難しいことをしなくても簡単にダミー画像を作れます。
さらに、色の指定やテキストの変更など、カスタマイズもできるので順に説明します。
幅と高さを自由に指定できる
Placehold.jpのサイトで幅と高さの値を入力してダミー画像を生成することができます。
また、画像のURLに幅と高さの値を直接入力することでも好きなサイズの画像ができます。
https://placehold.jp/幅x高さ.jpg
例１）450px×150pxの場合
<img src=”https://placehold.jp/450×150.jpg”>
例２）250px×250pxの場合
<img src=”https://placehold.jp/200×200.jpg”>
背景と文字色を指定できる
何も指定しなければ上のようなグレーの画像が生成されますが、好きな色の画像を生成することも可能です。
色は#d3381c、#0d0015などの16進数で指定します。
サイズと同じくURLで直接指定することも可能です。
https://placehold.jp/背景色/文字色/250×150.jpg
例１）背景色：#000000、文字色：#B59658の場合
<img src=”https://placehold.jp/000000/B59658/250×150.jpg”>
例２）背景色：#FFECB9、文字色：#61C359の場合
<img src=”https://placehold.jp/FFECB9/61C359/250×150.jpg”>
テキストと文字サイズを指定できる
通常は「250 x 150」のように画像のサイズがテキストとして表示されますが、このテキストも自由に変更できます。
また、文字サイズも同様に変更可能です。
https://placehold.jp/文字サイズ/250×150.jpg?text=テキスト
例１）「No Image」画像として利用
例２）長文でもOK
CSSを利用できる
CSSを使って角丸やグラデーションの画像を生成することも可能です。
実は当記事のアイキャッチ画像もPlacehold.jpで生成した画像です。CSSで角丸、背景をグラデーションにしています。
ダミー画像の使用例
僕は下のようなデモでよくPlacehold.jpのダミー画像を使用します。
画像の直リンクをされても自サーバーへの負担にはならないためです。
See the Pen horizontal_scroll_yahoo（Yahooショッピングのスマホページ、アプリで使える横スクロール） by ざきひー (@zakihiii) on CodePen.0
上の「商品画像」と書かれた青い画像がPlacehold.jpで生成したダミー画像です。
まとめ
僕はダミー画像を利用する前は自前で用意して手間が掛かっていましたが、Placehold.jpは簡単にダミー画像を用意できます。
直リンクのリスクもないので、ブログを書く方、Webページ制作をされる方におすすめです。
それでは今回はこのへんで。
コメント