2012年11月01日

2012 11.01 Thu


スタイルシートでアンカーリンクに装飾でborderなどを使用してアンダーライン(下線)を表示させると、「a img(リンク画像)」にも下線が適用されてしまいます。

a{
border-bottom:1px dashed #af7e7e;
}
これだけだと文字も画像も下線が付いてしまう

imgタグごとに「style="border:none;"」やクラス(class)を指定すれば解決しますが、いちいち画像を貼り付けるたびに付け加えて書くのも面倒くさいので、「a img」と「a img:hover」に、ちょっと工夫するだけで、テキストリンクのみ下線を表示したまま、リンク画像の下線を打ち消して非表示にしてみました。



a{
border-bottom:1px dashed #af7e7e;
}
a:hover{
margin:0 0 4px 0;
}
a img:hover{
margin:0 0 -4px 0;border:solid 4px #FFF; //#FFFは背景色
}
a img{
margin:0 0 -4px 0;border:solid 4px #FFF; //#FFFは背景色
}


本を検索amazon.co.jp
こんな感じです。


フォントの大きさにもよりますが、大体4〜8pxの間で消せると思います。

実際には、border-line(下線)は表示されていますが、
margin-bottomで上へ引っ張り、画像の後ろへ押し込んで、隠して見えなくしています。

下線部分を削っているようなものなので、line-heightは若干多めに取ったほうが無難かもしれません。

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/299532781
※言及リンクのないトラックバックは受信されません。

■ この記事へのトラックバック
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.