リンクソースの貼り方ー不労所得構築web

　■リンクソースのはりかたは。
　
　ASPから仕入れてきた商品画像やテキストリンクを、練習用テンプレートに貼り付けてみます。
　
　こちらでは、テンプレートに商品画像とテキストリンクのHTMLソースを貼り付ける順序を掲載していきます。
　
　ASPに登録して企業（ECサイト）と提携できましたら、その商品のソースを取得する事ができます。
　実際にあなたのお店に商品画像を貼り付けて見ましょう。
　
　

　
　まずはじめに、ホームページビルダーを起動して、前もって作成したテンプレートのindex,htmlを開きます。
　
　　　　　　　　　　　　　　

　
　　　　　　　　　　　　　　　　　ブラウザで見てみる・・・・
　
　
　Internet Explorerを起動して、ASPにログインします。
　
　おすすめの“ASP”の、ASPには、ある程度完成しているサイトが無いと登録できませんので、
　商品がありふれているASPに登録する為にも、ここで、審査に通るようなサイトに仕上げます。
　
　
　（商品の画像がなくても、『ここに、この商品を掲載します』というように書いておくことで審査に通ることもあります。
　　この場合は、メニューや、各ページの記事の量が審査の対象になりますので、
　　『後はバナーを貼り付けるだけ』の状態にしておきます）
　
　
　
　このページでは、電脳卸の商品を上記のテンプレートに貼り付けてみます。
　
　“電脳卸”で商品を仕入れを参考にして、リンクソースを取得します。
　
　
　　　　

　
　
　ホームページビルダーの画面を『ＨＴＭＬソース』にすると、以下のようなページになります。
　あなたが書き換えるところと、商品タグを入れていくところを赤字で記述しますので参考にしてください。
　
　

　
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 10.0.4.0 for Windows">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>あなたのお店の名前を入れます。</TITLE>
　
　↑あなたのお店のページのタイトル部分になります。ページを増やしていく場合は、
　この部分をそれぞれのページで変えていきます。
　例：　ＴＯＰページは○○のお店、2ページ目は○○商品のページ　など。
　
　
　
　<LINK rel="stylesheet" href="stt.css" type="text/css" id="_HPB_TABLE_CSS_ID_">
</HEAD>
<BODY>
<NOSCRIPT></NOSCRIPT>
<CENTER>
<TABLE width="770" style="border-width :1px;border-style : solid;border-color : #b555fb;background-repeat : repeat-y;" cellspacing="10" bgcolor="#ffffff">
<COL span="1" valign="middle" align="center">
<TBODY>
<TR>
<TD align="center" valign="top" width="664" height="683">
<CENTER>
<TABLE width="731" style="border-width :1px;border-style : solid;border-color : #b555fb;background-repeat : repeat-y;" cellspacing="10" bgcolor="#ffffff">
<TBODY>
<TR>
<TD align="center" bgcolor="#fcf7ff">
<H1 align="center"><FONT color="#ff0000">あなたのお店の名前を入れます。</FONT></H1>
　
　↑ページ編集画面で見る、一番上の大きな文字の部分です。
　お客さんが見るページのお店の名前になりますので、この赤字部分をあなたが考えた
　お店の名前に書き換えます。
　
　
　
　</TD>
</TR>
<TR>
<TD align="center">
<TABLE style="border-width : 1px 1px 1px 1px;border-style : solid solid solid solid;border-color : #b5d9f7;" cellspacing="5" bgcolor="#ddddff">
<TBODY>
<TR>
<TD width="110" height="110" align="center" style="border-width : 1px;border-style : dashed;border-color : #ff80ff;" bgcolor="#ffffff" valign="top"><FONT size="-1">商品の<BR>
画像バナーを<BR>
入れます<BR>
　
　↑上部4つのマス（テーブル）の部分、一番左側の所になります。
　画像バナーと指定していますので、この文字を消して電脳卸からコピーしてきた商品画像の
　リンクソースをマウスの右クリックで貼り付けます。
　
　
　
　<BR>
　<BR>
　<FONT color="#0000ff">商品の名前をリンクで入れます。</FONT></FONT></TD>
　
　↑上部4つのマス（テーブル）の部分、一番左側の所の画像のしたのテキスト部分。
　商品の名前と指定していますので、この文字を消して電脳卸からコピーしてきた商品名の
　リンクソースをマウスの右クリックで貼り付けます。
　
　
　
<TD width="110" align="center" style="border-width : 1px;border-style : dashed;border-color : #ff80ff;" bgcolor="#ffffff" valign="top"><FONT size="-1">商品の<BR>
画像バナーを<BR>
入れます</FONT><BR>
　
　↑上部4つのマス（テーブル）の部分、左側から2番目の所になります。
　　同じ様に商品画像のリンクソースを貼り付けます。
　
　
　
　<BR>
　<BR>
　<FONT color="#0000ff">商品の名前をリンクで入れます。</FONT></FONT></TD>
　
　↑上部4つのマス（テーブル）の部分、左側から2番目の所のテキスト部分になります。
　　同じ様に商品名のリンクソースを貼り付けます。
　
　
　

　<TD width="110" align="center" style="border-width : 1px;border-style : dashed;border-color : #ff80ff;" bgcolor="#ffffff" valign="top"><FONT size="-1">商品の<BR>
画像バナーを<BR>
入れます</FONT><BR>
　
　↑上部4つのマス（テーブル）の部分、左側から3番目の所になります。
　　同じ様に商品画像のリンクソースを貼り付けます。
　
　
　
　<BR>
　<BR>
　<FONT size="-1" color="#0000ff">商品の名前をリンクで入れます。</FONT></TD>
　
　↑上部4つのマス（テーブル）の部分、左側から3番目の所のテキスト部分になります。
　　同じ様に商品名のリンクソースを貼り付けます。
　
　
　
<TD width="110" align="center" style="border-width : 1px;border-style : dashed;border-color : #ff80ff;" bgcolor="#ffffff" valign="top"><FONT size="-1">商品の<BR>
画像バナーを<BR>
入れます<BR>
　
　↑上部4つのマス（テーブル）の部分、左側から4番目の所になります。
　　同じ様に商品画像のリンクソースを貼り付けます。
　
　
　
　<BR>
　<BR>
<FONT color="#0000ff">商品の名前をリンクで入れます。</FONT>　</FONT></TD>
　
　↑上部4つのマス（テーブル）の部分、左側から4番目の所のテキスト部分になります。
　　同じ様に商品名のリンクソースを貼り付けます。
　
　
　
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD bgcolor="#fcf7ff" align="center"><FONT color="#9900ff" size="-1"> あなたのお店の紹介文を書いていきます。</FONT></TD>
　
　↑上部4つのマス（テーブル）の下側にある、お店の紹介欄です。
　　はじめて来られたお客様に、あなたのお店がどのようなお店なのかを伝えていきます。
　　この赤字の部分を消して、あなたなりの文章で紹介していきます。
　
　
　
　</TR>
</TBODY>
</TABLE>
</CENTER>
<TABLE border="0" width="739" height="439">
<TBODY>
<TR>
<TD height="0" width="2"></TD>
<TD valign="top" height="0" width="135"></TD>
<TD rowspan="2" valign="top" width="580">　<BR>
<TABLE border="0" width="598">
<TBODY>
<TR>
<TD width="192" align="center" valign="top"><FONT size="-1" color="#0000ff">商品の名前をリンクで入れます。</FONT><FONT size="-1"><BR>
　
　↑中央の商品掲載欄の上部4つのテーブル部分、一番左側の所のテキスト部分。
　商品の名前と指定していますので、この文字を消して電脳卸からコピーしてきた商品名の
　リンクソースをマウスの右クリックで貼り付けます。
　
　
　
　<BR>
商品の説明文を書いていきます。 </FONT></TD>
　
　↑同じく中央の商品掲載欄上部4つのテーブルの、一番左側の所のテキスト部分。
　商品の名前の下側になります。この部分にあなたなりの商品への情報と感想などを
　書いていきます。
　何を書けば良いか悩むときはＡＳＰの紹介文をあなたの言葉にかえて記載します。
　
　
　
<TD height="100" align="center" bgcolor="#fff7fb" width="110"><FONT size="-1">商品の<BR>
画像バナーを<BR>
入れます</FONT></TD>
　
　↑中央の商品掲載欄の上部4つのテーブル部分、左から2番目のテーブルです。
　商品の画像と指定していますので、この文字を消して電脳卸からコピーしてきた商品画像の
　リンクソースをマウスの右クリックで貼り付けます。
　
　
　
<TD height="100" align="center" bgcolor="#fff7fb" width="110"></TD>
　
　↑中央の商品掲載欄の上部4つのテーブル部分、左から3番目のテーブルです。
　この、<TD height="100" align="center" bgcolor="#fff7fb" width="110">と</TD>の間に
　電脳卸からコピーしてきた商品画像のリンクソースをマウスの右クリックで貼り付けます。
　
　
　
<TD align="center" valign="top" width="198"><FONT size="-1"><FONT size="-1" color="#0000ff">商品の名前をリンクで入れます。</FONT><BR>
　
　↑中央の商品掲載欄上部4つのテーブルの、一番右側の商品のテキスト部分。
　商品の名前と指定していますので、この文字を消して電脳卸からコピーしてきた商品名の
　リンクソースをマウスの右クリックで貼り付けます。
　
　
　
　<BR>商品の説明文を書いていきます。<BR>
</FONT></TD>
　
　↑同じく中央の商品掲載欄上部4つのテーブルの、一番右側の所のテキスト部分。
　商品の名前の下側になります。この部分にあなたなりの商品への情報と感想などを
　書いていきます。
　何を書けば良いか悩むときはＡＳＰの紹介文をあなたの言葉にかえて記載します。
　
　
　以下、2段目、左側テキスト部⇒紹介文⇒商品画像⇒商品画像⇒テキスト部⇒紹介文⇒
　
　3段目、左側テキスト部⇒紹介文⇒商品画像⇒商品画像⇒テキスト部⇒紹介文⇒
　
　4段目、左側テキスト部⇒紹介文⇒商品画像⇒商品画像⇒テキスト部⇒紹介文
　
　となっていきますので、同じ要領で画像とテキストを載せていきます。↓
　
　
　</TR>
<TR>
<TD align="center" valign="top"><FONT size="-1" color="#0000ff">商品の名前をリンクで入れます。</FONT><FONT size="-1"><BR>
　<BR>
商品の説明文を書いていきます。 </FONT></TD>
<TD height="100" align="center" bgcolor="#fff7fb"></TD>
<TD height="100" align="center" bgcolor="#fff7fb"></TD>
<TD align="center" valign="top"><FONT size="-1"><FONT size="-1" color="#0000ff">商品の名前をリンクで入れます。</FONT><BR>
　<BR>
商品の説明文を書いていきます。 </FONT></TD>
</TR>
<TR>
<TD align="center" valign="top"><FONT size="-1" color="#0000ff">商品の名前をリンクで入れます。</FONT><FONT size="-1"><BR>
　<BR>商品の説明文を書いていきます。</FONT></TD>
<TD height="100" align="center" bgcolor="#fff7fb"></TD>
<TD height="100" align="center" bgcolor="#fff7fb"></TD>
<TD align="center" valign="top"><FONT size="-1" color="#0000ff">商品の名前をリンクで入れます。</FONT><FONT size="-1"><BR>
　<BR>商品の説明文を書いていきます。</FONT></TD>
</TR>
<TR>
<TD align="center" valign="top"><FONT size="-1" color="#0000ff">商品の名前をリンクで入れます。</FONT><FONT size="-1"><BR>
　<BR>
商品の説明文を書いていきます。 </FONT></TD>
<TD height="100" align="center" bgcolor="#fff7fb"></TD>
<TD height="100" align="center" bgcolor="#fff7fb"></TD>
<TD align="center" valign="top"><FONT size="-1" color="#0000ff">商品の名前をリンクで入れます。</FONT><FONT size="-1"><BR>
　<BR>商品の説明文を書いていきます。</FONT></TD>
</TR>
</TBODY>
</TABLE>
</TD>
</TR>
<TR>
<TD valign="top" width="2" height="413"></TD>
<TD valign="top" width="135">
<TABLE border="0">
<TBODY>
<TR>
<TD width="130" height="345" align="left" valign="top"><FONT size="-1">メニュー<BR>
　<BR>
メニュー<BR>
　<BR>
メニュー<BR>
　<BR>
メニュー</FONT><BR>
　
　↑ページの一番左側にある、メニューリストになります。
　
　この部分は、ページを増やしていく時に、ＴＯＰページから、各ページへ移動する為の
　リストになります。
　
　リンクとなりますので、<Ａ>このようなＨＴＭＬタグを使用して記載していきます。
　詳しくは、このページの下のほう、『簡単にタグ説明』で説明します。
　
　
　
　</TD>
</TR>
</TBODY>
</TABLE>
　</TD>
</TR>
</TBODY>
</TABLE>
<TABLE border="0">
<TBODY>
<TR>
<TD colspan="2" align="center" bgcolor="#fcf7ff" width="733"></TD>
</TR>
<TR>
<TD colspan="2" align="center" bgcolor="#fcf7ff" width="733"><I>Copyright (C)<FONT size="-1" color="#0000ff">あなたのお店の名前</FONT>. All Rights Reserved</I>.</TD>
　
　↑この部分にあなたのお店の名前をかいて、ＴＯＰページにリンクしておきます。
　リンクソースの書き方は下のほうで説明しています。
　
　
　</TR>
</TBODY>
</TABLE>
</TD>
</TR>
</TBODY>
</TABLE>
</CENTER>
</BODY>
</HTML>
　

　
　以上、実際の練習用テンプレートのＨＴＭＬソースを利用して、商品・テキストソースの貼り付け場所を書いてみました。
　貼り付ける位置は、このような場所になります。
　
　上記のソースを見てみると、お気づきになると思うのですが、赤字で指定語句を
　<FONT color="#ff0000">と</FONT >で囲んでいます。
　
　このタグについて簡単に解説します。
　

　
　『簡単にタグ説明』
　
　まず、赤字を囲んでいる<FONT size="-1"color="#0000ff">と</FONT >ですが、これは、赤字の文字を
　『どのようにしてブラウザで表示するか』を指定しています。
　
　はじめのタグにある【　size="-1"　】は、文字の大きさを表していて、
　【　color="#0000ff"　】は文字の色、"#0000ff"が、色の名前になります。
　
　わかりやすいように極端な表示であらわします。
　
　たとえば、<FONT size="-2" color="#00ff00">お店</FONT >と、記述すると、
　ブラウザでは、
　　　
　　　　　　　　　　　　　　　　　　　　　お店となります。
　
　
　<FONT size="-2"color="#00ff00">のsize="-2"を消して<FONT color="#00ff00">に
　すると、ブラウザでは
　
　　　　　　　　　　　　　　　　　　　　　お店となります。
　
　
　<FONT size="4"color="#0000ff">にすると
　
　　　　　　　　　　　　　　　　　　　　　お店となります。
　
　文字の大きさが変わりましたね。
　他にも、文字の表示の仕方がありますので、ビルダーでいろいろ試してみてください。
　
　
　つぎに、リンクソースについてですが、ホームページビルダーで、リンクを入れる場合は、リンクを入れたい文字を
　右クリックで選択して、左クリックでメニューを開くと、【　リンクの挿入　】という項目がありますから、
　そこからリンクを設定できます。
　
　ソースでの記載につきましては、<A href="◆◆◆.html">○○</A>というタグを使います。
　
　<A href="◆◆◆.html">の◆◆◆.htmlに指定する（リンクする）ページのファイル名を記入して、
　○○の所にリンクページに行く為のテキスト語句を記入して、
　</A>で閉じればＯＫです。
　
　
　もうお分かりかと思いますが、タグで指定していくときは必ず、開始タグと終了タグが必要です。
　
　また、ビルダーには、【　ＨＴＭＬ構文チェック　】という機能がありますから、
　ＨＴＭＬソースをご自分で変更した時は、最後に必ず構文チェックを行うようにしてください。
　
　

　　
　リンクソース（商品画像リンク・テキストリンク）の貼り方は以上です。
　
　実際に、練習用テンプレートに商品画像を少しだけ入れたものをアップしておきますので参考にしてくださいませ。。
　
　
　　　　　　　　　　　　　　　練習用テンプレート画像挿入サンプル
　

　

リンクソース（商品画像）の貼り方はどうするの

リンクソース（商品画像）をHTMLソースに貼り付ける方法を順を追って紹介します。