これが決定版！JS＋CSSでお手軽に「target= _blank」なリンクを一目で判断させる

先日「target="_blank"」の設定されているリンクを簡単に判別できるようにする、という内容のエントリを書きました。

CSSのみで「target="_blank"」のリンクを一目で判別できるようにする はてブ数

これは最終的に「CSSの属性セレクタ」＋「手動class設定」という形に落ち着いたんですが、予想したとおり「class設定するの面倒だよね」(意訳)という指摘が。私自身はエディタとツールを使っているのでclassを設定するのはそんなに大変でもないのですが、一般的に考えれば面倒であることは間違いありません。FirefoxやGoogle Chromeならclass設定は不要なのですが、シェアトップのIE6(7)が対応してないのではやはり意味はないでしょう。

というわけで、今度はCSSとJavaScriptの両方を使って、classを設定しないでIE6(7)にも対応させ、「target="_blank"」のリンクを判断できるようにするという方法を紹介します。classの設定が不要なので、結果として過去のページや記事でもスタイルが反映されます。要するに前回のバージョンアップ版ですが、こちらの方がより実用的でしょう。

概要

CSSの属性セレクタとJavaScript(jQuery)を併用し、マウスカーソルが「target="_blank"」の設定されているリンクの上に移動すると、アイコンが変化するようにします。動作の詳しい説明は前回のエントリをチェックしてください。以下のブラウザ・環境でアイコンが変化するようになります。

  • IE6 (JavaScript ON)
  • IE7*1
  • Firefox
  • Google Chrome
  • Safari

1 : DOCTYPEスイッチによって「後方互換モード」で動作しており、かつJavaScriptがOFF場合のみ効果なし。

元から効果がないOperaはしかたありませんが、問題だったIE6はJavaScriptがONならclassの設定なしに動作するようになりました。ブラウザのシェアから考えて、大部分はカバーできるようになるはずです。*2

2 : Safariは環境がないので未検証。 → Windows版Safariでも動作しました。

デモページ

下準備 (用意するもの)

以下のファイルを用意してください。

  • マウスカーソルを置き換えるためのファイル*3
  • jQuery

3 : ポインタファイルのcurを推奨。詳しくは前回のエントリを参照のこと。

jQueryは下記の公式サイトからダウンロードしてください。画面右上に「Download(jQuery)」というリンク画像があるはずです。すでに導入している場合は不要です。

jQuery: The Write Less, Do More, JavaScript Library はてブ数

手順＆ソース

まず最初にjQueryを使用可能にします。ダウンロードしたjQueryをアップロードし、以下のソースをHTMLのheadタグの中に書き込んでください。

<script type="text/javascript" src="jQueryファイルのURI"></script>

次に以下のソースを上記のタグの下に書き込みます。

<script type="text/javascript">
<!-- 
$(function(){
	$('a[target=_blank]').addClass('target-blank');
});
 -->
</script>

「target="_blank"」だけではなく、「target」が設定されている全てのリンクに反映させたい場合は「[target=_blank]」を「[target]」と書き換えてください。

最後にスタイルを設定します。

a[target="_blank"] {
	cursor: url("用意したマウスカーソル画像のURI"), pointer;
}

a.target-blank {
	cursor: url("用意したマウスカーソル画像のURI"), pointer;
}

targetの設定によって効果範囲を変更したい場合は、上記の同じようにソースを書き換えてください。

これで作業は終了です。ブラウザのJavaScriptがONになっていれば「target="_blank"」のリンクに自動でclassが設定され、マウスオーバー時にマウスカーソルが変化します。JavaScriptがOFFの環境でも、属性セレクタに対応したモダンブラウザなら同様の効果があります。

jQueryについて

jQueryって何？という方は以下のリンク先を読んでみてください。要するにJavaScriptのライブラリなのですが、ただ単に使用するだけなら別に知っている必要はありません。

関連・参考URI