きまぐれAWA's Life

アクセスカウンタ

zoom RSS ブログ(タグ) バナーをはってみよう♪

<<   作成日時 : 2009/12/06 14:27   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 3 / トラックバック 0 / コメント 11

バナーを使ってブログ内に他サイトへのリンクの貼る方法を書いてみます(にこ)

バナーを使ってリンクを張る場合は以下のようなタグを使用します。

<a href="リンク先のURL"><img src="画像のURL" width="**" height="**" alt="**" title="**" /></a>

<a href="リンク先のURL"> でリンク先のアドレスを指定します。
<img>タグの部分はバナー画像の情報を書き込みします。
 src="バナー画像のURL" → バナー画像URLを置換え
 width="**" → バナー画像の横幅 (数値を記入)
 height="**" → バナー画像の高さ (数値を記入)
 alt="**" → 代替テキスト(リンク先名などを記入)
 ※「alt="**"(代替テキスト)」は画像が表示されない環境で画像の変わりにテキストを表示します。
 title="**" → カーソルを持っていくと説明が出ます(リンク先の説明などを入れるとグッド)

最後に </a> の閉じ忘れに注意してください。


 ■ 例 ■
【タグ】
<a href="http://enjoysnow.happy888.net/" target="_blank"><img src="http://userdisk.webry.biglobe.ne.jp/003/282/84/N000/000/005/123738075604616207242_banner_es.jpg" width="160" height="32" alt="楽" title="Enjoy Snow のHPへ♪" /></a>

【表示】 → 楽


バナー画像の大きさを指定する場合ですが、記事内ならどんな大きさでも構いませんが、
フリースペースを利用する場合は横幅に注意します。
だいたい165pxくらいを目安にするとフリースペースからはみ出ません。
※フリースペースが標準サイズの場合


■ 注意したいコト ■

フリースペース内のリンクバナーに「class="up-image"」が書き込まれているのをよく見かけます。
「class="up-image"」はブログ記事を作成する時に画像タグを挿入すると書きこまれるものです。

こちらの「class="up-image"」にはスタイルシートで余白が指定されています。
フリースペースにバナーを貼る場合はこの余白のためにバナー画像が切れてしまうことがあります。
フリースペースのバナーには「class="up-image"」の記述はない方が無難かと思われます。



【関連記事】

(たいよう) ブログ(タグ) リンクをはってみよう♪



それでは、今回はこのくらいで(わら)


|ω・)ノシ See you♪

|彡 サッ



■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 3
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(11件)

内 容 ニックネーム/日時
はじめまして、neneと申します。
ウェブリ広場を拝見して、是非バナーについて教えていただきたくてお邪魔させていただきました。
フリーのリンクを自分のブログに貼り付けたのですが、直接リンクになっていないか心配で、mairisサンに確認していただきたく、コメントを致しました。
バナーに関して無知なもので、失礼な質問をしていたら申し訳ございません。
貼り付け方法は、ブログの画像リストに画像を保存して、そこの画像URLを入力しました。
リンク先は、バナーが掲載されていたページのURLを入力しました。
ブログの左に貼り付けられているKITAUSAGIが貼り付けたバナーです。
大変お手数ですが、直接リンクではないかわかりましたら教えていただけますでしょうか。
何卒、よろしくお願い致します。
突然のコメント、失礼致しました。
nene
URL
2010/01/31 22:17
neneさん、いらっしゃいませ(ん)
はじめまして、こんにちは(にこ)
質問はどんなコトでもOKですのでお気軽に〜ですよ。

さてさて、ブログ拝見させていただきました。
バナーは直リンになっていませんでしたのでご安心を(にや)
自分の保存スペースに置いた画像を表示するのが基本ですので、neneさんがされた方法でOKですね(*^-^)b
mairis
2010/02/01 10:10
mairisサン、迅速なご回答ありがとうございます!
自分のスペースに保存すれば問題なかったのですね☆
わかりやすいご説明もありがとうございました♪
mairisサンのブログはとても勉強になるので、またお邪魔させていただきます('▼'*)
nene
URL
2010/02/01 10:25
>>neneさん
は〜い(にこ)ノ
そんなこんなで無問題です。
また何かありましたらいつでもお寄りください(ん)
mairis
2010/02/01 14:58
またもや、御迷惑をかけに、来ましたなさいです。
バナーに、ついてなのですが・・・
私が貼っているバナーのサイトにバナーキャンペーン登録がありまして、
私のURLを登録すると
!バナー設置アドレスの記述に誤りがあります。!
と表示されるのですが・・・・
私のブログ設定で、何か邪魔をしている可能性はあるのでしょうか?
それともバナーのサイト側に問題があるのでしょうか?
サイト側に質問メールをして返信は来たのですが
私のブログに不手際があって登録できない可能性が、あったらどうしようと
不安になり、お尋ねに来ました。

どうぞヨロシクお願い致します(@ぺこ)
たむたむ
2010/06/10 20:12
すみません・・・
一番上の薄桜鬼・黎明録のサイトキャンペーン
の事です。
ヨロシクお願いいたします。
たむたむ
2010/06/10 20:50
たむたむさん、いらっしゃいませ(ん)

薄桜鬼・黎明録のサイトの「バナーキャンペーン」でページの登録フォームから進んだところですよね?
試しにやってみましたら登録出来てしまいました(爆
書込み必須な項目が3つですね。
・ハンドルネーム(全角)
・メールアドレス(半角)
・バナー設置アドレス(半角)
入力に関しては全角半角の区別をキチンとしたらOKだと思います。
たむたむさんの場合ですとバナー設置アドレスは、

http://refresh-time.at.webry.info/

です。
入力項目を確認してもう一度チャレンジしてみてください(にや)
mairis
2010/06/10 23:58
ハンドルネーム たむたむ
メールアドレス 記入
バナー設置アドレス mairisの書いてくれたのをコピーで貼り付け

したのですが・・・やっぱり
!バナー設置アドレスの記述に誤りがあります。!

って出ちゃいますぅ…・何故?(@うえ)
たむたむ
2010/06/11 00:26
>> たむたむさん
アドレスを変えていくつか試してみました。
ここからかなり憶測が入ります。
登録の出来るアドレスと出来ないアドレスがあるようです。
どうもハイフン(‐)が入っていると登録が出来ないみたいかも?
試行回数が少ないのでなんとも言えませんけど、
ハイフンが入ったアドレスだと全部蹴られました。
これが原因じゃないかな〜なんて思います。

原因は心配されてるようにたむたむさん側じゃなく、あちら側の問題かな。
とりあえずは壁紙ももらえるみたいですので解決でしょうか(気まずい)
mairis
2010/06/11 01:33
ブログのほうにもコメントして頂いてありがとうございました(@ぺこ)
私側が原因では、ないと分かって良かったです(`o´)=3
何度も試していただいて、お疲れさまでした
また、何かありましたらヨロシクお願い致します(@ぺこ)
たむたむ
2010/06/11 23:35
>> たむたむさん
とりあえず、原因はソコなんじゃないかと予想です(ん)
まぁプログラムに問題があるんだと思います。
いろいろ検証してみるのは面白いので問題ありませんです(にや)
mairis
2010/06/12 19:53

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

ブログ(タグ) バナーをはってみよう♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる