画像で作成した枠で囲む（テーブルヴァージョン）

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

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

■ 完成サンプル

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

カスタマイズ方法（MovableType編）

では、エントリー部分を画像で作成した枠で囲む方法を例にして説明します。

1. 画像枠を作成する
まず、画像を使用して枠をテーブルで作成します。
作成方法は、画像を利用した枠の作成（テーブルヴァージョン）を参考にしてください。

２. 画像をアップロードする
作成した画像をサーバーにアップロードします。
画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。

３. HTMLを編集する
次に、「メインページ」「カテゴリー・アーカイブ」「個別エントリーアーカイブ」「日付アーカイブ」を編集します。

編集方法は、9分割したテーブルの中央セルの部分に、エントリーを書き込むようにします。また、エントリーごとに画像枠で囲むようにします。

具体的には、テーブルの中央セルの部分に、各テンプレートの　<MTEntries>～</MTEntries>で挟まれた部分を書き込むようにします。

＜メインページ、カテゴリ、個別エントリー、日付アーカイブ＞

<MTEntries> <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"> 　（省略） </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> </MTEntries>

赤文字が追加した記述です。
なお、表の横幅、セルの横幅・高さ、画像の横幅・高さ、ファイル名は、使用する画像に応じて、書き換えてください。

編集後は保存して再構築すると完了です。

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