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

2019年10月29日 HTML&CSS

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

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

検索してみたが見つからないので,記事にして投稿する.

まず,アイコンは
https://fontawesome.com/icons/external-link-alt?style=solid
を使う.

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

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

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

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

該当ページの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/
の部分は自分のサイトに合わせて変更する必要がある.

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
お問い合わせはお気軽に
ノウハウを書籍化!
Pagetop