外部サイトへのリンクにアイコンをつける

外部サイトへのリンクを設置するときに、リンク先が外部サイトであることを分かりやすく示すためのアイコンを表示する方法について解説します。

この記事のポイント

a要素を使ってリンクを設置する際に、リンク先が外部サイト（別ドメイン）の場合は分かりやすくアイコンを表示することがあります。

次の場合は「W3C」の部分が外部サイトへのリンクになっていますが、右側に付いているようなアイコンを見かけたことがあるかもしれません。

表示例

まずはHTMLを確認します。
リンクを設定しているa要素に注目してください。

<p>HTMLの最新情報はW3Cで確認します。<br><a href="https://www.w3.org/html/" target="_blank">W3C</a></p>

内部リンク（同じドメイン内のリンク）と外部リンクの違いは、target属性に「_blank」を指定していることです。
そこで、CSSでa要素のtarget属性に対してアイコンを表示するよう記述します。

a[target=_blank] {
	padding-right: 20px;
	background: url(./images/icon_blank.png) right center/11px auto no-repeat;
}

右側にアイコンを表示するだけならclass属性を使って表示することもできますが、外部サイトへのリンク全てにclass属性を記述するのは非効率です。

同じサイト内のページを別タブで表示することもあります。
その場合はrel属性など他の属性に対してCSSを指定します。

<p>HTMLの最新情報はW3Cで確認します。<br><a href="https://www.w3.org/html/" target="_blank" rel="nofollow">W3C</a></p>

a[target=_blank][rel=nofollow] {
	padding-right: 20px;
	background: url(./images/icon_blank.png) right center/11px auto no-repeat;
}

CSSのセレクタで属性を続けて記述すると、その属性が全て設定されている要素に対してCSSを適用することができます。
例えば上記の場合は「target=”_blank”」と「rel=”nofollow”」がいずれも設定されているa要素に対してのみアイコンを表示するCSSを適用します。