<< 「Firefox」拡張でブラウ... スキン編集前の簡単バックアップ >>
 

イメージリンクの外側の枠を消す方法 その2


図1に示すような、バナーを利用したリンクをよく見かけます。
バナーでリンクしたい方もいらっしゃると思いますので、今回はこのバナーのリンクについて記事にしたいと思います。


ぽっとの陽だまり研究室


図1 バナーリンク例


通常の設置方法


通常アンカータグの間にイメージのタグを入れればバナーリンクが出来ます。ただし図2に示すようにバナーの周りに青いラインが入ってしまうため、imgタグにborder=0を追加するなどしてラインを消すことを行います。


a0031863_13364980.jpg

【設置タグ】
<a href="リンク先"  title="タイトル" ><img src="イメージファイルURL" alt="イメージ内容" ></a>


図2バナーの周りに青いラインが・・・



バナーリンクの設置の一例

<a href="リンク先" title="タイトル" ><img src="イメージファイル" alt="イメージ内容" border=0 ></a>



一気に消したい方に


でも、 border=0入れるの面倒だったりします。^^;
そこで一気にバナーの周りの線を消したい方はCSS編集に以下のコードを追加してみるのはいかがでしょうか。
全てのタグを修正することなく、バナーの周りの青い線が消えます。



CSS編集
/*アンカータグに含まれるイメージタグの周りの線を消す*/
a img {border:none;}




今日のポイント
  • border: none;でイメージのく周りのラインを非表示にしています。

  • スタイルシートで一気に指定しているので、バナーリンクの周りにラインを入れたい場合はスタイルシートを消すだけでOKです。



難易度:★


ぽっと

[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2005-03-12 13:31 | │├リンク | Trackback(1) | Comments(13)
トラックバックURL : http://potto.exblog.jp/tb/1740186
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
Tracked from ほぼ日刊の鈴風亭 at 2005-03-18 08:22
タイトル : 1回で絵の外枠を、全て消す?!
イメージリンクの外側の枠を消す方法 その2 この技(↑)はとっても便利で なおかつとっても簡単です♪ 絵の外枠が消えると見栄えも良くなるので ぜひぜひ、お試しあれ(^-^)... more
Commented by snowy2465 at 2005-03-14 01:14
お久しぶりです。
バナーは作ってみたい一つなのですが・・まだ作った事ないです。
ちょっと、これに対してのコメントとはズレているけど・・
ぽっとさんはどんなソフトでバナーを作ったか参考に教えて貰いた
いのですが・・。宜しくですm(__)m
Commented by potto37 at 2005-03-14 22:44
すのさん、いつもコメントありがとうございます。
バナーの作り方、そちらでコメントさせていただきますね。
Commented by tukasa_suzukaze at 2005-03-18 08:25
いつも素晴らしい技の数々
ありがとうございます♪

border=0を毎回打ち込まなくても
cssに1回書けば良いとは
ありがたいかぎりです(^-^)
Commented by noraneko-doutyu at 2005-03-18 23:37
こんばんは、野良猫です。
早速、使わせていただきました。
これで毎回打たなくてすむんですね。
いつも、ぽっとさんには感謝です。
ではでは、次回も期待しています!!
Commented by potto37 at 2005-03-19 21:50
>tukasa_suzukazeさん、こんばんは^^
コメントありがとうございます。
CSSで一気に設定ができるといろいろと便利ですね。

>野良猫さん、こんばんは^^
コメントありがとうございます。
そうですよね、毎回打つの面倒ですよね。
Commented at 2005-03-21 20:40
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2005-03-22 20:59
鍵さん、こんばんは^^
コメントはそちらにしますね。
Commented by akebono-vine at 2005-11-01 18:49
ぽっとさん、お久しぶりです。
今回個人的にイメージリンクを使いたかったので参考にさせてもらいました。いつもながら助かります^^;
Commented by potto37 at 2005-11-01 22:58
アケボノさん、お久しぶりです。
コメントありがとうございます^^
コメント貰うと嬉しいですね。お役にたててよかったです。
Commented at 2006-06-03 16:54
ブログの持ち主だけに見える非公開コメントです。
Commented by potto37 at 2006-06-04 18:08
鍵さん、はじめまして。
イメージファイルを自分のブログやサーバにアップして表示しています。
イメージファイルのアップは以下のリンクをご覧下さい。

http://www.geocities.jp/potto372/exblog/imgup.html
Commented by hanacha3 at 2006-06-05 00:58
>ぽっとさん、ありがとうございました。
exciteにこんなのがあったんですね。
スミマセン、全然気が付きませんでした。
お蔭で納得して理解出来ました。
本当にありがとうございました!m(_ _)m。
Commented by potto37 at 2006-06-06 22:09
hanacha3さん、そうなんですよね。
ちょっと分かりづらいですよね。
もっと分かりやすい仕様ならいいのにね。

でも、お役に立てたようなので良かったです。
<< 「Firefox」拡張でブラウ... スキン編集前の簡単バックアップ >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。