バナーの貼り方　詳しい説明ページ

■ バナーの貼り方説明ページ

トップ　リンク登録　サイトマップ　よくある質問Ｑ＆Ａ　利用規約　管理人室

バナーの貼り方

バナー：

タグ： <a href="http://kojo-com.main.jp/"><img src="○○○○" border="0"></a>

こちらがバナーと、バナーを表示する為に必要なタグ（記号や英数字の文字列）です。
この文字列の○○○○部分にバナー画像のＵＲＬ（バナー画像をブログの画像管理ファイルに保存した際に表示されたＵＲＬ）を貼り付けるとバナータグが完成します。
（○○○○には「http://～～.png」「http://～～.jpg」「http://～～.gif」などの文字列が入ります。）
完成したバナータグをブログ内の好きなところに貼り付けることでブログ上にバナー画像が表示されます。

う～ん、いまいちわからない…。
少しバナータグの意味がわからない、もう少し詳しく知りたい方は、下記にバナータグの構成について説明をしていますのでそちらをご参照下さい。
タグの知識があればバナーを貼る為に何が必要なのかなどの大枠がわかりますので、補足としてタグの構成について記載しておきます。
意味が解れば「あ、な～んだ、そういうことね！」という具合でとても簡単なので是非読んでみてください。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

■バナーリンクの構成　バナーリンクタグはこの３つのタグで構成されています。

１．リンクタグ　<a href=""></a>

２．画像タグ　<img src="">

３．ボーダーゼロタグ　border="0"

では、バナータグの構成について一つ一つ分解しながら説明していきます。

まずこれがバナーのタグ（文字列）です。
このゴチャゴチャした文字列をブログ内のスペースに貼ることでバナーが表示されます。

<a href="http://kojo-com.main.jp/"><img src="http://kojo-com.main.jp/banner-kojo3000.png" border="0"></a>

一見ゴチャゴチャしていて意味不明な文字列に見えますが、
よーく見ると、バナーは以下の３つのタグで構成されています。

色分けしたのがこちらです↓

<a href="http://kojo-com.main.jp/"><img src="http://kojo-com.main.jp/banner-kojo3000.png" border="0"></a>

ご覧のように、バナータグはこの３つのタグで構成されているのがわかります。

１．　<a href="http://kojo-com.main.jp/"></a>

２．　<img src="http://kojo-com.main.jp/banner-kojo3000.png">

３．　border="0"

では、これからこの３つのタグ（記号や英数字の文字列）について説明していきます。

１．a hrefの説明です。

<a href="http://kojo-com.main.jp/"></a>

これはリンクタグと言います。このタグの""の間にリンク先のＵＲＬを入れることでそのサイトへリンクすることができます。
/aの前にリンク先の名前を入れてa hrefで挟むとリンク先の名前でリンクが表示されます。

このように挟みます。

<a href="http://kojo-com.main.jp/">こうじょうコム</a>

そうすると、このように表示されます。

こうじょうコム

これをテキストリンクと言います。
文字（テキスト）でリンクされているので「テキストリンク」。そのままですね。
このテキストリンクの文字の部分（上の例でいうと「こうじょうコム」と表示されている部分）が画像になっているのが
バナーリンクなのです。

２．img srcの説明です。

<img src="">

これは画像タグと言います。""の間に画像のＵＲＬを入れることでその画像を表示することができます。

このように""の間に画像のURLを入れます。

<img src="http://kojo-com.main.jp/banner-kojo3000.png">

そうすると、このように表示されます。

この画像とテキストリンクを組み合わせることでバナーリンクを作ります。

・画像の取り込み方
画像にマウスを合わせて右クリックして「名前を付けて画像を保存」でパソコンの画像ファイルに保存します。
パソコンのファイルに保存した画像を、今度はブログの画像管理ファイルに保存します。
※ブログの画像管理方法・画像ＵＲＬの表示方法については会社によって異なりますので、各会社の方法に従ってください。
※取り込んだ画像を一度ブログの記事に表示させて、その画像を右クリックして「プロパティ」を開くと画像のアドレス（ＵＲＬ）と表示されますので、それをコピーしてimg src=""のちょんちょんの部分に貼る方法もあります。

３．テキストリンクと画像タグを組み合わせてバナーリンクを完成させる

前項で紹介したテキストリンクと画像タグを組み合わせてバナーリンクを完成させます。

組み合わせるとこのようなタグになります。

<a href="http://kojo-com.main.jp/"><img src="http://kojo-com.main.jp/banner-kojo3000.png"></a>

そうすると、このように表示されます。

あれ、さっきの画像では枠線がなかったのに、バナーリンクにすると枠線が表示されてしまう。
それは、リンクを意味するラインが表示されてしまっているからなんです。

なのでここで登場するのがborder="0"タグです。
では、border="0"タグの説明をしていきます。

３．border="0"の説明です。

border="0"

これはリンクを示す青や紫色の線を消すためのタグです。
ボーダーゼロ、ボーダーがない、線がない…、つまりリンクの枠線が消えるということを意味しています。

border="0"タグをこのように入れます。

<a href="http://kojo-com.main.jp/"><img src="http://kojo-com.main.jp/banner-kojo3000.png" border="0"></a>

「border="0"」とその手前にある「"」の間には半角のスペースを空けてください。半角スペースが正しく空いていないと画像が表示されない場合があります。

そうして表示されたのがこちらです。

※border="0"タグはブログによっては禁止タグに指定されている場合があります。その場合はこのborder="0"タグを入れないでください。

それぞれの役割がわかったところで改めてバナータグを見ると、

<a href="http://kojo-com.main.jp/"><img src="○○○○" border="0"></a>

このように、テキストリンクタグで画像タグを挟んでいるだけなのがわかります。
どうでしょうか、意味がわかるとタグも意外と簡単です。

では、タグの○○○○の部分にブログに取り込んだバナー画像のＵＲＬを入れて、タグの全てをブログの貼りたい場所（フリースペースなどが用意してある場合はそちらへ。記事内でも構いません。）に貼ってください。
どうでしょうか、表示されたでしょうか。

説明があまり上手くなくて申し訳ありません…（＾＾；）。
以上、タグの説明でした。

-- スポンサードリンク --