ブログを書いていると外部リンクを貼ることが多く、いちいち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 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;
}
コメント