本文へジャンプします。

ココログサポート Top>>Questions List>>リンクの背景色を変更したい (threa...

fixed_question

リンクの背景色を変更したい

カスタムCSS機能を使って、ブログ全体のリンクについて、カーソルを重ねたときに、そのリンクの背景色を変更して、画像のリンクの場合には背景色を変更しない（透明にする）ようにするにはどうしたらいいのでしょうか？
basic infomations

take_on | 2009/08/05 18:29(5751days ago) | permalink | デザインの変更／管理

Please login to comment.

Re: リンクの背景色を変更したい
「css リンク　マウスオーバー」とかでGoogle検索するとそんな感じのがヒットすると思います。

たとえば、こんなの見つけました。
http://es.rojo.jp/css/es_css13.html

なおゆき | 2009/08/06 22:30(5750days ago) | permalink

Re: リンクの背景色を変更したい
なおゆきさん、回答ありがとうございます。

ご紹介のサイトにあるように、通常のテキストリンクにカーソルを重ねると、そのリンクの背景色を違う色に変更することができるのですが、それだと、サムネイル画像に元の拡大画像へのリンクが張ってある場合でも、そのサムネイル画像の背景色も違う色に変更されてしまいます。

サムネイル画像のmargin-bottomを0にすればいいのでしょうが、そういうわけにもいきません（画像の下に余白をとりたいです）。

マウスオーバーでリンクの背景色を変えているブログもいくつか拝見しましたが、画像のリンクにも背景色がついていたりします。

実際のブログ（ココログ）で解決されている例があればいいのですが。

take_on | 2009/08/07 00:15(5749days ago) | permalink

Re: リンクの背景色を変更したい
一番手っ取り早いのはimgをくくるaタグ、もしくは、単なるテキストリンクのaタグに適当なclassを割り当てることですかね。
それじゃ、めんどくさいからあんまり解決にならないですかね。

cssで何とかなるのかなぁ。

あとは、javascriptで無理矢理imgの1個外側にあるaタグに自動的にclassを付けたり、aタグの内側にimgタグが無いときだけaタグに特定のclassを付けるコードを書くとか。

//aタグのinnerHTMLにimgという文字列がない時だけclassNameをhogeにする。
<script>
var a_tags = document.getElementsByTagName('a');
for(var i=0; i<a_tags.length; i++){
if(!a_tags[i].innerHTML.match(/img/)){
a_tags[i].className = 'hoge';
}
}
</script>


すげぇ力業。。

なおゆき | 2009/08/07 00:30(5749days ago) | permalink

Re: リンクの背景色を変更したい
いろいろ調べてみましたが、img要素をはさんだa要素にclass属性を付与して背景色を透明にするという方法しかないようですね。
http://q.hatena.ne.jp/1219126377

文字列の置換機能を使って対処してみます。
http://cocolog.kaiketsu.nifty.com/faqs/17355/thread

わざわざ、Javascriptのコードまで書いていただき、ありがとうございます。
（自分はJavascriptのコードをゼロから書くことができません）

Javascriptがオフの人も同じ見た目にしたいので、書いていただいたスクリプトは使うことができませんが、ほかの何かに応用したいと思います。

take_on | 2009/08/07 00:59(5749days ago) | permalink

Re: リンクの背景色を変更したい
なおゆきさん、こんなつまらない質問におつきあいいただき、お手数をおかけしました。ありがとうございました。

take_on | 2009/08/07 13:05(5749days ago) | permalink