バナー等の貼り付け方の説明　

ポイントサイトやアフェリエイトの宣伝用にバナーを貼り付けたいことありますよね。
カウンターやアクセス解析のソースを貼り付けたいこともあります。


実は私、これにすごく手こずったんです。
なぜって？


ＨＴＭＬの内容がよく分かってなかったのと、
ホームページビルダーが勝手に自動修正してくれちゃって、かえってうまく行かなかった
ということがあるのです。



ですから、まずホームページビルダーで作ってる方は２つの設定をして下さい。
（私はビルダー８ですので、他のバージョンの方、当てはまらなかったらごめんなさい）

１つは、「表示」→「編集スタイルの切り替え」を選択して「エディターズモード」で
編集できるようにしてください。
そうしますと、クリックひとつで「ＨＴＭＬソース」が修正できます。

２つめは、「ツール」→「オプション」から「一般」タブを選択して、
「ＨＴＭＬソースを自動整形する」「ＨＴＭＬ構文エラーを自動修正する」
この２つの項目にチェックが入っていたら、チェックをはずします。

これでＯＫです。




では、実際にやってみましょう。
たとえば「フルーツメール」のバナーを貼ってみましょうか。
登録して会員ページの「お友達紹介バナー」見てみると、「紹介用のソース」はこんな感じ。
（バナー５　120×60　を選んでみました）


<CENTER><A HREF ="http://banana.fruitmail.net/cgi/introduce_jump1.cgi?XXXXXXX" TARGET="_blank"><IMG SRC="http://www.fruitmail.net/image/fruit120.gif" BORDER=0><BR><FONT SIZE="2"><B>フルーツメール</B></FONT></A></CENTER>


でも、これをどこにどうしたらいいのか？とまどいますよね。

まずエディターズモードでＨＴＭＬソースを開いてください。

ソースの一番最後を見ると、こうなってます。

</DIV>
</BODY>
</HTML>

この</DIV>の直後に「紹介用のソース」を入れます。
するとこうなります。


</DIV>
<CENTER><A HREF ="http://banana.fruitmail.net/cgi/introduce_jump1.cgi?XXXXXXX" TARGET="_blank"><IMG SRC="http://www.fruitmail.net/image/fruit120.gif" BORDER=0><BR><FONT SIZE="2"><B>フルーツメール</B></FONT></A></CENTER>
</BODY>
</HTML>



でも、これで終わりではありません。ＨＴＭＬで場所を指定してやらないといけないのです。
最後から探していって、こんな構文を見つけてください。


<DIV style="width : 596px;top : 107px;left : 80px;
position : absolute;
z-index : 18;
height : 368px;
" id="Layer3">

（もちろん、あなたのホームページの構文の中の「数字」はこれとは違っていますよ。）


これを貼り付けたバナーのソースの直前にコピーして、z-indexとLayerの数字を
１つずつ大きくします。


<DIV style="width : 596px;top : 107px;left : 80px;
position : absolute;
z-index : 19;
height : 368px;
" id="Layer4">
<CENTER><A HREF ="http://banana.fruitmail.net/cgi/introduce_jump1.cgi?XXXXXXX" TARGET="_blank"><IMG SRC="http://www.fruitmail.net/image/fruit120.gif" BORDER=0><BR><FONT SIZE="2"><B>フルーツメール</B></FONT></A></CENTER>
</BODY>
</HTML>


あとは、</DIV>をバナーのソースの直後に入れ、必要に応じてwidthとtopとleftの
数字を変えてやります。
widthは幅、topはページのＴＯＰからの位置、leftは左端からの位置、という感じ。
コピーしたままの値だと、直前に入力したものと重なって見づらいのです。

この場合だと、幅が広すぎるので、widthを１００ぐらいにして、ＴＯＰからの位置を
少し変えておきます。
すると・・・


<DIV style="width : 100px;top : 200px;left : 80px;
position : absolute;
z-index : 19;
height : 368px;
" id="Layer4">
<CENTER><A HREF ="http://banana.fruitmail.net/cgi/introduce_jump1.cgi?XXXXXXX" TARGET="_blank"><IMG SRC="http://www.fruitmail.net/image/fruit120.gif" BORDER=0><BR><FONT SIZE="2"><B>フルーツメール</B></FONT></A></CENTER>
</DIV>
</BODY>
</HTML>



赤の部分が手入力で変更した部分です。
z-indexとLayerの数字が同じものが無いかだけチェックしてください。
（もし重なっていたら、適当にひとつふたつ大きい数字を入れておけば大丈夫みたい。）
ＯＫなら、次に「ページ編集」タブで普通の編集のページに戻ると、
指定した場所にバナーがあるはずです。

好きな場所に移動させて、プレビューで確認してみてください。
クリックしてちゃんと「フルーツメール」のページが出てきたら成功です！

フルーツメール