【jQuery】外部リンクに自動でFont Awesomeアイコンを表示する方法

Web制作
FontAwesome

外部リンクの末尾に小さな矢印アイコンが付いていると、「これは別サイトに飛ぶよ」と一目で伝わって親切です。ただ、その都度HTMLにアイコン用のタグを書き足していくのは正直しんどい。私も昔は記事ごとに手作業で入れていて、貼り忘れや表記ゆれに悩まされました。

そこでこの記事では、target=”_blank”を持つリンクにjQueryでまとめてアイコンを付ける方法と、jQueryなしでCSSだけで外部リンクを判定して付ける方法の2通りを紹介します。私は今は後者に寄せていますが、どちらも仕組みを知っておくと状況に応じて使い分けられます。

jQueryでtarget=”_blank”のリンクにアイコンを付ける

まずは定番のjQuery版です。「別タブで開くリンク＝外部リンク」という運用にしているサイトなら、target=”_blank”を目印にできます。

HTML

対象になるのは、こういった普通のリンクです。

<a href="https://example.com/" target="_blank">外部リンク</a>

jQuery

target=”_blank”を持つaタグを属性セレクタで拾って、new_windowクラスを付けます。

$(function(){
	$("a[target='_blank']").addClass("new_window");
});

[attribute=’value’]という属性セレクタは、指定した属性と値が一致する要素をまとめて選択してくれます。ここではtarget=”_blank”のリンクすべてにnew_windowクラスを付与しています。

CSS

付与したnew_windowクラスに対して、疑似要素::afterでアイコンを表示します。

a.new_window::after {
	font-family: "Font Awesome 5 Free";
	content: '\f35d';
	font-weight: 900;
	padding-left: 0.3rem;
	padding-right: 0.3rem;
	font-size: 0.8rem;
}

ひとつ注意したいのがfont-weightです。Font Awesomeのソリッド（塗りつぶし）アイコンは太さ900で描画される決まりなので、ここをboldやnormalにするとアイコンが出ずに四角い豆腐が表示されることがあります。無料版でソリッドを使うなら900、と覚えておくと事故が減ります。ちなみにフォント名や太さの指定は使っているFont Awesomeのバージョンで変わるので、後述の公式ドキュメントも合わせて確認してください。

jQueryなしでCSSだけで外部リンクを判定する

最近はちょっとしたクラス付けのためだけにjQueryを読み込むのは避けたい、という流れがあります。実はこの用途ならCSSの属性セレクタだけで完結できます。JavaScriptを一切書かずに、外部リンクを見分けてアイコンを付けられるんです。

a[href^="http"]:not([href*="example.com"])::after {
	font-family: "Font Awesome 5 Free";
	content: '\f35d';
	font-weight: 900;
	padding-left: 0.3rem;
	font-size: 0.8rem;
}

やっていることはシンプルです。href^=”http”は「hで始まる（＝http〜のフルURL）リンク」を意味する前方一致セレクタ。そこに:not([href*=”example.com”])を重ねて、「URLの中にexample.comを含まないもの」だけに絞り込んでいます。example.comの部分を自分のサイトのドメインに置き換えれば、自ドメイン以外へのリンク＝外部リンクにだけアイコンが付くわけです。href^、href*といった記法の意味はMDNの属性セレクタの解説がわかりやすいです。

この書き方なら相対パスの内部リンク（/blog/ など）やページ内アンカー（#top など）はhttpで始まらないので自動的に対象外になります。jQueryもクラス付けも要らず、CSSファイルにこの1ブロックを足すだけ。私が今このやり方に寄せているのは、単純に管理が楽だからです。

Font Awesomeの読み込み

どちらの方法でも、前提としてFont Awesome本体を読み込んでおく必要があります。CDNを使うなら、head内にこの1行を入れておきます。

<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">

これでアイコンフォントがページ内で使えるようになります。なお最新のFont Awesomeでは、疑似要素で使うフォント指定をfont: var(–fa-font-solid);のようにCSS変数で書く方式が公式に案内されています。バージョンを上げたときにアイコンが消えたら、まずこのフォント指定まわりを疑うとよいです。

まとめ

外部リンクへのアイコン付与は、手作業でやると必ずどこかで抜けが出ます。自動化してしまえば、サイト全体で見た目も揃い、貼り忘れもなくなります。

  1. 既存の運用がtarget=”_blank”ベースなら、jQueryでnew_windowクラスを付けてCSSでアイコン表示
  2. 新しく組むなら、CSSの[href^=”http”]:not([href*=”自ドメイン”])だけで判定でき、JavaScript不要
  3. ソリッドアイコンはfont-weightを900に。ここを間違えると豆腐（□）になりやすい

個人的には、JavaScriptへの依存を減らせるCSSだけの方法をおすすめします。まず自分のサイトのドメインを:not()に入れて動きを見て、しっくりくるアイコンや余白に微調整していってください。

CSS jQuery Web制作

関連する記事