【コピペでOK】jQueryで外部リンクを別ウィンドウで開く方法

ブログを書いていると外部リンクを貼ることが多く、いちいちtarget=”_blank”を設定するのは非効率です。

jQueryで設定しておけば、外部リンクの場合に自動でtarget=”_blank”を設定できるため、非常に楽になります。

外部URLのリンクを別ウィンドウで開くjQuery

外部リンクを自動で開く、jQueryのコードはたったのこれだけです。

jQuery(function($){
	$('a[href^=https]').not('[href*="'+location.hostname+'"]').attr('target', '_blank');
});

アイコンをつけて分かりやすくする

末尾に.addClass(“external”)を付加します。

jQuery(function($){
	$('a[href^=https]').not('[href*="'+location.hostname+'"]').attr('target', '_blank').addClass("external");
});

Font Awesomeを用意する

アイコンの画像を用意するのもいいのですが、最近は小さな画像はWebフォントで対応する事が多いです。

アイコン用Webフォントで代表的なのは、やはりFont Awesomeでしょう。
公式サイトではCDNで簡単に始められるようになっています。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

以下のCSSを設定することで、画像を使う事なくアイコンも自動で付加できます。
※font-weight:bold;がないと文字化けします。

.external:after{
	font-family: "Font Awesome 5 Free";
	content:"\f35d";
	font-weight: bold;
	padding-left:3px;
	padding-right: 5px;
}