|
| |
|
ホーム・ページを作ったことがなくても絶対にダイジョウブ！
便利ツールを利用しておしゃれなネットショップがあなたにも簡単に作れます！ |
それでは、楽天と電脳卸ＡＳＰから仕入れてきたステキな雑貨商品たちのリンクソースを貼り付けて、あなたの
ネットショップ内に表示させてみましょう！ 当サイトはＨＰなんて作ったこともない初心者の人たちを対象と
していますから、できるだ初歩的な製作方法からこまめに解説してゆくことをモットーとしています。
初心者にとっては、先ほどコピーしてきたHTMLソースをビルダーを使って製作中のテンプレート内の
” どこに？どのように？ ” 貼り付ければ正しく表示されるのかが、わかり難いかもしれないので、
サンプルを使って解説してみます。
|
 |
これはｂａｂｙ’ｓ ｈｏｕｓｅさんのテンプレート集の中でも商品紹介用の
スペース内で商品画像とテキスト用（商品紹介文）のスペースが
わかりやすく区切られているタイプだと思いますので、このテンプレートを
使って実際に解説してみましょ！ |
下に表記したのが、このテンプレート作成用の全ソースになります。
赤文字で 『 ←○○○○○○・・・・・ 』 と書いているのが解説になりますから、この指示にしたがって
各リンクソース等を貼り付けてください。
<CENTER><TABLE width="700" cellpadding="7"
cellspacing="7">
<TBODY><TR><TD colspan="2"
bgcolor="#ff80c0">
<TABLE cellpadding="7" cellspacing="7"
bgcolor="#ffa6d2" width="100%"
height="100%">
<TBODY><TR><TD
bgcolor="#ffc8e3">
<TABLE width="100%" height="100%" cellpadding="7"
cellspacing="0" bgcolor="#ffcee7">
<TBODY><TR><TD
bgcolor="#ffecf5" align="center"><B><FONT color="#ff0099"
size="4">
タイトルです。 ←この部分が店名ですから、この”タイトル”文字を消去してあなたが考えた
店名を書き込みます。ビルダーでロゴを製作して挿入してもOKです！
</FONT></B></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR><TR>
<TD
bgcolor="#ff80c0" width="350">
<TABLE cellpadding="7" cellspacing="7"
bgcolor="#ffa6d2" width="100%"
height="100%">
<TBODY><TR><TD
bgcolor="#ffc8e3">
<TABLE width="100%" height="100%" cellpadding="7"
cellspacing="0" bgcolor="#ffcee7">
<TBODY><TR><TD
bgcolor="#ffecf5" width="75" align="center">
<TABLE width="70"
height="70" cellspacing="1"
bgcolor="#ff0099">
<TBODY><TR><TD bgcolor="#ffc8e3"
align="center">
画 ←左側の一番上の画像スペースですから、この”画”の文字を消去して楽天や電脳卸でコピーした
商品画像用のリンクソースをマウスの右クリックで貼り付けます。識別用に画像１とします。
</TD></TR></TBODY></TABLE></TD><TD
bgcolor="#ffecf5"><FONT color="#ff0099"
size="2">
商品説明
なるべく、簡潔に書いた方がキレイに表示するよ。<BR> ←この<BR>タグのあとが改行されます。
長いと、→隣が間延びしちゃうの。 ←画像１のテキスト用スペースになりますから、”商品説明”の
文字を消去してまずはじめに、コピーしてきたテキスト用のリンクソースを貼り付けます。
そのあとに改行して商品の紹介文（販売価格を含む）等を記入してください。
</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
<TD
bgcolor="#ff80c0" width="350">
<TABLE cellpadding="7" cellspacing="7"
bgcolor="#ffa6d2" width="100%"
height="100%">
<TBODY><TR><TD
bgcolor="#ffc8e3">
<TABLE width="100%" height="100%" cellpadding="7"
cellspacing="0" bgcolor="#ffcee7">
<TBODY><TR><TD
bgcolor="#ffecf5" width="75" align="center">
<TABLE width="70"
height="70" cellspacing="1"
bgcolor="#ff0099">
<TBODY><TR><TD bgcolor="#ffc8e3"
align="center">
画 ←右側一番上の商品画像用スペースになります。識別用に画像２とします。
</TD></TR></TBODY></TABLE></TD><TD
bgcolor="#ffecf5"><FONT color="#ff0099"
size="2">
商品説明 ←画像２のテキストスペースです。画像１の場合と同じにテキストリンクを貼り付けます。
</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR><TR>
<TD
bgcolor="#ff80c0" width="350">
<TABLE cellpadding="7" cellspacing="7"
bgcolor="#ffa6d2" width="100%"
height="100%">
<TBODY><TR><TD
bgcolor="#ffc8e3">
<TABLE width="100%" height="100%" cellpadding="7"
cellspacing="0" bgcolor="#ffcee7">
<TBODY><TR><TD
bgcolor="#ffecf5" width="75" align="center">
<TABLE width="70"
height="70" cellspacing="1"
bgcolor="#ff0099">
<TBODY><TR><TD bgcolor="#ffc8e3"
align="center">
画 ←左側上から２番目の商品画像用のスペースになります。識別用に画像３とします。
</TD></TR></TBODY></TABLE></TD><TD
bgcolor="#ffecf5"><FONT color="#ff0099"
size="2">
商品説明 ←画像３のテキストスペースです。
</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
<TD
bgcolor="#ff80c0" width="350">
<TABLE cellpadding="7" cellspacing="7"
bgcolor="#ffa6d2" width="100%"
height="100%">
<TBODY><TR><TD
bgcolor="#ffc8e3">
<TABLE width="100%" height="100%" cellpadding="7"
cellspacing="0" bgcolor="#ffcee7">
<TBODY><TR><TD
bgcolor="#ffecf5" width="75" align="center">
<TABLE width="70"
height="70" cellspacing="1"
bgcolor="#ff0099">
<TBODY><TR><TD bgcolor="#ffc8e3"
align="center">
画 ←右側上から２番目の商品画像用のスペースになります。識別用に画像４とします。
</TD></TR></TBODY></TABLE></TD><TD
bgcolor="#ffecf5"><FONT color="#ff0099"
size="2">
商品説明 ←画像４のテキストスペースです。
</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR><TR>
<TD
bgcolor="#ff80c0" width="350">
<TABLE cellpadding="7" cellspacing="7"
bgcolor="#ffa6d2" width="100%"
height="100%">
<TBODY><TR><TD
bgcolor="#ffc8e3">
<TABLE width="100%" height="100%" cellpadding="7"
cellspacing="0" bgcolor="#ffcee7">
<TBODY><TR><TD
bgcolor="#ffecf5" width="75" align="center">
<TABLE width="70"
height="70" cellspacing="1"
bgcolor="#ff0099">
<TBODY><TR><TD bgcolor="#ffc8e3"
align="center">
画 ←左側上から３番目の商品画像用のスペースになります。識別用に画像５とします。
</TD></TR></TBODY></TABLE></TD><TD
bgcolor="#ffecf5"><FONT color="#ff0099"
size="2"
>商品説明 ←画像５のテキストスペースです。
</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
<TD
bgcolor="#ff80c0" width="350">
<TABLE cellpadding="7" cellspacing="7"
bgcolor="#ffa6d2" width="100%"
height="100%">
<TBODY><TR><TD
bgcolor="#ffc8e3">
<TABLE width="100%" height="100%" cellpadding="7"
cellspacing="0" bgcolor="#ffcee7">
<TBODY><TR><TD
bgcolor="#ffecf5" width="75" align="center">
<TABLE width="70"
height="70" cellspacing="1"
bgcolor="#ff0099">
<TBODY><TR><TD bgcolor="#ffc8e3"
align="center">
画 ←右側上から３番目の商品画像用のスペースになります。識別用に画像６とします。
</TD></TR></TBODY></TABLE></TD><TD
bgcolor="#ffecf5"><FONT color="#ff0099"
size="2"
>商品説明 ←画像６のテキストスペースです。
</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR><TR>
<TD
bgcolor="#ff80c0" width="350">
<TABLE cellpadding="7" cellspacing="7"
bgcolor="#ffa6d2" width="100%"
height="100%">
<TBODY><TR><TD
bgcolor="#ffc8e3">
<TABLE width="100%" height="100%" cellpadding="7"
cellspacing="0" bgcolor="#ffcee7">
<TBODY><TR><TD
bgcolor="#ffecf5" width="75" align="center">
<TABLE width="70"
height="70" cellspacing="1"
bgcolor="#ff0099">
<TBODY><TR><TD bgcolor="#ffc8e3"
align="center">
画 ←左側一番下の商品画像用のスペースになります。識別用に画像７とします。
</TD></TR></TBODY></TABLE></TD>
<TD
bgcolor="#ffecf5"><FONT color="#ff0099"
size="2">
商品説明 ←画像７のテキストスペースです。
</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD>
<TD
bgcolor="#ff80c0" width="350">
<TABLE cellpadding="7" cellspacing="7"
bgcolor="#ffa6d2" width="100%"
height="100%">
<TBODY><TR><TD
bgcolor="#ffc8e3">
<TABLE width="100%" height="100%" cellpadding="7"
cellspacing="0" bgcolor="#ffcee7">
<TBODY><TR><TD
bgcolor="#ffecf5" width="75" align="center">
<TABLE width="70"
height="70" cellspacing="1"
bgcolor="#ff0099">
<TBODY><TR><TD bgcolor="#ffc8e3"
align="center">
画 ←右側一番下の商品画像用のスペースになります。識別用の画像８とします。
</TD></TR></TBODY></TABLE></TD><TD
bgcolor="#ffecf5"><FONT color="#ff0099"
size="2">
商品説明 ←画像８のテキストスペースです。
</FONT></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY>
</TABLE></CENTER>
|
タイトル部分をのぞいて、←赤文字で解説している ” 画像１から８ ” までの各スペースに楽天と電脳卸から
コピーしてきたリンクソースを右クリックして貼り付けるだけで完了です。
いきなりはじめからはムリかもしれませんが、何個かＨＰを作って慣れてくるとＨＰを構成しているHTMLタグに
関しても使用方法等がわかってきますから、自分でテンプレートをいろいろと改良してあなただけのオリジナル
仕様を作り上げてみてください。
このテンプレートに楽天の商品画像リンクの大と小のパターンとテキストリンクを貼り付けたサンプルをＨＰ
作ってみましたので、よかったら参考にしてみてください。 >>サンプルを見たい方はこちらをクリック！
リンク
|
|
