外部リンクか内部リンクかを視覚的にわかるようにする

|

外部リンクを「target="_blank"」を使用して強制的に別ウィンドウに表示させるか、或いは、ユーザに任意に選択してもらうようにtargetは使用せず常に同一ウィンドウに表示させるかは、いろいろ議論のあるところですが、外部リンク(自ドメイン以外へのリンク)であることがわかるようにするとユーザビリティも向上します。

どのように外部リンクであるかをわかりやすいように表示するか、のひとつの解決方法に「アイコンをつける」というのがあります。その際、「外にリンクする」という感じが出ているアイコンを選びましょう。

サンプルとして、こちらをお使いください。ライセンスは、著作権フリー、利用は無料です。個人利用・商用利用どちらでもお使いいただけます。

外部リンク用アイコン 外部リンク用アイコン

(X)HTMLコード

<p>
   <a href="http://www.abc.net">
      自ドメインではないので、アイコンが表示されます
   </a>
</p>
<p>
   <a href="http://www.xxxx.com">
      自ドメインなので、アイコンが表示されません
   </a>
<p>

CSSコード

a[href^="http"]{
   background:url("icon_anotherlink.gif") no-repeat 0 50%;
   padding-left:15px;
}

a[href^="http://www.xxxx.com"],
a[href^="http://xxxx.com"] {
   background:transparent;
   padding:0;
}

※「xxxx.com」は各自のドメインに書き換えてください。

a[href^="http"]という書き方なのですが、CSS3で草案されている「属性セレクタ」というもので、Firefoxなどのモダンブラウザにはすでに実装されています。しかし、IE6では使用できません。

この場合、a hrefで指定したリンク先に「http」から始まる文字列を含む場合はCSSを実行する、ということになります。

しかしながら、httpから始まるもの全てが外部リンクとは限りません。内部リンクでも絶対パスで記述することは多々あります。

そのため、「http://www.xxxx.com」或いは「http://xxxx.com」(xxxx.comは自ドメインに変更してください)を含むリンクには、アイコンを表示しない、という指定をしています。

余談ではありますが、上記のようなCSSの設定にしてしまうと、サイト全ての外部リンクにアイコンが表示されてしまい、レイアウト崩れの原因になってしまうので、記事の部分などだけに限定して設定をしてください。

関連記事

外部リンク用アイコンを作ってみました [Cool Web Window]

このページに関連する記事

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事