サイトに外部リンクを貼る際に一つ一つ「target=”_blank”」を挿入していませんか？
その面倒な手間から解放されつつ、ついでにクラスを付与してアイコン挿入や装飾をわけるなど見た目でも外部リンクとわかるようにjQueryで一工夫する方法のご紹介です。
htmlにてjQuery本体の読み込み
こちらはjQueryを利用していますので、別途でjQuery本体も読み込む必要があります。
ご自身の記載しているjsよりも前の行にて下記を読み込みましょう。
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
jsへの記載
$(document).ready(function () {
$("a[href]").each(function () {
if (!this.href.match(new RegExp("^(#|\/|(https?:\/\/" + location.hostname + "))"))) {
// ドメインが違うリンクの場合にaにtarget="_blank"を付与.
$(this).attr("target", "_blank");
// external_linkのクラスを付与。こちらでCSS等でアイコンを表示させる
$(this).addClass("external_link");
}
});
});まず、これらの記載にて、外部リンクを自動判別して、なおかつ外部リンクの「a」タグにクラス名「external_link」が付与されます。
CSSの調整
クラス名も自動付与されているので任意に調整可能です。
サンプルとしてリンク文言の前に「（外部リンク）」というテキストを挿入する記述を掲載いたします。
.external_link::before {
content: "(外部リンク)";
padding: 0 0.5em 0 0;
}
