スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

CSSで外部サイトへのリンクの後にアイコン画像を表示する方法を備忘録的に残しておきます。方法は色んなブログで紹介されていますが、画像リンクにアイコンを表示しない方法は決め手に欠けます。
gaibulink05.png

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

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

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で識別する」を使って表示箇所を限定する方法を考えます。

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

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

gaibulink01.png

記事を表すボックスの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;
}

指定したタグは除外する

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

gaibulink02.png

このブログの場合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;
}

画像リンクは除外する

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

gaibulink03.png

すべての画像にクラスを指定していれば先ほどの方法で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;で相殺しています。

外部リンク用アイコン

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

gaibulink06.png

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

画像リンクに関してはもっとスマートな方法がないか悩みましたが他にいい方法が思いつかなかったです。もしいい方法があれば教えてください~。
フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。