外部リンクの後ろにアイコン画像を追加

検索開始

外部へのリンクの後ろに、アイコンみたいなやつをつける作業を開始。

以前から考えていたものの、小難しそうだし、別になくても困らないし、及び腰になってました。

外部リンクに"target="blank"を付与していないため、上記2つのページで紹介されている方法は使えず。

どうやって外部リンクと内部リンクを識別させようか、途方に暮れつつ検索を続けていると…。

これはドンピシャで答えっぽい。ありがたく参考にさせてもらいます。

属性セレクタの使用は今回が初めてのはず。

今回使用する属性セレクタは、4番目のA[属性名^=”文字列”] (属性値が指定の文字列から始まる要素A)。

それと、"^"って"キャレット"って呼ぶんですね。初めて知りました。

"リンクアイコン画像無料"で検索すると、たくさんの無料配布サイトがヒット。

その中でも、今回はicooon-monoさんの"新しいウィンドウで開くボタン1"の16pxを選択。

まぁ、新しいウィンドウでは開かないんですけど、一目見て、外部リンクだと分かれば問題なし。

実装した結果は、このページの外部リンクを見れば分かるはず。それにしても、小さな画像がリンクの後ろにあるだけで、かなり雰囲気が変わりますね。

こういう小さな工夫を軽視してはダメだということは、今回の画像の追加で、よく理解できました。

画像周りのCSSと属性セレクタは、ほとんど触ったことがなかったので、苦労しそうだなと思っていたら、特にトラブルもなく終了。

ドンピシャで答えが見つかったのが大きかったですね。Webparkさん、icooon-monoさん、ありがとうございました。

a[href^="http"]  {
  background: url(image/external-link.png) no-repeat right center;
  padding-right: 25px;
  margin-right: 10px;
}

CSSファイルからみた相対パスを指定。

フォルダの名前は"image"、アイコン画像の名前は"extarnal-link.png"。

もちろん、名前は何でもかまいません。

padding-rightは、リンクとアイコン画像との距離。margin-rightは、アイコン画像と後ろの文章との距離。