Purple town

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

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

【１】の構造が判ったと思うので外側のケイを変えてみましょう。変えるのは一番最初の↓のタグ部分だけです。

まずはこの指定を「style」の形に変更します。（同じ命令文を同色にしてます）

■■■

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

■■■

見た目は同じです。
もし外枠の色を変えるなら「bgcolor="#ccccff"」か「background-color:#ccccff;」を、
枠の太さを変えるなら「cellpadding="4"」か「padding:4px;」を書き換えます。

■■■

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

■■■

外枠の色を「#ffcccc」に、枠の太さを「1px」にしてみました。

さて、せっかくスタイル形式にしたのだから枠を二重線や水玉にしたいなぁと思いませんか？二重線や水玉などは罫線の指定になるので緑の部分の書き換えをします。

↓

【border】にスタイル・太さ・色の順に指定を入れます。

■■■

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

■■■

縁がじゃまなので取ってしまいましょう。

↓

■■■

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

■■■

中を塗りつぶす場合は２つ目ののテーブルの色指定を外すか同色の指定をします。

と

もしくは

<P ALIGN=Center>
<table style="width:80%;border:double 5px #000066;margin:0px;padding:0px; background-color:#ccccff; text-align:center;">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="8" bgcolor="#ccccff" >
<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>
</P>

■■■

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

■■■

ジャンル別一覧