画像を利用した枠の作成（テーブルヴァージョン）

今回は、「画像を利用した枠の作成方法（テーブルヴァージョン）」について説明します。

画像を利用すると、下の完成サンプルのように、角が丸い枠で囲むことができます。今回は、テーブルを利用して作成する方法を説明します。

■ 完成サンプル

	ブログカスタマイズ講座～デザイン編 ・画像を利用した枠を作成するには ・画像を利用した枠の作成（テーブルヴァージョン） ・画像を利用した枠の作成（CSSヴァージョン） 　MTカスタマイズ講座～デザイン編 ・画像で作成した枠で囲む（テーブルヴァージョン） ・画像で作成した枠で囲む（CSSヴァージョン）

画像を利用した枠の作成方法（テーブル ver.）

1．枠の画像を作成する
まず、描画ソフトなどを使って枠を作成します。


2．画像を分割する
作成した画像枠を下記のように分割します。


3．テーブルを作成する
3行×3列のテーブルを作成し、横幅等を設定します。

1	2	3
4	5	6
7	8	9

★テーブルの設定
・横幅（width）は、任意のサイズを指定してください。
・罫線の幅（cellspacing）は、「0」にします。
・セル内の余白（cellpadding）は、「0」にします。
・枠の幅（border）は、「0」にします。
・各角（1、3、7、9）のセル幅は、「画像の横幅」を指定します。
・上辺、下辺（2、8）のセル幅は、「100%」を指定します。

※説明上、構造が分りやすくするために、枠の幅を「1」にしていますが、「0」にすることで、枠線を非表示にすることができます。

4．角の画像を貼り付ける
各角の画像を、テーブルに貼り付けます。


5．辺の画像を貼り付ける
各辺の画像は、中央セル部分のテキストが増えても自動的に対応できるように、背景画像として利用します。


6．ブログのHTMLファイルにを貼り付ける
完成したテーブルタグを、ブログのHTMLファイルに貼り付けます。
中央のセル部分に表示させたいテキスト等を書き込むと完成です。

	テキスト

＜記述例＞

<table width="163" cellpadding="0" cellspacing="0"> <tbody> <tr> <td width="8" bgcolor="#ffffff"><img src="hidariue.gif" width="8" height="15" border="0" alt=""></td> <td width="100%" background="ue.gif" bgcolor="#ffffff"></td> <td width="8" bgcolor="#ffffff"><img src="migiue.gif" width="8" height="15" border="0" alt=""></td> </tr> <tr> <td width="8" background="hidari.gif" bgcolor="#ffffff"></td> <td bgcolor="#ffffff" valign="top">テキスト<br> </td> <td width="8" background="migi.gif" bgcolor="#ffffff"></td> </tr> <tr> <td height="13" bgcolor="#ffffff"><img src="hidarisita.gif" width="8" height="13" border="0" alt=""></td> <td height="13" background="sita.gif" bgcolor="#ffffff"></td> <td height="13" bgcolor="#ffffff"><img src="migisita.gif" width="8" height="13" border="0" alt=""></td> </tr> </tbody> </table>

表の横幅、セルの横幅・高さ、画像の横幅・高さ、ファイル名は、使用する画像に応じて、書き換えてくださいね。

次回は、画像を利用した枠の作成（CSSヴァージョン）です。

ブログランキングに参加中です。応援お願いします。