薔薇のメニューフレームです
この画像は、上、下、左、右の4つの画像と
それぞれのボタン画像で構成されています
フレーム部分の高さは自由ですので
ボタンは、お好きなだけ増やす事が出来ます
-----
![]() |
||
|
|
|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
+ フレーム部分の部品です+
![]() |
||
![]() |
|
![]() |
![]() |
-----
+ 使い方+
下記のようなテーブルを作ります
テーブルの大きさは、幅150です
高さは任意ですが、上と下のセル
そして、左右、まん中のセルの幅だけは固定です
テーブルの線の太さは「0(ゼロ)」にして下さいね
150 × 83
|
||
幅
40 |
このセルの幅は そして #482338 に設定して下さい |
幅
40 |
150 × 63
|
まず一番上のセルの大きさは150 × 83
一番下は150 × 63に設定します
左右のセルの幅は40 高さは「27×使うボタンの数」です
これは、ボタン画像の高さが一つ「27」なためです
※例えばボタンを4つ並べたいなら
27×4=108になります
一番上のサンプルがボタン4つなので、高さは108になっています
そして、まん中のセルの背景色を「#482338」に設定します
後は、ダウンロードした2つの画像を上と下部分にはめ込み
左右の細いセルの背景画像に、左右の小さい画像を設定します
まん中のセルには、お好きなボタン画像を配置して下さい
以下は、フレームのテーブル部分のHTMLソースです
参考にして下さいね
<table border="0" cellpadding="0" cellspacing="0" width="150">
<tr height="83">
<td colspan="3" height="83">
<div align="center">
<img src="上部分の画像の名前.gif" width="150" height="83" border="0"></div>
</td>
</tr>
<tr>
<td width="40" background="左部分の画像の名前.gif">
<div align="center">
</div>
</td>
<td width="70" bgcolor="#482338">
<div align="center">
<p><img src="お好きなボタンの名前.gif" width="70" height="27" border="0"><img src="お好きなボタンの名前.gif" width="70" height="27" border="0"><img src="お好きなボタンの名前.gif" width="70" height="27" border="0"><img src="お好きなボタンの名前.gif" width="70" height="27" border="0"></p>
</div>
</td>
<td width="40" background="右部分の画像の名前.gif">
<div align="center">
</div>
</td>
</tr>
<tr height="63">
<td colspan="3" height="63">
<div align="center">
<img src="下部分の画像の名前.gif" width="150" height="63" border="0"></div>
</td>
</tr>
</table>
graphix by 痢煙 |