web作成に役立つ!ダミー画像を活用してみよう

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

以前の記事で、ウェブサイトなどの
制作過程時に役に立つ、
ダミーテキストのジェネレータに
ついてご紹介させて頂きました。

web作成に役立つ!ダミーテキストジェネレータを使ってみよう

今回は、ダミー画像について
ご紹介させて頂きたいと思います。

ダミー画像は、ウェブサイトの作成時に、
画像な必要な場所に、とりあえず当てはめてスペースをとっておく際に
役に立つと思います。

ダミー画像生成サイト:Placehold.jpの使い方

gazo1

Placehold.jp

こちらのサイトでは、シンプルなダミー画像を簡単に生成してくれる
国産のジェネレータです。

gazo2

例えば、650×250サイズの画像を用意したい場合。
左側にある横幅などの数値を入力して、
「画像を生成する」ボタンをクリックします。

そうすると、指定したサイズの画像のURLが表示されます。
http://placehold.jp/650×250.png

コーディングの際に画像を入れたい場所に
例えば下記のように指定してあげると、
ダミー画像が表示されます。

例) <img src=”http://placehold.jp/650×250.png”>

背景・文字の色サイズを変更する方法

http://placehold.jp/{文字色}/300×100.png
http://placehold.jp/{背景色}/{文字色}/300×100.png
http://placehold.jp/{文字サイズ}/{背景色}/{文字色}/300×100.png

※背景色・文字色はRGBの16進数表記

上記をご参考に、変更したい場所の色や数値を指定してあげます。
例えば、下記の場合は、文字サイズ、背景色、文字色全て指定している場合です。

例) <img src=”http://placehold.jp/32/0048ff/ffffff/300×100.png”>

ファイルフォーマットを変更する方法

ファイルのフォーマットはPNGとJPGの2種類が用意されています。
CSSで半透明機能を利用している場合は、PNG形式で利用すると
良いと思います。

テキストを変更する方法

http://placehold.jp/300×100.png?text={表示したい文字列}

ダミー画像に表示する文字を変更することが出来ます。

例) <img src=”http://placehold.jp/32/ff4148/ffffff/300×100.png?text=ダミー画像”>

ご自身で用意出来るものではありますが、
とても簡単にダミー画像を設定することが出来ますので、
作業の効率化のためにも、試しに使ってみてはいかがでしょうか。

●3年ぶりに帰ってきた「藤田哲也の個別コンサルティング」

 ⇒ http://www.japan-forum.jp/sp/kojin.htm

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ