unknown

外部リンク(新しいウィンドウで開くリンク)に外部リンク用のアイコンを自動で表示する方法をメモ。 あらかじめ CSS で外部リンクが定義されていれば CSS の書き換えでアイコンを付与できますが、ある程度サイトの内容が作りこまれている段階で追加しようとするとすべてのリンクを編集する必要がでてきます。 そんなときに jQuery を利用すれば少しのコードで自動的に付与することができます。

コード

Script

$(function(){
	$("a[target='_blank']").addClass("new_window");
});

CSS

a.new_window {
	padding: 0 16px 0 0;
	background: url("アイコンのURL") no-repeat right 60%;
}

HTML

<a href="/" target="_blank">外部リンク(新しいウィンドウを開く)</a>

表示結果

解説

[attribute='value'] セレクターは特定の属性が特定の値を持っているときにその要素を選択できるセレクターです。 今回の場合は “target” 属性を持っているかつ、属性値が “_blank” の場合に要素を選択して.addClass() で “new_window” というクラスを追加。CSS で .new_window の背景に外部リンク用アイコンを指定しています。

参照ページ

jQueryでtarget=”_blank”に自動でアイコンを付ける方法 | FOOTMARK
http://hiroyukiterada.com/jquery/246/
[attribute=value] – jQuery 日本語リファレンス
http://semooh.jp/jquery/api/selectors/%5Battribute+value%5D/