外部リンクか内部リンクかを視覚的にわかるようにする
外部リンクを｢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の設定にしてしまうと、サイト全ての外部リンクにアイコンが表示されてしまい、レイアウト崩れの原因になってしまうので、記事の部分などだけに限定して設定をしてください。
