簡単なのはアイコンをつけることですが、すでに作ってしまった多くのページを開き、例えば回ブリンクを見つけてせっせと付けていくのは大変です。また、アイコンを先々変更したいときにも不便です。
そこで、CSSで変更をしてみることにしました。
参考にした…というかそのままですが、別ウインドウで開くリンクにアイコンを付加の説明をそのまま採用しました。
<style type="text/css">
a[target="_blank"]:after {
content: url(newwinicon.gif);
margin: 0px 2px;
}
</style>
アイコンは
を使いました。
これに合わせて、画像の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ファイルの記述を変えるだけで、
1 原則として、自動的にtartet="_blank"のリンクには、

2 例外的に、付けたくない場合には代替として、1px*1pxの透明アイコンを付ける(=何もないように見える)。
ということが出来ます。
タグ:リンク
【パソコンの最新記事】
- Agent.exeが犯人だった…多分
- でか過ぎるマウスパッドで裏写り防止
- 楽天Mobile始めました(9)〜Tp-..
- 黒紙の効果を実感
- 楽天Mobile始めました(8)〜Tp-..
- 楽天Mobile始めました(7)〜Tp-..
- Yahoo! BB ADSL解約(2)
- 楽天Mobile始めました(6)〜「WP..
- Yahoo! BB ADSL解約(1)
- 楽天Mobile始めました(5)〜バッフ..
- 楽天Mobile始めました(4)〜Yah..
- 楽天Mobile始めました(3)〜Cov..
- 楽天Mobile始めました(2)〜IO-..
- 互換インクがトラブルの原因…だろう
- 覚え書き〜さくらエディターの正規表現(1..