通常、外部リンクにアイコンを表示する場合、HTMLに直接アイコンを追加することが一般的です。しかし、HTMLに手動でコードを記述するのは手間がかかり、特に大規模なサイトでは非効率です。
そこで今回は、jQueryを利用して[target=’_blank’]属性を持つリンクに自動で外部リンクアイコンを付与する方法を紹介します。これにより、リンクを手動で編集することなく、サイト全体で統一した外部リンクアイコンを適用できます。
外部リンクに自動でアイコンを表示する方法
この方法では、Font Awesomeのアイコンを使用しますが、他のアイコンや画像も同じ要領で適用可能です。以下の例では、外部リンクにアイコンを自動的に表示するためのjQueryとCSSを使用したコードを紹介します。
HTML
まずは、通常の外部リンクのHTMLコードです。target=”_blank”属性を持つリンクに対して、自動でアイコンを追加します。
<a href="/" target="_blank">外部リンク</a>jQuery
次に、jQueryでtarget=”_blank”を持つリンクにクラスを追加するスクリプトです。addClass()メソッドを使用して、new_windowクラスを自動的に追加します。
$(function(){
$("a[target='_blank']").addClass("new_window");
});
このスクリプトでは、jQueryの属性セレクタ[attribute=’value’]を使用しています。このセレクタは、指定した属性と値が一致する要素を選択するものです。今回の例では、target=”_blank”を持つリンクに対して.new_windowクラスを付与しています。
CSS
次に、CSSを用いて、新たに追加されたnew_windowクラスにアイコンを表示します。この例ではFont Awesomeのアイコンを使用していますが、カスタムのアイコンや画像も同じ方法で適用可能です。
a.new_window::after {
font-family: "Font Awesome 5 Free";
content: '\f35d';
padding-left: 0.3rem;
padding-right: 0.3rem;
font-size: 0.8rem;
font-weight: bold;
}ここでは、.new_windowクラスを持つリンクに対して、疑似要素::afterを使用してアイコンを追加しています。Font Awesomeのアイコンフォントを使って、アイコンをリンクのテキストの右側に表示させます。また、paddingを設定することでアイコンとリンクのテキストに適度な間隔を確保しています。
Font Awesomeの利用方法
Font Awesomeのアイコンを利用するためには、事前にFont Awesomeのライブラリをサイトに読み込む必要があります。CDNを利用する場合は、以下のようにHTML内でFont Awesomeを読み込むことができます。
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
これにより、Font Awesomeのアイコンフォントがサイト内で利用できるようになります。
まとめ
この方法を使えば、外部リンク（target=”_blank”）に自動でアイコンを追加することができます。HTMLに直接手動でアイコンを追加する必要がなく、効率的にサイト全体で統一感のあるデザインを保つことが可能です。
- jQueryを使って、`target=”_blank”`属性を持つリンクに自動的にクラスを追加
- CSSで、Font Awesomeのアイコンを指定したクラスに追加
- Font Awesome以外のアイコンやカスタム画像を使用することも可能
特に大規模なサイトでは、リンクの管理が簡単になり、デザインの一貫性が保たれるため、ユーザーにとってもわかりやすいインターフェースを提供できます。
参考リンク：jQuery入門 – 属性セレクター [attribute=’value’]
参考サイト：jQueryで外部リンクに自動でアイコンを表示する
