3

外部リンクにのみアイコンを表示させる

外部リンクにのみアイコンを表示させる

Webサイト内において、外部リンクがある場合、何の注意もないまま外部サイトへリンクしてしまうと、ちょっとした不安感を感じることがあります。そこで「このリンクは外部ページへ移動します。」ということが一目でわかるようにしておくと、ユーザーにとってより安心してサイトを閲覧してくれるひとつの要素になるかと思います。

そこでCSS3で追加定義された属性セレクタ(特定の属性名や属性値に適用可能)を利用します。

通常外部サイトへのリンクは「http://」または「https://」からはじまるので、a要素のhref属性値内に「http://」や「https://」からはじまる値があった場合に外部リンクであると判断するようにして、アイコンを付けるように指定していきましょう。

今回は属性セレクタのひとつ「^」を利用します。

ここでひとつ注意が必要ですが、仮に内部ページへのリンクがある場合には、相対パスでリンク先を指定しておきます。そうしないと内部のリンクにもアイコンが表示されるため、外部リンクと内部リンクの違いがなくなってしまうのでご注意ください。

 

それでは実際に確認していきましょう。

 

DEMO

HTMLを記述

 

CSSを記述

 また、CMSなどサイト内のリンクを自動的に書き出してしまうシステムにおいては、内部リンクであっても絶対パスでリンクが記載されてしまいます。そこでサイト内リンクの場合にはアイコンを表示させないように追加指定しておきましょう。

 さらには、サイドバーなどにバナーを配置している場合、CSSの記述において本文内のa要素のみに指定するように記述します。

 

ここで注意点ですが、IE6などの古いブラウザにはこの属性セレクタは対応していません。どうしてもIE6などにも同じように表示させたい場合はJavaScriptを利用することで可能になります。

 

以上になります。




3 Comments

  1. 凄く参考になりました。プラグインを使うと、画像にまでiconが付いてしまうので、本当に助かりました。ためになる記事をありがとうございます!!(感謝)

    • 「さくま」さん
      コメントありがとうございます。
      外部リンクのみに対応するようなちょっとしたことですが、お悩みが解決されたようで嬉しい限りです。こちらこそありがとうございます^^。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > 外部リンクにのみアイコンを表示させる