jQueryを使って外部リンク(アイコン付)を別ウインドウで表示する方法 [Web Tips]

_blank属性はユーザビリティ上あまり好ましくないと言われていますが、私の場合はユーザー視座を考慮すると一概にできないと考えています。

簡単ですが、メモ的に残しておきます。

条件

・外部URLリンクには「_blank」属性を付与
・リンクにはアイコンを付与
・画像にリンクを設定している場合はアイコンは無し

Code

<script type="text/javascript">
$(document).ready( function () {
$("a[href^=http]")
.not("[href*="+location.hostname+"]")
.not($("a[href^=http]").find('img').parents('a'))
.attr("target","_blank")
.addClass("blank");
})
</script>

CSS

a.blank{
     background-image: url(/img/ico_blank.gif);
     background-repeat: no-repeat;
     background-position: 100% 0.2em;
     padding-right: 15px;
}