新規ウインドウ 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” で開くリンクにアイコンが追加されます。
