menu

redclover01_c5.gif


◆GIF素材について◆

◆フレーム素材の組み方◆





























gif

◆GIF形式の素材◆
当サイトで扱っている素材はほとんどがGIF形式です(まれに色数の多いものはJPG形式ですが) そしてGIF素材の中でも

[1] 不透過GIF
[2] 透過GIF
[3] 白(黒)背景用透過GIF

ほぼこの3つにわかれます。

*透過GIFとは?*
GIF形式の画像は、特定の1色だけを透明にして表示する事が出来ます。イラスト部分以外の 必要ない(表示させたくない)部分を透明に指定する事によって、様々なデザインに利用出来ます。




◆不透過GIF◆

apple1.gif
何も透過していない状態の素材ですので、背景の色は決まってしまいます。 これを柄ありの黒っぽい背景にのせても…。

daia01_h2.gif

いかにも、張り付いてます!という感じであまりかっこよくはありませんね。
背景画像をどうしても使いたい場合はいっその事、黒い背景のテーブルを組んでしまった方が いいかもしれません。
*使用例*




◆透過GIF◆

demon_i1.gif拡大図→ demon_i2.gif

アイコンの周りのグレーが透過されている部分です(わかりやすいように色付けしてあります)
イラスト部分と周りの部分の境目がはっきりわかれているので(拡大図参照)どんな背景にでものせる 事が出来ます。

demon1.gif demon.gif





◆白(黒)背景用透過GIF◆

cherry02.gif拡大図→ cherry02_big.gif

イラストの周りのグレーが透過されている部分です(わかりやすいように色付けしてあります)
イラスト部分から周りの部分へ、自然に色が馴染むようにしてある為、部分的にフチが 残ります。(上の素材は白い背景に馴染むように透過されているので、まわりが白っぽく なってますね)

cherry02b.gif cherry02w.gif

白背景用のものを黒っぽい背景にのせると、左のようにフチが目立ってしまい美しくありません。 右のように白っぽいものなら大丈夫です。



◆MENUへ◆

















frame
◆フレーム素材の組み方◆

テーブルタグに素材を並べて、フレームを作りましょう。
. . .
. . .
. . .


↑のテーブルを表示させるとこんな風になります。
a e b
g h
c f d

a,b,c,d は固定サイズのテーブル ですが、e,fは横サイズを g,hは縦サイズをそれぞれ 変える事によって、フレームの大きさを変更出来ます。また中央のテーブルのサイズを変更しても可能です(その際は元の画像のサイズの倍数で変更して下さい。)

タグは以下の通りです。


<table border="0" cellspacing="0" cellpadding="0" >
<!--上段のテーブル-- >
<tr>
<td height="50" width="50" background="aのファイル名">
</td>
<td height="50" width="100" background="eのファイル名">
</td>
<td height="50" width="50" background="bのファイル名">
</td>
</tr>

<!--中段のテーブル-->
<tr>
<td height="100" width="50" background="gのファイル名">
</td>
<td height="100" width="100">
ここに文字を入力すると中央のテーブルに反映されます。画像の貼り込みも可能です。

</td>
<td height="100" width="50" background="hのファイル名">
</td>
</tr>

<!--下段のテーブル-->
<tr>
<td height="50" width="50" background="cのファイル名">
</td>
<td height="50" width="100" background="fのファイル名">
</td>
<td height="50" width="50" background="dのファイル名">
</td>
</tr>
</table>


↓は中段のテーブルの真ん中のサイズを、縦200×横100にしたものです。
画像の貼り込みや、別の背景を入れる事も出来ます。

. . .
. ◆tea time◆

teacaddy02_cp.gif
.
. . .



◆ネットスケープの表示について◆

このフレームの表示は、テーブルの背景として画像をそれぞれ貼り込む事によって、大きさを 自由に変更出来ますが、一部のネスケではきちんと表示されません。(ちなみに私が確認を しているのはMac版の4.04です)
ネスケの場合、そのテーブルの中にテキストにあたるものが入っていないと、何も表示してくれない ようなので(要は、背景だけの表示は不可という事です) 上記のタグをそのままで使うと、ネスケのブラウザでは周りのフレームが 一切表示されません。
私の対策としては、 以下のタグをそれぞれのテーブルの<td></td>の間に入れます。

<font color="white">.</font>

なるべく目立たないように『.(ドット)』を入れました。 なにかしらのテキストさえ入っていれば、表示は可能です。黒っぽい画像の場合は カラーをblackにするとよいでしょう。



◆MENUへ◆