The current article
外部リンクにtarget=”_blank”とclassを付与するjQueryで別窓アイコンを付ける
サイト内の外部リンクは別窓で表示して、横に別窓で表示的なアイコンを付けるjQueryとCSSです。
すでに書いている記事の中から、外部リンクを探してtarget=_blankやアイコンを追加するのは大変だと思った時などにも使ってみてはいかがでしょうか。
capture
まず、jQuery本体を読み込ませます。
次に、外部リンクにtarget=_blankとアイコンを表示するためのCSSのクラス名を付与して、自サイトには付けない処理を記述します。
記述例。
<html>
<head>
・
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('a[href^=http]')
.not('[href*="'+location.hostname+'"]')
.attr({target:"_blank"})
.addClass("ex_link")
;})
</script>
・
・
</head>
<body>
・
・
・
簡単な説明ですが9行目で、自サイトのURLなら除外
10行目で、target=_blankを付与
11行目で、クラス名を付与（ex_linkは変更可）
となります。
（アイコンを付けない場合は11行目を削除してOKです）
上記を適応すると、外部リンクが
<a href="http://sample.net/">http://sample.net/</a> ↓ ↓ ↓ <a href="http://sample.net/" class="ex_link" target="_blank">http://sample.net/</a>のように書き換わります。
※すでにtarget=_blankの指定がある場合は、クラス名のみ付与されます。
次に、外部リンクの横に別窓で表示的なアイコンを付けるための記述をしてあげます。
classにex_linkと記述されていますので、CSS側に
a.ex_link {
background: url("images/blank_icon.png") no-repeat right 0;
padding-right: 20px;
}
のように、リンクを示す画像を表示する記述をして、画像をサーバーにアップしてください。
以上でサイト内の外部リンクは別窓で開き、リンクの横にアイコンが表示されるようになりました。
必要に応じて使ってみて下さい。
関連記事
