別窓で開くリンクにアイコンをつける方法［はてなブログ］

サイトにリンクを貼るとき、そのリンクをクリックすると「新しいウィンドウで開くのか（target="_blank"）」それとも「そのウィンドウ内で移動するのか」が分かったほうが、見ている方に親切です。

大手のサイトではだいたい外部リンクが別窓で開くとき、上の画像のようにマークが付いています。

これをはてなブログでやるにはどうしたらいいのか調べてみました。

好きなアイコンをダウンロードする

http://www.shapes4free.com/vector-icons/external-link-icons/

上記のサイトに外部リンク用のアイコンがまとまっているので、ダウンロードして好きなものをFlickrやはてなフォトライフなどにアップロードしておきます。

JavaScriptがなぜか反映されない

外部リンク（target=”_blank”）にアイコンやイベントトラッキングを設置する | SetucoCMSプロジェクト

この方法で実現しようと思いましたが、フッターにJavaScriptを記載してもなぜか反映されませんでした。本来はこれが一番スマートだと思うんですけど…原因が分かる方がいたら教えてください。

諦めてCSSだけで実現する方法へ。

URLで識別してアイコンを表示する

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

はじめに絶対パスで指定したリンクに対して背景画像としてアイコンを表示します。次に、このサイトの内部リンクにはアイコンを付けたくないので、自分のサイトのアドレス（https://akiueo.hatenablog.com/）を指定して、背景画像を消しています。

画像を表示する位置をpadding-rightで設定し、文章との間隔をmargin-rightで設定しています。rightをleftに変えて調整すればリンクを付けたい部分の前にアイコンを出せます。

あとは表示したくないリンクを追加して消していくだけ。

番外編：リンクの先頭にファビコンをつける[はてな記法]

はてな記法だと下記のように書くと、リンクの先頭にファビコン（ブラウザでタブの前に付くマーク）を表示することができます。

[https://akiueo.hatenablog.com/entry/customize-9/:favicon:title:bookmark:star]

はてなブログを毎日更新するためにほどこした９つのカスタマイズ - AIUEO Lab2