CSSで外部サイトへのリンクの後ろにアイコン画像を表示する

外部サイトへのリンクの識別法

以下のようにすればリンクの後にアイコン画像を表示されます。

a {
  background:url(画像のURL) no-repeat right center;
  padding-right:15px;
}

これだとすべてのリンクに画像が表示されるので、外部リンクと内部リンクを識別する必要があります。

URLで識別する

a[href^="http"] {
  background:url(画像のURL) no-repeat right center;
  padding-right:18px;
  margin-right:5px;
}
a[href^="http://weboook.blog22.fc2.com/"] {
  background:none;
  padding-right:0px;
  margin-right:0px;
}

1つ目で絶対パスで指定したリンクに対して背景画像を設定し、2つ目は自分のサイトのアドレス（http://weboook.blog22.fc2.com/）を指定し、背景画像を表示しないようにしています。表示しないサイトのアドレスはカンマで区切ると複数設定することも可能です。

画像を表示する部分をpadding-rightで、続く文章との間隔をmargin-rightで設定します。この部分は好みに合わせてご自由に。margin-rightは設定しなくても大丈夫です。

target="_blank"で識別する

外部サイトへの移動にtarget="_blank"を使っている場合は以下の設定でも可能です。

a[target="_blank"] {
  padding-left: 13px;
  background: url(画像のURL) no-repeat center left;
}

サイトに合わせて表示する場所を限定する

このままだとページ内すべての外部リンクに適用されますので場所によっては必要ないです。で、「URLで識別する」を使って表示箇所を限定する方法を考えます。

メインコンテンツのみに適用

サイドに表示するとうっとうしいので記事内のリンクにのみに適用させます。

記事を表すボックスのclassをentryとすると以下のようになります。

.entry a[href^="http"] {
  background:url(画像のURL) no-repeat right center;
  padding-right:18px;
  margin-right:5px;
}
.entry a[href^="http://weboook.blog22.fc2.com/"] {
  background:none;
  padding-right:0px;
  margin-right:0px;
}

指定したタグは除外する

さらにメインコンテンツの中でも適用したくない場所などもあると思います。

このブログの場合h4タグには適用しないようにしました。

.entry a[href^="http"] {
  background:url(画像のURL) no-repeat right center;
  padding-right:18px;
  margin-right:5px;
}
.entry a[href^="http://weboook.blog22.fc2.com/"],
.entry h4 a[href^="http"] {
  background:none;
  padding-right:0px;
  margin-right:0px;
}

画像リンクは除外する

画像リンクの横に画像が並ぶとどうも変な感じです。

すべての画像にクラスを指定していれば先ほどの方法でH4のところを変えれば対応可能ですが、そんなことしている人はあまりいないと思います。

今からすべての画像にクラスを指定するものかなりの手間なので、邪道な気もしますがネガティブマージンを使ってみます。

.entry a[href^="http"] {
  background:url(画像のURL) no-repeat right center;
  padding-right:18px;
  margin-right:5px;
}
.entry a[href^="http"] {
  margin-right:-23px;
}
.entry a[href^="http://weboook.blog22.fc2.com/"],
.entry h4 a[href^="http"] {
  background:none;
  padding-right:0px;
  margin-right:0px;
}

画像を表示するためのpadding-right:18px;とmargin-right:5px;を、ネガティブマージンmargin-right:-23px;で相殺しています。

外部リンク用アイコン

外部リンク用のアイコン素材を紹介しているサイトは意外と少ないですがここだけ押さえておけば十分かと思います。

20色で合計100個のアイコンがPNGとPSD形式で紹介されています。