シンプルなダミー画像から、実用的なカスタマイズが豊富に用意されたダミー画像生成サービス -Cambelt

ダミー画像生成サービスの真打ちが登場したぞ、という感じです。
画像のサイズを表記したシンプルなダミー画像から、実用的なカスタマイズが豊富に用意されたダミー画像生成サービスを紹介します。

サイトのキャプチャ

Cambelt
Cambelt -GitHub

Cambeltの使い方

CambeltはRubyで作成されたオンラインサービスで、img要素のsrc属性にコードを記述するだけで簡単にダミー画像を配置できます。

HTML

サイズ:300x200のダミー画像を生成。

<img src="http://cambelt.co/300x200" />

下記は、Cambeltで配置したダミー画像です。

Cambeltのデモ

デモではシンプルなのものから、実用的なカスタマイズを施せるものまで、たくさんあります。

まずは、シンプルなデモから。

サイトのキャプチャ

ダミー画像のデモ:シンプル版

サイズを明記したダミー画像

<img src="http://cambelt.co/400x300" />

テキストを配置したダミー画像

テキストの空白スペースは「+」でつなげます。

<img src"http://cambelt.co/400x300/Simple+Text" />

背景色を指定したダミー画像

<img src="http://cambelt.co/400x300/Colors?color=25d54e" />

前景色を指定したダミー画像

<img src="http://cambelt.co/400x300/Front+Color?color=,987423" />

背景色と前景色を指定したダミー画像

一つ目は背景、二つ目が前景です。

<img src="http://cambelt.co/400x300/Two+Color?color=234653,eeeeee" />

フォントの選択やファイル形式、httpsにも対応しています。

サイトのキャプチャ

ダミー画像のデモ:アレンジ版

フォントの種類を指定したダミー画像

<img src="http://cambelt.co/400x300/Font+Control?font=Homestead-Display" />

フォントのサイズを指定したダミー画像

<img src="http://cambelt.co/400x300/Font+Control?font_size=12" />

ファイルのフォーマットを表示したダミー画像

<img src="http://cambelt.co/400x300/JPG?format=jpg" />

httpsに対応したダミー画像

<img src="https://cambelt.herokuapp.com/400x300/Secure" />

上記のフォントの種類は、さまざまなウェブフォントが対応してます。

サイトのキャプチャ

ダミー画像のデモ:フォント

フォントの種類を指定したダミー画像

<img src="http://cambelt.co/400x300/Font+Control?font=Homestead-Display" />

Cambeltではアイコンをダミー画像に配置することもできます。

サイトのキャプチャ

ダミー画像のデモ:アイコン

アイコンを表示したダミー画像

<img src="http://cambelt.co/icon/&#91;icon name&#93;/&#91;size&#93;?&#91;options&#93;" />

top of page

©2017 coliss