Purple town

HTMLテンプレートの活用術１

HTMLテンプレートの活用術１ | 活用術２ | 活用術３ | 活用術４ | 活用術５ | 活用術６ |

よくあるアフィリ用のHTMLテンプレートを自分風にアレンジしてみましょう。

まずは気に入ったHTMLテンプレートをテンプレート集からコピーしてきます。↓

■■■

★★★ ここにタイトルを入れる ★★★

■■■

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
★★★ ここに紹介文を入れる ★★★

■

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
★★★ ここに紹介文を入れる ★★★

■

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
★★★ ここに紹介文を入れる ★★★

これをテーブル【table】ごとに分解してみましょう。

【１】

<table width="80%" border="0" cellspacing="0" cellpadding="4" bgcolor="#ccccff" align="center">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="8" bgcolor="#ffffff">
<tr>
<td align="left"><b><font color="#3366CC">■■■</font></b></td>
<td align="center" nowrap><b><font color="#000066">

★★★ ここにタイトルを入れる ★★★

</font></b></td>
<td align="right"><b><font color="#3366CC">■■■</font></b></td>
</tr>
</table>
</td>
</tr>
</table>

【２】

【３】

<table width="80%" border="0" cellspacing="6" cellpadding="0" align="center">
<tr valign="top">
<td width="50%">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="80">

<IMG SRC="画像アドレス" ALT="★★★ ここにアフィリエイト用の画像のソースを入れる ★★★" width="100" height="100">

</td>
<td width="8">
<table width="8" border="0" cellspacing="0" cellpadding="0"><tr><td></td></tr></table>
</td>
<td width="100%"><font size="-1">

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>

</font></td>
</tr>
</table>

</td>
<td width="50%">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="80">

<IMG SRC="画像アドレス" ALT="★★★ ここにアフィリエイト用の画像のソースを入れる ★★★" width="100" height="100">

</td>
<td width="8">
<table width="8" border="0" cellspacing="0" cellpadding="0"><tr><td></td></tr></table>
</td>
<td width="100%"><font size="-1">

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>

</font></td>
</tr>
</table>

</td>
</tr>
</table>

【４】

<table width="80%" border="0" cellspacing="6" cellpadding="0">
<tr valign="top">
<td width="50%">

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr valign="top">
<td width="80">

<IMG SRC="画像アドレス" ALT="★★★ ここにアフィリエイト用の画像のソースを入れる ★★★" width="100" height="100">

</td>
<td width="8">
<table width="8" border="0" cellspacing="0" cellpadding="0"><tr><td></td></tr></table>
</td>
<td width="100%"><font size="-1">

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>

</font></td>
</tr>
</table>

</td>
<td width="50%">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="80">

<IMG SRC="画像アドレス" ALT="★★★ ここにアフィリエイト用の画像のソースを入れる ★★★" width="100" height="100">

</td>
<td width="8">
<table width="8" border="0" cellspacing="0" cellpadding="0"><tr><td></td></tr></table>
</td>
<td width="100%"><font size="-1">

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>

</font></td>
</tr>
</table>

</td>
</tr>
</table>

【５】

<table width="80%" border="0" cellspacing="6" cellpadding="0" align="center">
<tr valign="top">
<td width="50%">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="10"><font size="-1" color="#000066">■</font></td>
<td width="8">
<table width="8" border="0" cellspacing="0" cellpadding="0"><tr><td></td></tr></table>
</td>
<td width="100%"><font size="-1">

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>

</font></td>
</tr>
</table>

</td>
<td width="50%">

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="10"><font size="-1" color="#000066">■</font></td>
<td width="8">
<table width="8" border="0" cellspacing="0" cellpadding="0"><tr><td></td></tr></table>
</td>
<td width="100%"><font size="-1">

★★★ ここにアフィリエイト用のテキストリンクのソースを入れる ★★★
<br>
★★★ ここに紹介文を入れる ★★★
<br>

</font></td>
</tr>
</table>

</td>
</tr>
</table>

</td>
</tr>
</table>

１つのテーブルのように見えて、<table> ～ </table>で分けてみると実は５つのテーブルから出来ていることが判ります。

ジャンル別一覧