2017年01月05日

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

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

blank_link02.png
(例としては適当ではありません。全部、target="_blank"ですから。)


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


 基本的にこれだけです。

blank_link01.png


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

 その対策を考えました。
 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"のリンクには、new_page.pngを表示し、
2 例外的に、付けたくない場合には代替として、1px*1pxの透明アイコンを付ける(=何もないように見える)。
ということが出来ます。

blank_link03.png



タグ:リンク
posted by kewpie at 00:26| Comment(0) | TrackBack(0) | パソコン
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/178281485
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
コメントの投稿について
○お名前とコメント欄の記入は必須です。
○メールアドレスは任意です。記入されても公開はされません。管理人のみに知らされます。
○スパム防止のため、
・ホームページアドレス欄への記入はできません。
・コメント欄にURLは記入できません。
・スパムと思われる語を記入できません。
 これらをしようとすると、最終的に投稿完了できません。
○投稿完了後に、管理人の判断でスパムと判断した投稿は削除させていただきます。