オリジナルのテンプレートを作成する上で、画像利用をする方法や自サイトへのリンクを貼る（著作権表示の意味合いが強い）事で独自のテンプレートである事を強調する事が出来ます。ここではテキストのみのテンプレートを発展させて画像リンク型のテンプレートの作成方法を解説します。。画像の作成方法は最低限の事しか記しませんのでご了承ください。
1.設計図（イメージ）を書く
テキストのみで作成したテンプレートのタイトル部分に画像を表示して、リンクを貼ってみます。こんなイメージになります。
2.絵を書く
タイトル部分に表示する絵を書きます。「ペイント」の登場です。
設計では30×30ピクセルの画像なので、キャンパスのサイズを指定しましょう。
適当に絵を書き、gif画像で保存してください。
cat.gif star.gif
このままでも良いのですが背景画像が白くなってしまうので背景画像を透かす方法を解説します。
背景の色を透かす為にはマイクロソフトフォトエディターを利用します。もちろん他の画像レタッチソフトでも構いません。このソフトはマイクロソフトオフィスをお持ちの方ならオプションでインストールできます。もし、ソフトをお持ちで無い場合は背景画像の色を予めテンプレートの色と合わせておく必要があります。
まず画像を開きます。そして「透明色に変更」のペンを選択し透明色にしたい部分をクリックします。
今回は白い部分の背景をクリックすると下のような窓が表示されます。「OK」を押してください。
背景画像が格子の灰色と白になれば透けました。ここでまた保存しましょう。
3.画像を挿入するスペースを設ける
画像を挿入します。挿入する為のスペース30×30を作成しないといけません。1行目の段の<TR>の中に<TD>を2つ追加する事でセルが2個増えます。幅の調整も忘れないでください。2行目の段の注意点としてはCOLSPAN=3を忘れずに追加しておいてください。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<CENTER>
<TABLE BORDER=1 WIDTH=600 HEIGHT=400><TR>
<TD HEIGHT=30 BGCOLOR=#66CCFF WIDTH=30></TD>
<TD HEIGHT=30 BGCOLOR=#66CCFF WIDTH=540>
<P ALIGN=center><FONT COLOR=#000099><B>★商品タイトル★</FONT>
</TD>
<TD HEIGHT=30 BGCOLOR=#66CCFF WIDTH=30></TD>
</TR>
<TR>
<TD HEIGHT=370 COLSPAN=3>
<P ALIGN=center><FONT COLOR=#000099>◆商品説明◆</FONT>
<P>商品説明文を記載します
<P ALIGN=center><FONT COLOR=#000099>◆支払方法◆</FONT>
<P>支払方法説明文を記載します
<P ALIGN=center><FONT COLOR=#000099>◆発送方法◆</FONT>
<P>発送方法説明文を記載します
<P ALIGN=center><FONT COLOR=#000099>◆その他◆</FONT>
<P>その他の事を記載します
</TD>
</TR></TABLE>
</CENTER>
</B>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容おわり＝＝＝＝＝＝＝＝＝＝＝＝＝＝
4.画像を挿入する
スペースに画像を挿入します。画像リンク<IMG
SRC="http://auctempnavi.fc2web.com/temp/cat.gif ">を加えます。尚、★の画像は「star.gif」です
作成した画像を何処かのサーバに保存しておかなくてはいけませんので、ヤフオク用画像掲示板等を借りてリンク先をそちらにすると良いでしょう。安定したサーバにデータをアップロードする事をお勧めします。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<CENTER>
<TABLE BORDER=1 WIDTH=600 HEIGHT=400><TR>
<TD HEIGHT=30 BGCOLOR=#66CCFF WIDTH=30><IMG SRC="http://auctempnavi.fc2web.com/temp/cat.gif "></TD>
<TD HEIGHT=30 BGCOLOR=#66CCFF WIDTH=540>
<P ALIGN=center><FONT COLOR=#000099><B>★商品タイトル★</FONT>
</TD>
<TD HEIGHT=30 BGCOLOR=#66CCFF WIDTH=30><IMG SRC="http://auctempnavi.fc2web.com/temp/cat.gif "></TD>
</TR>
<TR>
<TD HEIGHT=370 COLSPAN=3>
<P ALIGN=center><FONT COLOR=#000099>◆商品説明◆</FONT>
<P>商品説明文を記載します
<P ALIGN=center><FONT COLOR=#000099>◆支払方法◆</FONT>
<P>支払方法説明文を記載します
<P ALIGN=center><FONT COLOR=#000099>◆発送方法◆</FONT>
<P>発送方法説明文を記載します
<P ALIGN=center><FONT COLOR=#000099>◆その他◆</FONT>
<P>その他の事を記載します
</TD>
</TR></TABLE>
</CENTER>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容おわり＝＝＝＝＝＝＝＝＝＝＝＝＝＝
猫画像リンク
 |
★商品タイトル★ |
|
|
◆商品説明◆ 商品説明文を記載します ◆支払方法◆ 支払方法説明文を記載します ◆発送方法◆ 発送方法説明文を記載します ◆その他◆ その他の事を記載します |
||
★画像リンク
 |
★商品タイトル★ |
|
|
◆商品説明◆ 商品説明文を記載します ◆支払方法◆ 支払方法説明文を記載します ◆発送方法◆ 発送方法説明文を記載します ◆その他◆ その他の事を記載します |
||
5.リンク先（著作権）の表示
テンプレートの最後の部分にリンク先を挿入します。これによりテンプレートの製作者が明らかになります。フォントサイズを小さめの2ぐらいにすると良いと思います。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<CENTER>
<TABLE BORDER=1 WIDTH=600 HEIGHT=400><TR>
<TD HEIGHT=30 BGCOLOR=#66CCFF WIDTH=30><IMG SRC="http://auctempnavi.fc2web.com/temp/star.gif "></TD>
<TD HEIGHT=30 BGCOLOR=#66CCFF WIDTH=540>
<P ALIGN=center><FONT COLOR=#000099><B>★商品タイトル★</FONT>
</TD>
<TD HEIGHT=30 BGCOLOR=#66CCFF WIDTH=30><IMG SRC="http://auctempnavi.fc2web.com/temp/star.gif "></TD>
</TR>
<TR>
<TD HEIGHT=370 COLSPAN=3>
<P ALIGN=center><FONT COLOR=#000099>◆商品説明◆</FONT>
<P>商品説明文を記載します
<P ALIGN=center><FONT COLOR=#000099>◆支払方法◆</FONT>
<P>支払方法説明文を記載します
<P ALIGN=center><FONT COLOR=#000099>◆発送方法◆</FONT>
<P>発送方法説明文を記載します
<P ALIGN=center><FONT COLOR=#000099>◆その他◆</FONT>
<P>その他の事を記載します
</TD>
</TR></TABLE>
<FONT SIZE=2 COLOR=#0000FF><A HREF=http://auctempnavi.fc2web.com/
TARGET=new>Auction Template Navi</A></FONT>
</CENTER>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝メモ帳内の内容おわり＝＝＝＝＝＝＝＝＝＝＝＝＝＝
|
★商品タイトル★ |
|
|
◆商品説明◆ 商品説明文を記載します ◆支払方法◆ 支払方法説明文を記載します ◆発送方法◆ 発送方法説明文を記載します ◆その他◆ その他の事を記載します |
||
せっかく作成したのでこちらのテンプレートを無償配布します。利用の仕方はわかりますよね？
|
ホームページビルダーなどを利用すると簡単にタグが作製できます。（\1500以上送料無料）
Vectorにてダウンロードで購入すると更に安く、今すぐ利用できます。「
ホームページ・ビルダー」で検索してみてください。
