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

最終更新日:2020年05月13日 公開日:2019年10月29日

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

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

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

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

まず,外部リンクへのアイコンは 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に以下のタグを入れ,

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

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

 

Contact

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

 
contact
無料ダウンロード中!
大好評の書籍はこちら
Pagetop