[CSS]別窓で開くようになってるリンクが一目で分かるようにする方法

昨日、腹黒いなぁと反省して、今後、リンクは全部同窓で開くようにしよう!と思ったんですが、はて、過去記事に掲載した別窓に開くリンクはどうしましょうか…。

現在、このブログにアップされてる記事数は850弱。掲載しているリンクもたくさんあって、全部を修正なんてしてられません。

別窓で開くことが分かるようにアイコンを付ける

ということで、改善策。

target属性を付加して別ウインドウ・別タブに開くようにしてあるリンクは、別窓で開くこと自体がダメなのではなく、訪問者が想定しない形で別窓で開いちゃうことがダメなんだろうなと。

であれば、あらかじめ「このリンク、別窓で開きますよ」ということが分かるようにしてあげればいいんじゃない?こんな感じで。

別窓で開くようにしてあるリンク

CSSサンプルコード

ということで、別窓で開くようになっているリンクが一目で分かるよう、CSSでアイコンを付けてあげる方法。

<a target="_blank" href="hogehoge.html">アンカーテキスト</a>

通常、リンク部分のHTMLは上のような感じになります。aタグにtarget属性を加え、その値を「_blank」とするわけですね。

で、次のCSSの指定を使い、「別窓で開きますよー」とお知らせするためのアイコンをリンクの脇に表示させます。

a[target="_blank"] {
	padding-right:20px;
	background:url('other_window.gif') right no-repeat;
}

padding-rightプロパティで「アイコンを表示するための余白」を設け、backgroundプロパティで「アイコン画像のURL、配置(右寄せ)、繰り返し(なし)」を指定します。

が、肝心なのはそこではなく、その前の部分。「target="_blank"」が付加されているaタグのみにCSSの指定を反映させるため、セレクタに属性を加えて

a[target="_blank"]

としているところがミソ。

a { ~ }とした場合は全てのaタグ=リンクにアイコンが表示されちゃいますが、属性セレクタを加えてあげることで、外窓で開くようになってるリンクのみにアイコンを表示できます。

ソースを見なければ同窓で開くのか別窓で開くのか分からないリンクも、こうすることで訪問者に教えてあげることができるように。

私はちょいと腹黒い感じで指定していた別窓指定ですが、場所や内容によっては別窓で開くようにしておいた方がいいものもあろうかと思います。

そんなときは、「ここは別窓で開きますよ!」と分かるようにしてあげられれば、訪問者に親切ですよねー。

CSS属性セレクタの応用例

以下、余談。

CSSの属性セレクタの指定は、他のことにも応用できます。

<form>
<input type="text" id="text" value="">
<input type="radio" id="select" value="">
<input type="submit" value="送信">
</form>

こんな感じのフォームがある場合に、送信ボタンだけ装飾したいなーなんてときは、

input[type="submit"] { ・・・ }

ってな感じで属性セレクタを追加してあげればOK。

他にも、a[href="hoge.html"]とすることで、リンクに特定のリンク先の場合のみ装飾する、といったことも可能です。