Webページにダミー画像を表示する「place IMG」の使い方

Web制作途中では、ページに表示する写真や画像がまだ決まっていない場合もあります。そのようなときはダミー画像を用意し仮で表示しますが、「place IMG」はURLを指定するだけでダミー画像を表示するサービスを提供している便利なサイトです。

画像はサイズとカテゴリーを指定すると、「500px.com」および「flickr.com」で公開されているものから自動で選択されます。
画像ファイルをダウンロードすることもできますが、書式に従ってURLをリンクして使うのが便利です。

【コンテンツ】

  1. 画像リンクの書式
  2. HTMLにリンクコードを貼り付ける

画像リンクの書式

リンクコードを取得するには下記ページにアクセスします。
https://placeimg.com/

place IMG トップページ

条件としては、サイズ、カテゴリー、そしてオプションとしてフィルター(白黒 or セピア)が設定できます。条件を設定したら、表示されているリンクをコピーします。

リンクには決まった書式があり、それを覚えているとこのサイトにアクセスする必要はありません。

URL形式

https://placeimg.com/[画像の幅]/[画像の高さ]/[カテゴリー]/[フィルター]

カテゴリー

  • animals: 動物
  • arch: 建物
  • nature: 自然
  • people: 人物
  • tech: 技術
  • any: ランダムに抽出

フィルター

  • grayscale: 白黒
  • sepia: セピア
  • 省略時: 通常のカラー

例えば、640x480のサイズで人物を表示したいときは以下のリンクになります。

HTMLにリンクコードを貼り付ける

画像リンクをHTMLのimg要素に指定します。
ここでは例として、動物と人物の画像を並べてこの記事に表示してみます。

表示は以下になります。画像はアクセスするたびに変わります。

動物のダミー画像人物のダミー画像

このように自分で画像を用意する必要もなく、リンクに指定してある数字を変えればサイズも簡単に変更できるので、Web制作にとってかなり便利に活用できます。

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ