外部リンクに自動的にアイコンを付ける仕様にしました。

このブログで、外部リンクに外部リンクと分かるアイコンが付くようにしました。

外部リンクの末尾に、このアイコン→ exlink を付けるようにしました。

いろいろ調べてみたのですが、CSSだけで対応してみました。

外部リンクアイコンを付けるCSSのコード

アイコンを末尾に付ける設定については、「background-image」を使うという方もいたのですが、僕は「::after」を使いました。

そして、すべてのリンクにアイコンを付けてから、内部リンクはアイコンを消すという順序で設定しました。

具体的には以下のようなコードです。

a:after { content : url(“****.png”);}
a[href^=”http://nogi”]:after { content:none;}

1行目でリンクのの末尾に画像を付けています。そして、2行目でリンク先のurlがこのブログ内のときには、画像を表示しないことにしています。

これを基本に、サイドバーなどのたくさんの外部リンクがある部分は煩わしいので消したりしています。

基本的に、本文の外部リンクにだけ付くようにしています。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク