CSSだけで外部サイトへのリンクにマーク(アイコン)をつける方法

リンクが外部に飛ぶことを示すアイコン(リンクアイコン)をつけると「押すと別サイト(外部リンク)に行くこと」が分かりやすいので親切である．

なぜ，このようなリンクアイコンを設ける必要があるのかというと「クリックすると別サイトに移動しますよ」というある意味で閲覧者の覚悟を求めているわけである．(そんな大げさなものでもないが．)

ただし，自分でリンクを入れる毎に外部リンクか内部リンクかを判断して，外部リンクにクラス指定するのは非常に面倒．

検索してみたがほとんどのページが「ブラウザの別ウィンドウで開く」開き方に対する書き方ばかりだった．
外部リンクではなく，別のウィンドウ(もしくは別のタブ)である．
なかなか見つからないので，記事にして投稿することにした．

外部リンク アイコンを決める

まず，外部リンクへのアイコンは fontawesome を選ぶ．
https://fontawesome.com/icons/external-link-alt?style=solid

ここでは， を使ってみた．

target="_blank" は外部リンクではない

検索した時は外部リンクは target="_blank" という前提のページがほとんどだった．
target="_blank" はただ別ウィンドウで開くという意味しかない．
外部サイトへのリンクを意味してはいない．

自サイトでも別ページで開きたい時はある．
よって，以下のように自サイトと自サイト以外を区別することにした．

http や // で始まるリンクは一旦すべて外部リンクとみなす．
その上で自社サイト(www.rectus.co.jp) は除くという処理をしている．
これは wordpress を意識した処理である．

相対リンクを使っている場合は http も // もないので外部リンクとはならない．

CSS の書き方

該当ページのHTMLに以下のタグを入れ，

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">

css は以下のように書く．(サンプルコード)

a[href^="http"]:after,
a[href^="//"]:after {
  margin: 0 0 0 3px;
  font-family: "Font Awesome 5 Free";
  content: '\f35d';
  font-weight: 900;
}
a[href^="https://www.rectus.co.jp/"]:after {
  margin: inherit;
  font-family: inherit;
  content: '';
  font-weight: inherit;
}

https://www.rectus.co.jp/
の部分は自分のサイトに合わせて変更する必要があるので注意してください．