2005年9月15日
画像で作成した枠で囲む(テーブルヴァージョン)
今回は、「画像で作成した枠で囲む(テーブルヴァージョン)」方法について説明します。
画像を利用すると、下の完成サンプルのように、角が丸い枠で囲むことができます。今回は、テーブルを利用して作成する方法を説明します。
■ 完成サンプル
では、エントリー部分を画像で作成した枠で囲む方法を例にして説明します。
1. 画像枠を作成する
まず、画像を使用して枠をテーブルで作成します。
作成方法は、画像を利用した枠の作成(テーブルヴァージョン)を参考にしてください。
2. 画像をアップロードする
作成した画像をサーバーにアップロードします。
画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。
3. HTMLを編集する
次に、「メインページ」「カテゴリー・アーカイブ」「個別エントリーアーカイブ」「日付アーカイブ」を編集します。
編集方法は、9分割したテーブルの中央セルの部分に、エントリーを書き込むようにします。また、エントリーごとに画像枠で囲むようにします。
具体的には、テーブルの中央セルの部分に、各テンプレートの <MTEntries>~</MTEntries>で挟まれた部分を書き込むようにします。
<メインページ、カテゴリ、個別エントリー、日付アーカイブ>
赤文字が追加した記述です。
なお、表の横幅、セルの横幅・高さ、画像の横幅・高さ、ファイル名は、使用する画像に応じて、書き換えてください。
編集後は保存して再構築すると完了です。
ブログランキングに参加中です。応援お願いします。
画像を利用すると、下の完成サンプルのように、角が丸い枠で囲むことができます。今回は、テーブルを利用して作成する方法を説明します。
■ 完成サンプル
|
||||||
| カスタマイズ方法(MovableType編) |
では、エントリー部分を画像で作成した枠で囲む方法を例にして説明します。
1. 画像枠を作成する
まず、画像を使用して枠をテーブルで作成します。
作成方法は、画像を利用した枠の作成(テーブルヴァージョン)を参考にしてください。
2. 画像をアップロードする
作成した画像をサーバーにアップロードします。
画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。
3. 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> |
赤文字が追加した記述です。
なお、表の横幅、セルの横幅・高さ、画像の横幅・高さ、ファイル名は、使用する画像に応じて、書き換えてください。
編集後は保存して再構築すると完了です。
ブログランキングに参加中です。応援お願いします。
パーマリンク | 投稿者 りっち | 2005年9月15日 10:07
|
|
はてなブックマークに追加
|
Yahooブックマークに登録
関連記事
トラックバック
このエントリーのトラックバックURL:
コメント
コメントしてください
