それでは実際にテンプレートを作ってみましょう。ここに記すのはメモ帳を使った地道にテンプレートを作る方法です。実はもっと簡単にテンプレートを作成する方法がありますが、別のコンテンツに記します。
1.設計をする
設計をするといってもそんなに難しい事ではありません。普通に足し算や引き算が出来て、イメージさえ浮かべば大丈夫です。
2.設計図（イメージ）を書く
以下のような設計図を書いてみてください
3.まずは大枠になるテーブルタグを書く
テンプレートのの大枠となるテーブルタグを書きます。メモ帳を開き600×400ピクセルのテーブル枠を記入してみましょう。ついでに真中に表示するように<CENTER>タグを記入します。線幅（BORDER）は1を指定しました。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<CENTER>
<TABLE BORDER=1 WIDTH=600 HEIGHT=400>
</TABLE>
</CENTER>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容おわり＝＝＝＝＝＝＝＝＝＝＝＝＝＝
4.テーブル内を2行にする
設計図のセルは2個あるので分割してあげる必要があります。<TR>と<TD>を使いセルに分割します。2行1列ですので以下のようなタグを記入します。上の段の高さは30ピクセル。下の段の高さは370ピクセルです。合計するとテーブルタグの高さの400ピクセルになります。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<CENTER>
<TABLE BORDER=1 WIDTH=600 HEIGHT=400>
<TR>
<TD HEIGHT=30></TD>
</TR>
<TR>
<TD HEIGHT=370></TD>
</TR>
</TABLE>
</CENTER>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容おわり＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ここまでで作成されたテンプレートはこのようになります。
5.背景色を変える
味気ないのでタイトル部分に背景色をつけてみます
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<CENTER>
<TABLE BORDER=1 WIDTH=600 HEIGHT=400>
<TR>
<TD HEIGHT=30 BGCOLOR=#66CCFF></TD>
</TR>
<TR>
<TD HEIGHT=370> </TD>
</TR>
</TABLE>
</CENTER>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容おわり＝＝＝＝＝＝＝＝＝＝＝＝＝＝
するとこうなります。
6.文章を加える
文章を加えるとそれらしく見えてくるので記入してみます。商品タイトルは太字（<B>）で真中（<CENTER>)に、商品説明も真中にもってきてみます。そして全体的には段落タグ（<P>）を用いました。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<CENTER>
<TABLE BORDER=1 WIDTH=600 HEIGHT=400>
<TR>
<TD HEIGHT=30 BGCOLOR=#66CCFF>
<P ALIGN=center><B>商品タイトル<B></P>
</TD>
</TR>
<TR>
<TD HEIGHT=370>
<P ALIGN=center>商品説明</P>
<P>商品説明文を記載します</P>
<P ALIGN=center>支払方法</P>
<P>支払方法説明文を記載します</P>
<P ALIGN=center>発送方法</P>
<P>発送方法説明文を記載します</P>
<P ALIGN=center>その他</P>
<P>その他の事を記載します</P>
</TD>
</TR>
</TABLE>
</CENTER>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容おわり＝＝＝＝＝＝＝＝＝＝＝＝＝＝
これを表示するとこうなります。
|
商品タイトル |
|
商品説明 商品説明文を記載します 支払方法 支払方法説明文を記載します 発送方法 発送方法説明文を記載します その他 その他の事を記載します |
7.装飾をする
文字に色をつけたり記号を入れたりしてみます。紺色の文字色にしてみます。以下のカラーチャートを参考に文字色などの変更をしてみてください。文字色の指定は（<FONT
COLOR=フォント番号>）で行います。
カラーチャート
| #ff0066 | #999999 | #ffcccc | |||
| #ff9933 | #ffcc33 | #ffffcc | |||
| #ff6633 | #ffcc66 | #cccc99 | |||
| #99cc66 | #99ff99 | #ffff99 | |||
| #0099ff | #3366ff | #99ccff | |||
| #6699ff | #000099 | #99ffff | |||
| #cc99cc | #990099 | #ffcccc | |||
| #6699ff | #ff6666 | #ffffff | |||
| #ff99c | #cc99ff | #ccffff | |||
| #ff9966 | #ffff99 | #ccff99 | |||
| #cc9966 | #ffcc66 | #ffffcc | |||
| #6699ff | #ffffff | #99ccff | |||
| #ff9900 | #99ff99 | #ffff33 | |||
| #003399 | #ffffff | #99ffff | |||
| #669999 | #666666 | #ffffcc | |||
| #006666 | #cc99cc | #cccc99 | |||
| #993333 | #cc99ff | #996699 | |||
| #00cc00 | #ffff00 | #99ffff | |||
| #99cc33 | #cccc99 | #ffff66 | |||
| #669933 | #ccff33 | #cccc66 | |||
| #000000 | #000099 | #663399 | |||
| #660000 | #cc9966 | #ffcc66 | |||
| #99ff99 | #ff9933 | #ffff66 | |||
| #ffff99 | #ff6699 | #ffff99 |
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<CENTER>
<TABLE BORDER=1 WIDTH=600 HEIGHT=400>
<TR>
<TD HEIGHT=30 BGCOLOR=#66CCFF>
<P ALIGN=center><FONT
COLOR=#000099><B>★商品タイトル★<B></FONT></P>
</TD>
</TR>
<TR>
<TD HEIGHT=370>
<P ALIGN=center><FONT
COLOR=#000099>◆商品説明◆</FONT></P>
<P>商品説明文を記載します</P>
<P ALIGN=center><FONT
COLOR=#000099>◆支払方法◆</FONT></P>
<P>支払方法説明文を記載します</P>
<P ALIGN=center><FONT
COLOR=#000099>◆発送方法◆</FONT></P>
<P>発送方法説明文を記載します</P>
<P ALIGN=center><FONT
COLOR=#000099>◆その他◆</FONT></P>
<P>その他の事を記載します</P>
</TD>
</TR>
</TABLE>
</CENTER>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容おわり＝＝＝＝＝＝＝＝＝＝＝＝＝＝
色をつけるとこのようになります。
|
★商品タイトル★ |
|
◆商品説明◆ 商品説明文を記載します ◆支払方法◆ 支払方法説明文を記載します ◆発送方法◆ 発送方法説明文を記載します ◆その他◆ その他の事を記載します |
これで完成です。
更に枠を何段にもする方法や画像を表示する方法も別コンテンツとして掲載します。
ホームページビルダーなどを利用すると簡単にタグが作製できます。（\1500以上送料無料）
Vectorにてダウンロードで購入すると更に安く、今すぐ利用できます。「
ホームページ・ビルダー」で検索してみてください。
おさらい
メモ帳とちょっとした知識を身につければ独自のテンプレートが作成できる。
