Pickupニュース

Placehold.jp
Webサービス

Placehold.jp

日本語も使えるダミー画像生成サービス
サイズ、配色、表示する文字列、ファイル形式、文字サイズを選択してダミー画像のURLパスを発行するWebサービスです。スタイルシートを利用することで、様々な画像表現を演出することが出来ます。

Placehold.jpのご利用はこちらから

Webサイト

使い方

Placehold.jpはURLにパラメータを追加することで、様々なダミー画像を生成します。

パラメータの設定

Placehold.jpのURLパラメータ
http://placehold.jp/{文字サイズ}/{背景色}/{文字色}/{サイズ(幅x高さ)}.{フォーマット}?text={文字列}

項目 内容 パラメータ
文字サイズ 文字サイズを指定 整数値
背景色 背景色をHexコードで指定(#は不要です) Hexコード(省略で#CCCCCC)
文字色 文字色をHexコードで指定(#は不要です) Hexコード(省略で#9B9B9B)
サイズ(幅x高さ) 幅と高さを指定 整数値x整数値
フォーマット ・png
・jpg
から選択
png / jpg
文字列 画像に表示する文字列 文字列(日本語も使えます)

動画デモ

Placehold.jpの動画デモです。

https://www.youtube.com/watch?v=mNt7TEmyV_I

解説(Basic)

  1. 画像サイズを個別に指定して、画像を生成するボタンをクリックするか、よく使う正方形バナーによくあるサイズWeb制作でよく使うサイズのプリセットを選択
  2. 生成された画像パスをコピーして使用します。

解説(Advanced)

  1. 幅(width)高さ(height)を指定
  2. フォーマットからpngjpgを選択
  3. プレースホルダーとして表示する文字サイズを指定
  4. 文字色背景色を指定
  5. 表示文字を指定
  6. 画像を生成するボタンをクリックして生成された画像パスをコピーして使用します。

デモ

350×150ピクセル、.png形式のダミー画像

HTMLCopy
<img src="http://placehold.jp/350x150.png" />

350×150ピクセル、背景色黒(#000000)、文字色白(#ffffff)、.png形式のダミー画像

HTMLCopy
<img src="http://placehold.jp/000000/ffffff/350x150.png" />

350×150ピクセル、背景色黒(#000000)、文字色白(#ffffff)、.jpg形式のダミー画像

HTMLCopy
<img src="http://placehold.jp/000000/ffffff/350x150.jpg" />

350×150ピクセル、背景色黒(#000000)、文字色白(#ffffff)、.jpg形式、「Web技術指南書」の文字列のダミー画像

HTMLCopy
<img src="http://placehold.jp/000000/ffffff/350x150.jpg?text=Web技術指南書" />

350×150ピクセル、背景色黒(#000000)、文字色白(#ffffff)、.jpg形式、「Web技術指南書」の文字列、文字サイズ16のダミー画像

HTMLCopy
<img src="http://placehold.jp/16/000000/ffffff/350x150.jpg?text=Web技術指南書" />

1 件のコメント

コメントを残す

記事ランキング