ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：touchy CSSで、サイト共通のリンクのカラー設定をしても、画像のリンクまで反映させないように出来ないでしょうか？
困り度：
  • 困っています
 CSSで、サイト共通のリンクのカラー設定をしました。

しかし、このままだとテキストリンクだけでなく、画像リンクまでも
このリンク設定が反映れてしまうので、これを回避したい、
つまり「画像リンクだけは例外」と記述する術がないものかと以前から探しておりますが、
このようなことはできないでしょうか。
質問投稿日時：08/03/30 16:24
質問番号：3907528
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答10pt
回答者：leap_day こんにちは

なるほど<a>要素にborderをつけているのですね

リンク群(複数のリンク)がセットになっている(全て画像リンク)のであれば

.link a { border:none; }

<div class="link">
<a><img></a>
<a><img></a>
</div>

ということはできますが

＞そうなるリンク画像と、そうならないリンク画像があります
ちょっとよく分からないですが<img>に対してfloatやposition:absoluteしていると出ないようではありますが・・・
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/31 01:45
回答番号：No.3
この回答へのお礼何度も本当にありがとうございます。

img {
float:left;
}

と、

img {
position:absolute;
}

と、

img {
float:left;
position:absolute;
}

ともにやってみました。
確かにラインは消えて、おおっ！　と思ったのですが、画像という画像の配置がみなずれてしまいました。
うぅ〜む残念・・・

ともあれありがとうございましたm(_ _)m

回答

 
回答者：goldfox 画像リンクのa要素にclass指定をして、そのclassセレクタに対し指定するしかないです。
a:link {〜
a img { border:none; }

a:link {〜} は、a要素そのものに指定をしていますが、
a img {〜} は、a要素「の中のimg要素」に対する指定なので、上書きされません。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/30 21:43
回答番号：No.2
この回答へのお礼ありがとうございます。

ふぅ〜む・・・そうですか・・・
画像リンクのa要素にひとつひとつ指定するしかないですか・・・
これも手間ですね・・・

画像リンクの作業をとるか、それともテキストリンクの作業をとるか、
ということになるかぁ・・・

どうもありがとうございましたm(_ _)m

回答

 
回答者：leap_day こんにちは

画像周りの縁のことですか？

img { border:none; }

とか

a img { border:none; }

のことですかね？
上が画像全部に対して、下がリンク内の画像のみに対して
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/30 17:54
回答番号：No.1
この回答への補足済みません、追記です。

------------------------------------------------------------
a:img {
border:none;
border-bottom: 0px; /* またはnone */
}
※以下、先ほどのリンク設定
------------------------------------------------------------

とやってもみましたが、やはりborder-bottomの赤ラインが、
『出る画像ボタンには出て、出ない画像ボタンには変わらず出ない』
という状況です。
この回答へのお礼いつもありがとうございますm(_ _)m

説明が足らず済みません。
サイト全体にまず反映させたいリンクの決まりをCSSに記述して、
何の指定も無いリンクは全てこの設定になるようにすれば、
いちいちHTML側でclass設定をしないで良いので効率的であると思いまして。
ところがここで以前から問題視していたことがあって、実践できないでいました。

それは、リンク設定をunderlineにしたり、border-bottomを使ってアンダーラインだけ別色にしたりした際だけだと思うのですが、
フォントに対して設定したつもりのこの設定が、テキストでなく、画像でリンクをつくっているところにも反映されてしまうことです。

GlobalNavigationの画像ボタンも当然リンクなわけですが、これらの画像の下部にborder-bottomのライン色が横いちに出ちゃったりするんです。
厳密に言うと、そうなるリンク画像と、そうならないリンク画像があります。どこで線引きされてるのかさっぱりわかりませんが・・・

例えば以下のように全体設定にした場合に起こります。
imgタグだけはこの全体リンク設定を除外するような記述方法がないものかと思いまして。

a img { border:none; }

ではできませんでした。


/*--------------------------------------------------------
Font Link
--------------------------------------------------------*/
a:link {
color: #0f9088;
text-decoration: none;
border-bottom: 1px solid #ff0033;
}

a:visited {
color: #0f9088;
text-decoration: none;
border-bottom: 1px solid #ff0033;
}


a:hover {
color: #ff0033;
text-decoration: none;
border-bottom: 0px;
}

a:active {
color: #00ab98;
text-decoration: none;
border-bottom: 1px solid #ff0033;
margin-bottom: 0px;
}
 
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ