コピペOK！外部リンクをCSSとアイコンフォントで目立たせる

外部サイトへのリンクに印を付けます。fontawesomeのアイコンフォントを使っているので、基本コードはコピペで実装可能です。

コピペOK！外部リンクをCSSとアイコンフォントで目立たせる

ページ内のリンクを押したら外部サイトにいきなり飛んでいくとびっくりすることがあるので、前後にアイコンを付けて判りやすくします。

振り分け条件ごとに複数の書式があるので、いろいろと書き出してみました。

リンクにアイコンを表示するための基本設定

リンクの後ろにマークを付けて判りやすく目立たせます。

利用するマークはアイコンフォントの fontawesome を使うと手軽です。多数のアイコンに対応しているうえにCDNも用意されているため、コピペで実装できるのがミソ。
Font Awesome, the iconic font and CSS toolkit

デモ

これは外部リンクです。（押してもこのページに帰ってきます）

HTML

【HTML】
<head>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
これは<a href="#">ノーマルリンクです</a>
</body>

まず最初に fontawesome のフォント指定を読み込みます。ヘッダから link タグを読み込みます。

CSS

【CSS】
a:after {
  margin: 0 3px;
  font-family: FontAwesome;
  vertical-align: middle;
  content: '\f08e';
}

あとは aタグ の後ろに 外部リンクアイコン( fa-external-link : f08e )を追加すればOK。

慣習として外部リンクアイコンの文字を使っていますが、他のマークを使っても構いません。もちろん画像に差し替えれば画像になります。

CSSからのインポート方法

また、fontawesome専用スタイルシートは、ヘッダではなくサイト用のCSSファイルから呼び出す方法もあります。

【CSS】
@import url("//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css");

外部リンクのみ抽出する

ただし、aタグ全部に指定を効かせるとページ内すべてのリンクに片っ端からマークがついてしまいます。必要な項目だけ表示されるように調整しましょう。

特定のクラスがついている場合

【CSS】
.exLink:after { /* 他の部分は同じ */ }

既に何か外部サイト向けのクラスがついている場合は簡単です。（ ここでは .exLink ）

同様に疑似要素 :after を足してマークを追加して下さい。

target=”_blank”で振り分ける

【CSS】
a[target="_blank"]:after { /* 他の部分は同じ */ }

アンカータグにクラスを割り振ってない場合によく使われる方法が「target=”_blank”」を使ったCSSセレクタです。別窓を開くリンクに対して指定をかけます。

特定のブロック内のみ表示

【CSS】
article a:after { /* 他の部分は同じ */ }

特定ブロックのみにスタイルを効かせるという方法もあります。記事本文を <article> タグや id つきの DIV で囲っているときに便利です。

URLで振り分ける

【CSS】
a:not([href^="http://www.example.com/"]):after { /* 他の部分は同じ */ }

「よそのサイトのみマークを出したい」ときは、自サイトを除外指定します。

おまけ：自サイトのみマークを付ける

同じ流れで自サイトにだけマークを付けることも出来ます。

デモ

これは内部リンクです。（押してもこのページに帰ってきます）

URLで振り分ける

【CSS】
a:[href^="http://www.example.com"]:befor {
  margin: 0 3px;
  font-family: FontAwesome;
  vertical-align: middle;
  content: '\f0c1';
}

自サイトに指定を効かせるときは、外部リンクのときと逆に除外指定を外します。

target=”_blank”で振り分ける

【CSS】
a:not([target="_blank"]):before { /* 他の部分は同じ */ }

target=”_blank”がついてない指定に効かせる場合の方法です。

おわりに

…ということで、外部リンクと内部リンクに目印を出す方法でした。アイコン以外でも、普通の文字列を表示したり出来るのでアイディア次第で色々使えると思います。

それではまた。(・∀・)/