薔薇の横型メニューフレームです
この画像は、上、下、左、右の4つの画像と
それぞれのボタン画像で構成されています
フレーム部分の幅は自由ですので
ボタンは、お好きなだけ増やす事が出来ます
-----
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
+ フレーム部分の部品です+
![]() |
![]() | ![]() |
-----
+ 使い方+
下記のようなテーブルを作ります
テーブル全体の高さは78、幅は自由です
テーブルの線の太さは「0(ゼロ)」にして下さいね
高さ 78 幅52 |
高さ 78 幅52 |
左と右のセルの大きさは52 × 78
赤くしてある真ん中のセルの高さは78 幅は「60×使うボタンの数」です
これは、ボタン画像の幅が一つ「60」なためです
※例えばボタンを4つ並べたいなら
60×4=240になります
一番上のサンプルがボタン4つなので、幅は240になっています
そして、背景色を「#660000」に設定します
(この背景色指定は無くても良いのですが、ブラウザの違いやMacで表示したりする時に
ボタンと周りのテーブルに隙間が出来る場合があるため、隙間が出来た場合に
目立たなくする方法として、ボタンと同じ色で背景色を指定しています)
後は、ダウンロードした画像を左と右部分にはめ込み
上下の細いセルの背景画像に、小さい画像を設定します
まん中のセルには、お好きなボタン画像を配置して下さい
以下は、フレームのテーブル部分のHTMLソースです
参考にして下さいね
(ボタンを4つ使用した場合のソースです)
<table border="0" cellpadding="0"
cellspacing="0">
<tr>
<td><img src="botan-rose-tableleft.gif"
width="52" height="78" border="0"></td>
<td background="new/botan-rosew-00.gif"><img
src="お好きなボタンの名前.gif"
width="60" height="58" border="0"></td>
<td background="new/botan-rosew-00.gif"><img
src="お好きなボタンの名前.gif"
width="60" height="58" border="0"></td>
<td background="new/botan-rosew-00.gif"><img
src="お好きなボタンの名前.gif"
width="60" height="58" border="0"></td>
<td background="new/botan-rosew-00.gif"><img
src="お好きなボタンの名前.gif"
width="60" height="58" border="0"></td>
<td><img src="botan-rose-tableright.gif"
width="52" height="78" border="0"></td>
</tr>
</table>
graphix by s嬢+痢煙 |