CSSで外部リンクに “別タブで開く” アイコンを付ける方法＆コード例

外部リンクに target="_blank"  をつけて別タブで開く場合、アイコン（  << 例えばこんなのとか ）をつけると普通のリンクと区別がついて分かりやすくなります。

そこでCSSで外部リンクにアイコンを付ける方法とコード例をまとめました。

またjQueryを使って動的にアイコン付与する方法も最後に紹介します。

CSSで外部リンクに別タブで開くアイコンを付ける手順

ここでは Font Awesome 5 を使って適当なアイコンを探し、外部リンクにアイコン表示しようと思います。その手順を大まかにまとめると次の通りです。

１．FontAwesomeの読み込み

まずは Font Awesome のスタイルをlinkタグを使って読み込みましょう。

例えば最新版の Font Awesome 5（バージョン5.7.2） を読み込むなら次のlinkタグを書けばOK

これで無料版で使用可能なフォントが全て i要素 とか after疑似要素から参照できるようになります。

ちなみにlinkタグは使用バージョンごとに違うので注意。もし別バージョンを使っているなら次の公式ページから適切なバージョンを選んでコピペしてください。

公式ページ　：　https://fontawesome.com/start

まあ基本的には最新のものを選んでおけば問題ないと思います。

２．after疑似要素を使って外部リンクにアイコン表示

そうしたら次は target="_blank"  が指定されている外部リンク（a要素）にのみ「別タブで開く」アイコンをつけるCSSを追加します。

例えば次が target="_blank"  指定の全リンクにアイコン表示するCSS例

アイコンは external-link-square-alt  （ユニコード表記だと f360  ）という良さそうなアイコンがあったので、それを使っています。ただし、CSSから参照する場合は '\f360'  みたいにバックスラッシュが必要です。

ちなみに FontAwesome 5 の無料版を使っている場合、 font-family  に必ず Free  とつけなくてはなりません。そうしないと文字が □ で表示されてしまうので注意です。

あと font-weight  の指定を間違えても上手く表示されないことがあるので要注意。この値はアイコンの種類が SOLID なら 900  、それ以外の細いアイコンなら 400  または 300  を指定すればOKです。

 

上のCSSを適用すると外部リンクにのみ自動的にアイコン付与されるようになります。

ちなみにどんな見た目になるかというと次の画像の通り

「別タブで開く」アイコンを付けたリンクの例

やっぱり上みたいなアイコンが付いてると分かりやすいですよね。

普通のリンク（ target="_blank"  が未指定）にはアイコンが付かないので、外部リンクとそれ以外のリンクの区別がつきやすくなりました。

jQueryで動的に別タブで開くアイコンを付与するには

今紹介したCSSで別タブアイコンを付ける方法は簡単ですが、少し問題があります。

それはリンク要素に画像などが入っていてもアイコン表示されてしまうという問題点

例えば次のような a要素 内側に img要素 があるリンクにもアイコンが付いてしまうってことです。

もしCSSに「OO要素の中にXX要素があればOO要素にスタイル適用」みたいに後読みできる構文があればよかったんですが、残念ながらそういうのもありません・・・

なのでその回避策としてjQueryを使って動的にアイコン付与する方法があります。

その具体的なやり方をコード付きで説明するなら次の通りです。

 

まず次のCSSを ext-link  というクラスが付いたリンクに適用

まあクラス名は何でもいいです。ここでは external link（外部リンク） の意味で ext-link  としてます。

 

そうしたら次のようなjQueryコードを追加

上コードの 'a[target="_blank"]:not(:has(>img))'  の部分に注目してください。

まず a[target="_blank"]  で外部リンクを絞り込みするとこまでは同じです。

重要なのはその次の :not(:has(>img))  という部分

これを付けることで「子要素にimg要素を持っていない全ての外部リンク」というセレクタ指定になります。あとは addClass  でクラスを追加してるだけです。

 

以上がjQueryで動的に別タブで開くアイコンを付ける方法

ちなみに :has  という疑似要素はjQuery特有のものなのでCSSでは使えません。もしCSSでこれがサポートされてれば便利なんですけどね・・・

まあjQueryが使える環境ならこっちの方法の方がスマートだと思います。

リンク＆ボタンのカスタマイズ関連記事

ここで紹介した内容みたいに、リンク・ボタンはカスタマイズ頻度が高いです。

なので最後に、リンク・ボタンのカスタマイズ術を関連記事として紹介します。

 

特に開発現場で役立つかもしれないのは、次のようなテクニック

PisukeCode - Web開発まとめ
CSSで訪問済みやホバー時のリンク色を変えるテクニックまとめ
https://pisuke-code.com/css-link-color-with-pseudo-class
リンクの色はデフォルトだとブラウザ固有のものが使われます。あるいはWordPressなどのCMSを使っているなら、テーマとかで統一された色です。でも一部のリンクではホバー時や訪問済みの色を変えたいこともありますよね。そこでここではCSSだけでリンク色を変えるテクニックについてまとめました。訪問済みのリンク色を変える訪問済みリンク色はデフォルトだと青紫みたいな色この色を変えるには :visited  疑似クラスを使います。その名の通り訪問済み(visited)な要素に対してCSSを適用するクラスです。 例えば次のようなリンクタ...
PisukeCode - Web開発まとめ
CSSでリンクをボタン風に改造する方法＆コード例【コピペOK】
https://pisuke-code.com/css-way-to-make-button-style-link
例えばリンクを表示したいけれど、 テキストリンクだと何か地味 どうせなら目立たせたい そうだ！ボタン風にしようこういう感じでボタン風のリンクを作りたくなることは多々あります。そこでCSSのみでリンクをボタン風に改造する方法＆コード例をまとめました。リンクをボタン風にする手順では早速リンクをボタン風に改造する方法を詳解と言っても次みたいに専用のボタン要素とCSSを追加するだけです。 まず次みたいに専用クラス名を割り振ったリンク要素を作成<a class="btn-style-link" href="#">...
PisukeCode - Web開発まとめ
 
CSSでボタンをリンク風に改造する方法＆コード例【コピペOK】
https://pisuke-code.com/css-way-to-make-link-style-button
ボタンをリンク風の見た目に改造・・・普通に考えれば「リンク要素をそのまま使えばいいじゃん」となります。でもボタンの機能を保ったままリンク風にしたいという場合もあるんですよね。あとボタンをリンク風に見せる技術はWordPressとかのCMSでもよく見かけます。そういう意味ではリンク風ボタンは意外と日常的に目にしてるのかもしれません。ということで、リンク風ボタンをCSSで作る方法とコード例についてまとめてみました。リンク風ボタンの超簡単な作り方手順ボタンをリンク風に改造するときに考えないといけないのは次のような...

リンクとかボタンのデザインを整えたり、目立たせたりするのに有効です。

手順もほんの少しのCSSを追加するだけ。簡単にできるので是非お試しください。

ここまでのまとめ

CSSの方はやり方は簡単なものの、例外（a要素の内側にimg要素など）には対応できないのでjQueryを使う方が確実かもしれません。

以上、外部リンクに別タブで開くアイコンを付ける方法についてでした。ではでは($・・)/~~~

関連記事