別窓で開くリンク(_blank)にだけ後ろに「CSSで外部リンクマーク」を付けた方法メモ

リンクを作成する時、外部リンクのみ“別窓で開く”ように指定することがあると思います。自サイト内リンクは同じウィンドウで開くように。

私もその1人です。

そこで最近見かけるような“外部リンクマーク”を「別窓で開くよう指定している外部リンクのみ」に付けたいと思いました。

それもリンクの後ろに。

こんな感じで。

これをした方法をメモとして残しておきます。

参考記事)

次の手順で行います。

  1. headerで「fontawesomeのフォント指定」を読み込む
  2. 外部リンクマークをリンク末尾に付けるCSSを追記する
スポンサーリンク
 

ステップ1:head内で「fontawesomeのフォント指定」を読み込む

head内に以下を追記して「fontawesomeのフォント指定」を読み込みます。

<link href=”//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css” rel=”stylesheet”>

私自身詳細は理解してませんが、これをhead内で読み込めば、リンクに外部リンクマークを付けられるようです。

ステップ2:外部リンクマークをリンク末尾に付けるCSSを追記する

次のCSSを追記します。

/* blankのリンクだけ外部リンクマークをリンク末尾に追記 */
a[target=”_blank”]::after{
margin-left: 3px;
content: “\f08e”;
font-family: FontAwesome;
display: inline-block;
vertical-align: -1px;
}

。。。

これで完了。

こうするだけで、自サイト内の外部リンク末尾全てに外部リンクマークが付記されます。

めちゃ簡単ですね。

スポンサーリンク