HTMLサンプルページを作るときにダミー画像の作成が簡単にできるサービスCSS2018.02.22サンプルページを作るときにダミー画像の作成が簡単にできるサービス長いタイトルになってしまいましたが、まずは下記の画像をご覧ください。上の画像は私が作成したものではありません。imgタグに少しだけコードを入力し、自動的に生成させたダミー画像です。この画像のサイズや色、中に入れるテキストなどは自由にカスタマイズできます。このように思い通りのサイズやテキストでダミー画像が作成できたら、サンプルページなどをレイアウトする際に便利だと思いませんか?ここでは、このように簡単にダミー画像が作成できるサービス「Holder.js」を使用して、ダミー画像を作る方法についてお話します。複数の要素を指定Holder.jsのダウンロードと下準備それではHolder.jsの使い方を見ていきましょう。Holder.jsへアクセスして必要なファイルをダウンロードします。Holder.js」をクリックしてZIPファイルをダウンロードします。ZIPファイルを解答して中のフォルダを開きます。いろんなファイルが入っていますが、この中でとりあえず必要なのは「holder.js」というファイルだけです。ちなみに「test」フォルダの中にある「index.html」ファイルをブラウザで開くといろんな使い方のサンプルがありますので、あとで確認してみてください。このファイルは、他のjavaScriptと同じように「holder.js」ファイルをサーバーにアップロードして、ページ内に読み込めば使えるようになります。WordPressで使用する場合は、使用中のテーマのディレクトリ(フォルダ)直下か、「js」フォルダがあればその中に入れても良いですね。FTPソフトなどを使ってファイルをアップしたら、そのファイルをページのヘッダーで読み込みます。WordPressの管理画面「外観」>「テーマの編集」から「テーマヘッダー」を開き、下記のコードを</head>の上あたりに貼り付けてください。?>/js/holder.js"></script>ファイルをアップロードした場所に応じて上記からコードを選んでくださいね。以上で準備は完了です。準備ができたら早速、ダミー画像を作ってみましょう。data-src="holder.js/300x200">上記が基本となるコードです。height」という意味です。好きなサイズを入力するとそのサイズの画像が生成されます。画像の色を変更したいときは、サイズの後に?bg=カラーコードを入力します。data-src="holder.js/300x200?bg=#AFF1A6">テキストの色を指定テキストの色を指定したいときは、サイズの後に?fg=カラーコードを入力します。初期設定ではサイズが表示されますが、任意のテキストを入力することも可能です。テキストの入力をするときは?text=テキストという形で入力します。画像の色とテキストとテキストの色など、いろんな要素を同時に指定したいときは、それぞれのプロパティの間に「&」を入力します。data-src="holder.js/300x200?bg=#f399bc&fg=#FFF&text=テキスト">とりあえず、このくらい覚えておけば十分でしょう。いろんな使い方を知りたい方は、先ほどお話した「test」フォルダのファイルを見てみてください。以上がHolder.jsの使い方でした。