本文へジャンプします。

ココログサポートトップ≫質問一覧≫リンクの背景色を変更したい (スレッド)

解決

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

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

take_on | 2009/08/05 18:29(5771日前) | 固定リンク | デザインの変更／管理

コメントをする場合はログインをしてください

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

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

なおゆき | 2009/08/06 22:30(5770日前) | 固定リンク

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

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

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

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

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

take_on | 2009/08/07 00:15(5769日前) | 固定リンク

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(5769日前) | 固定リンク

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(5769日前) | 固定リンク

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

take_on | 2009/08/07 13:05(5769日前) | 固定リンク