入口 > お問合せ - お返事 > リンク選択時の点線を消したい件

リンク選択時の点線を消したい件

【旧版専用】
2012年6月中旬までの旧バージョンテンプレ(ver.2~ver.2-3-3)に準拠した記事です。現行バージョンには適用できない場合があります。



◆appleさま 

初めまして! テンプレ愛用してくださってありがとうございます。 

>入口メニュー名を画像にする を参考にしてHTMLをいじっていて
>ちゃんと画像は表示されたのですが、それをクリックすると回りにでる点線が気になります。
>画像に沿ってくれてればよかったのですが、ずれていたりします。
>a:focu{outline:none;} タグなど色々試してみたのですがなかなかうまくいきません。
>対処法などありましたら、教えていただけると幸いです。

とのことで、お使いのブラウザはIEでしょうか? 仰っているCSS「a:focus { outline: none; }」(コピペミスかと思いますが赤字sにご注意ください)は、firefoxやSafariなどでしか効かないので、IEでも消す場合はjavascriptを使う必要があるようです。
下記◎のどちらかをお試しください。



◎入口メニュー部分の選択線だけ消せればいいなら、 テンプレHTMLの初めの方の「<h2>メニュー</h2>」の下に3か所ある

<a href="<%category_link>" title="<%category_name>">

に、

<a href="<%category_link>" title="<%category_name>" onfocus="this.blur();">

のように青字を加えてください。リンクもお使いなら、そのまた下の

<a href="#index_area_2" title="リンク">

についても、

<a href="#index_area_2" title="リンク" onfocus="this.blur();">

のようにしてください。


◎サイト全体のリンク選択点線を消したいなら、テンプレHTML最初の方の</head>の上などに

<script type="text/javascript">
<!--
window.onload=function(){
a=document.getElementsByTagName("a");
for(i=0;i<a.length;i++){
a[i].onfocus=function(){this.blur();}
}
area=document.getElementsByTagName("area");
for(i=0;i<area.length;i++){
area[i].onfocus=function(){this.blur();}
}
}
// -->
</script>

と入れてください。但し、これを入れるとTabキーでの移動ができなくなりますので、その辺も含みおきの上ご判断ください。




以上のようなやり方で、手元の環境ではうまくいったのですが、いかがでしょうか。
宜しくお願いします。

ご質問に添えて、お気遣い溢れるコメントもありがとうございました! 今年はなかなか暑くなりきらなくておかしな気候が続きますよね。appleさんもお身体ご自愛ください。

2012-05-07