新規ウインドウ target=”_blank” で開くリンクにアイコンを追加する。

2011.04.07 Thu

新規ウインドウ target=”_blank” で開くリンクにアイコンを追加する方法です。他にも方法があるみたいなので、僕がこのブログで使ってるものを紹介します。

1.jQueryのaddClassメソッドを使って、target=”_blank”のついているaタグに「new_window」というクラスを追加する。クラス名は任意です。

javascript

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

これをcommon.jsという名前で作成する。ファイル名は任意です。

2.cssでa.new_windowにスタイルを追加する。今回はリンクの前にアイコンを追加するので、下記のようにしています。

css

a.new_window {
  padding: 0 0 0 16px;
  background: url(img/new_window.png) no-repeat left center;
}

※paddingの値は各自で調整してください。

3.<head>内に下記を追加する。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>

※jquery.jsというファイルはjQueryからダウンロードしたファイルのことです。

以上で新規ウインドウ target=”_blank” で開くリンクにアイコンが追加されます。


no comments

leave a comment




comment