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

このBlogもそうなのですが、外部サイトへのリンクに「target="_blank"」を使って新しいタブ(ウィンドウ)で開く設定にしている人は多いのではないでしょうか。この「自動でタブ(ウィンドウ)を開く」という挙動には賛否両論あるものの、少なくとも私はこちらの方が好きなので利用しています。

さてこのタブを開く挙動、機能自体はいいのですが、残念なことに「一見してタブを新しく開くのか再使用するのかわからない」という欠点があります。ほとんどのブラウザの場合、target="_blank"を設定していてもデフォルト状態では見た目の違いはありません。

ところが、日本では非常にマイナーなブラウザ一つのLinuxのKonquerorは、デフォルト状態でもtarget="_blank"が設定されていると一目でわかるような仕掛けが存在します。アイコンの形が変わるのです。

Konquerorのtarget blank処理イメージ

VM Wareで上手くスクリーンショットが取れなかったので、これはあくまで合成したイメージ図ですが、大体こんな感じだと思ってください。要するに通常リンクはいつものマウスカーソルですが、target="_blank"が設定されていると別のアイコンがポインタの下に表示されるのです。

今回はこれを真似して、target="_blank"が設定されているリンクの上にマウスが移動するとマウスカーソルが変わるという動作をCSSで実現したいと思います。画像の用意などが少々面倒ですが、試してみるのも面白いのではないでしょうか。

概要

コメント欄のdanielさんのアドバイスを受け、前半の内容を加筆・修正しました。

CSSの属性セレクタを使い、「target」か「target="_blank"」が設定されたリンクの上にマウスカーソルが移動したときに、マウスカーソルの画像を差し替えます。また、IE6に対応させるために同時にclassを設定し、そのclassにも同時にスタイルを適応させます。IE6の場合はあくまで「classが設定されたリンク」にしか効果がないため、現在存在するリンクには効果はありません。(*1)
([*1]ただしdivタグなどの囲まれたリンクに全てtarget="_blank"が設定されているならば、そのdivタグ自体にスタイルを設定して全てのリンクに適応させることはできます。)

IE7は属性セレクタに対応しているためclassを設定しなくてもスタイルが適応されますが、これはDOCTYPE宣言(スイッチ)によって標準準拠モードで動作している場合のみです。DOCTYPE宣言がない、もしくは後方互換モードで動作するDOCTYPEを宣言している場合は、classを設定したリンクしかマウスカーソルは変更されないので注意してください。

DOCTYPE宣言についてはここでは説明しませんので、以下のリンク先などを参考にしてください。

デモページは以下に用意しました。細かい説明は後述します。

カーソルアイコン変更デモページ

ソース

次のコードをCSSファイルかスタイルとしてHTMLに直接書き込んでください。

targetが設定されている全てのリンクにスタイルを設定させたい場合。

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

target="_blank"が設定されているリンクにのみスタイルを設定したい場合。

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

次にIEにも対応させるため、classを設定したリンクにもスタイルを設定します。

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

最後にtarget="_blank"を設定するリンクにclassを設定します。

<a href="URI" class="target-blank" target="_blank">文字列</a>

前出のとおり、CSSの対応状況と仕様の関係からIE6(7)はclassを設定し忘れると何も起こりません。

画像を用意する

差し替えるためのマウスカーソル(画像)を用意する必要があります。実はここが一番面倒な部分で、「どのブラウザまで対応させるか」で行う作業が異なります。Windows版で調べた限り、各ブラウザによって対応している形式は以下のとおりです。

Firefox

  • cur(ポインタ形式ファイル)
  • ico(アイコン形式ファイル)
  • PNG
  • JPEG
  • BMP
  • GIF

一般的と思われるほぼ全ての画像形式に対応しています。ただし、cur、ico、PNG、GIF以外は透過画像に対応していないため、マウスカーソルとして使うには不向きかもしれません。

Internet Explorer & Google Chrome

  • cur(ポインタ形式ファイル)
  • ico(アイコン形式ファイル)

そのままの画像ファイルは使えないため、画像を変換する必要があります。詳しくは後述します。

その他のブラウザ

Opera 9.5はオリジナルカーソルに対応していないらしく、設定してもまったく動作しません。ただあくまで動かないだけなので、何か不具合がでることはありません。

Safari及びMacで動作するブラウザは使用していないので挙動は不明です。もしかしたら何か問題が出るかもしれません。

cur(マウスポインタ)ファイルの作り方

Firefoxのみに対応させるならば画像ファイルそのままでも構いませんが、その他のブラウザにも対応させたいなら画像をcur(マウスポインタファイル)に変換させる必要があります。透過機能の関係から、元にするファイルはPNGをお勧めします。自作ファイルでもフリー素材でもいいので、とりあえずPNGファイルを用意しましょう。今回は私が使用した変換ソフトは以下のものです。

ANIめーかー(Windows95/98/Me / アミューズメント) はてブ数

少々古いですがフリーウェアですし、XPでも問題なく動作します。動作画面は以下のような感じになっています。

ANIめーかー スクリーンショット

詳しい操作方法はヘルプ等で調べてください。

注意点としては256色のアイコンまでしか対応していないため、フルカラー(32bitカラー)のPNGを読み込ませると透過処理が上手くいかないときがありました。多分ほとんどの場合は問題ないと思いますが、駄目なら減色処理をする必要があるかもしれません。また、特許の関係かGIF画像には対応していません。

ICON形式(icoファイル)について

先ほど対応形式としてICON形式のファイルを挙げたのですが、これは基本的に利用しない方がいいでしょう。理由はIEの存在です。ICON形式は単純にIEで「表示させるだけ」なら問題ないのですが、マウスカーソルをリンクの上に移動させると挙動がおかしくなるのです。

カーソルアイコン変更デモページ

もしあなたがIEやIEエンジンのブラウザを利用しているなら、多分カーソルを載せるとアイコンが変わります。(ICON版)というリンクにカーソルを合わせると、まるでアイコンがワープしたような印象を受けるのではないでしょうか。どうも調べたところ、マウスポインタファイルには「ホットポイント」というカーソルの指針点が存在する(*2)とのことです。ICON形式では本来設定されるはずのホットポイントが不正な値になり、それが原因でカーソルがずれてしまうのでしょう。
([*2]上記のANIめーかーの画面にもホットポイントを設定するところがある。)

ICON形式で作ってからバイナリエディタなどで修正する方法もあるようですが、特に必要がないなら最初からcur形式で作った方が楽だと思います。IE以外だとこのような挙動は起こらないのですが、多分それはホットポイントの設定値をブラウザが無視しているのでしょう。

curファイルの拡張子の変更について

上記のデモページのcurファイルは、拡張子だけicoに変更してICON形式に見せかけています。理由は単純にFC2ブログに拡張子curのファイルがアップロードできないからです。どんな拡張子のファイルでも自由にアップロードできる環境ならこんなことをする必要はありませんが、もしcurが駄目な場合は拡張子をicoに変更しても問題なく動作するようです。

最後に

このBlogではまだこのカスタマイズを導入していませんが、近日中にテンプレートに書き込もうと思っています。古いエントリはしかたありませんが、新しいエントリはリンクを張るときにclassを設定すればいいだけですからね。作業としてはマウスカーソルを用意するのが一番面倒だと思いますが、手間を掛けないならFirefoxのみの対応にしてPNG画像などを使うのも十分にありだと思います。

改良版があります。あわせてどうぞ。
これが決定版！JS＋CSSでお手軽に「target= _blank」なリンクを一目で判断させる はてブ数

関連・参考URI