外部リンクへのアイコンを表示する

　WEBサイトの大きな特長はリンクですが、内部リンク・外部リンクの区別がユーザーに分かった方が親切な場合もあります。

（例としては適当ではありません。全部、target="_blank"ですから。）

　簡単なのはアイコンをつけることですが、すでに作ってしまった多くのページを開き、例えば回ブリンクを見つけてせっせと付けていくのは大変です。また、アイコンを先々変更したいときにも不便です。
　そこで、CSSで変更をしてみることにしました。

　参考にした…というかそのままですが、別ウインドウで開くリンクにアイコンを付加の説明をそのまま採用しました。

<style type="text/css">
a[target="_blank"]:after {
content: url(newwinicon.gif);
margin: 0px 2px;
}
</style>

　アイコンは

http://qp.jpn.org/img/new_page.png

を使いました。
　これに合わせて、画像のURLを変えます。
　また、全てのページに上記の記述をするのは大変ですから、全てのページに共通のcssファイルに上の記述を書き込みます。

/*************
リンク　2017/01/04
*************/
a[target="_blank"]:after {
content: url(http://qp.jpn.org/img/new_page.png);
margin: 0px 2px;
}

　基本的にこれだけです。

　ただ、中には画像にリンクを埋め込んでいたりレイアウトが崩れたりする場合、外部サイトへのリンクだがアイコンを付けたくない場合があります。

　その対策を考えました。
　class="noicon"としたものだけは、外部サイトアイコンを付けないようにします。
　

/*************
リンク　2017/01/04
*************/
a[target="_blank"]:after {
content: url(http://qp.jpn.org/img/new_page.png);
margin: 0px 2px;
}
a.noicon[target="_blank"]:after {
content: url(http://qp.jpn.org/img/spacer.png);
}

http://qp.jpn.org/img/spacer.png　は、1px*1pxの透明な画像です。
外部リンクを示すアイコンの代わりに、これを表示します。

　HTMLファイルでは、外部サイトへのアイコンを表示したくないリンク（しかも、target="_blank"としているもの）に、「class="noicon"」を加えるだけです。

<li><a class="noicon" target="_blank" href="http://www.rfsoc.org.uk/esiebert.shtml">Robert Farnon Society</a>

*******

　以上で、cssファイルの記述を変えるだけで、
１　原則として、自動的にtartet="_blank"のリンクには、を表示し、
２　例外的に、付けたくない場合には代替として、1px＊1pxの透明アイコンを付ける（＝何もないように見える）。
ということが出来ます。