DOTS DESIGN の素材の使いかた
ドットデザインの素材の使い方を簡単に説明します。
普通に画像として使う場合は簡単です。
■STEP1
DOTS DESIGN のカテゴリや検索を使って、お気に入りの素材を見つけダウンロードボタンで素材をダウンロードして下さい。
■STEP2
ブログなどの機能で画像の挿入から再度ブログにダウンロードした素材をアップロードして、画像をブログに反映してください。または、FTPソフトでサーバーにアップロードして、
<img src="画像までのパス" />というHTMLを記述して素材に使いましょう。
最近ではこの方法がよくとられてます。
このページのカテゴリの前についているやなどはCSSを利用して背景画像として使われています。
HTMLとCSSの知識がある方はこちらをオススメします。一度タグにCSSを指定するだけでimgタグを繰り返し書かなくても画像を表示することが出来るため非常に重宝します。
たとえばリストタグ<li>に背景画像を付けると下記のようにページをドレスアップすることが出来ます。
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
</div>
padding-left:17px;/*背景分字下げする*/
background:url(CSSから背景画像までのパス) no-repeat ●px ○px;
}
ちなみにno-repeatは背景繰り返しなし ●px ○pxの部分は画像の位置調整です。省略してもかまいません。
普通に画像として使う場合は簡単です。
■STEP1
DOTS DESIGN のカテゴリや検索を使って、お気に入りの素材を見つけダウンロードボタンで素材をダウンロードして下さい。
■STEP2
ブログなどの機能で画像の挿入から再度ブログにダウンロードした素材をアップロードして、画像をブログに反映してください。または、FTPソフトでサーバーにアップロードして、
<img src="画像までのパス" />というHTMLを記述して素材に使いましょう。
背景画像として使う場合
最近ではこの方法がよくとられてます。
このページのカテゴリの前についているやなどはCSSを利用して背景画像として使われています。
HTMLとCSSの知識がある方はこちらをオススメします。一度タグにCSSを指定するだけでimgタグを繰り返し書かなくても画像を表示することが出来るため非常に重宝します。
たとえばリストタグ<li>に背景画像を付けると下記のようにページをドレスアップすることが出来ます。
- ・リスト1
- ・リスト2
- ・リスト3
- ・リスト4
- ・リスト5
before → after
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
ソース
<div class="howtolist" style="width: 200px; float: right;"><ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>
</div>
css
.howtolist li{padding-left:17px;/*背景分字下げする*/
background:url(CSSから背景画像までのパス) no-repeat ●px ○px;
}
ちなみにno-repeatは背景繰り返しなし ●px ○pxの部分は画像の位置調整です。省略してもかまいません。