<< 「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 | │├リンク
<< 「Firefox」拡張でブラウ... スキン編集前の簡単バックアップ >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。