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

外部リンクにアイコンをつける

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

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

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

HTMLのコード例

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

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

CSSのコード例

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

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

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

HTMLのコード例

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

CSSのコード例

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を適用します。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。