ご案内(初めての方へ)
フリー素材 TRAD+NOTE にお越しいただきありがとうございます。
かっこいい、かわいい、おしゃれな、クールな・・・
こだわりのある個性的なホームページづくりに役立てていただけると嬉しいです。
ここでは、画像のダウンロードの方法やデータのファイル形式による違い、
ロールオーバーの設定のしかたなどを説明しています。
画像のダウンロードのしかた
Windowsの場合
・保存したい画像の上でマウス右クリックします。
・名前を付けて画像を保存を選択します。
・保存先のフォルダを選んで保存します。
Macの場合
・保存したい画像の上でControl キーを押しながらクリックします。
・別名で画像を保存を選択します。
・保存先のフォルダを選んで保存します。
まとめてダウンロード
このボタンがある場合は一括ダウンロードができます(zip圧縮)。
(今はまだ少ないですが、おいおい増やしていく予定です。)
ロールオーバーの設定方法
↓マウスポインタを重ねてみてください。(リンクはしていません)
このようにマウスポインタを重ねると画像が変わることを「ロールオーバー」といい、
この見本のようなリンクボタンとしてよく使われます。
WEBページ(ホームページ)の場合は、
通常、スタイルシート(CSS)の background プロパティで設定しますが、
CSSがまだよくわからなくて、という人や、ブログで使いたいというときは、
以下の簡易タグを使えば、HTMLだけで設定できます。
<img src="A" onmouseover="this.src='B'"onmouseout="this.src='C'">
A:はじめに表示しておく画像
B:マウスを乗せた時に表示する画像
C:マウスをはずした時に表示する画像(通常はAと同じもの)
このように、アニメーションGIFを使うこともできます。
データのファイル形式による違い
当サイトで配布しているフリー素材のファイル形式は、
GIF、JPEG、PNG の3種類です。
ファイル形式による主な違いは以下のとおりです。
ファイル形式 | アニメーション | 背景透過 | リサイズ(縮小)** |
---|---|---|---|
GIF | O | O | X |
JPEG | X | X | O |
PNG | X | O* | O |
*PNGの透過はIE6以下は非対応です。(解決法はあるようですが・・・)
**リサイズが O の場合でも、拡大は画像がぼやけるのでおすすめしません。
当サイトのフリー素材はアニメーションを基本にしているので、大部分が GIF です。
GIF は特に、大きさを変えて表示すると綺麗に表示されないことがあります。
(表示のしかたはブラウザによって違います)
両端がオリジナルサイズ(大:100x100px、小:70x70px)で、
中左が、小を 100px に拡大表示したもの、中右が、大を 70px に縮小表示したものです。
サイト内検索