外部リンクに自動でアイコンを付ける方法です

業務外

ショートカットアイコンとかファビコンの仕組みを調べるため、ネット検索していたら面白い記事を見かけました。外部リンクに自動でアイコンを付ける方法です。
井戸掘りブログで記事を投稿する際に、外部リンクにいちいちジャンプアイコン（）を付けるのが何だか面倒いと思っていた所です。試してみました。

---

先ずは自動でアイコンを付けるコードです。完成型です。

<style>
a[href^="http"] { 
  padding: 0px 20px 0px 2px;
  background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2lZvhO5KLhRDehKcQsYI8XIunLBzd_1Qwg1g1am9460rwglRPGevspgmv37gR8XzJZPhLTnyM6av6n7laxLtHQ8vV69yDoT5JHFIMtB8jINql8MPB62ZaWW1al9X31jdKhx4Z87XblwbT/s1600/jumpicon64.png'); 
  background-repeat:no-repeat;
  background-size: 16px 16px;
  background-position:right center;
} 
/* ここに除外コードを追加（後述） */
</style>

ブログに組み込んでみると、確かに外部リンクにアイコンが自動表示されました。（位置とサイズに難があり調整しました、これは後述）

ただし、アイコンの数が多すぎます。ブログ内の全てのリンク、例えば記事へのリンクやPicasaの写真にまでアイコンが表示されています。

次にアイコンを表示しないための、除外コードを追加します。このブログのURLとBloggerのサイトURL。Picasaの写真のURLとアルバムのURLが対象です。こんな感じ。

a[href*="//nsfarmer.blogspot.com/"] { 
  padding: inherit; 
  background:transparent; 
}
a[href*="//nsfarmer.blogspot.com/"]{
  padding: inherit; 
  background:transparent; 
}
a[href*="//www.blogger.com"] { 
  padding: inherit; 
  background:transparent; 
}
a[href*=".bp.blogspot.com/"] {
  padding: inherit; 
  background:transparent; 
}
a[href*="//picasaweb.google.com/"] {
  padding: inherit; 
  background:transparent; 
}

ブログを確認するとかなりアイコンが減りました。残りは日本ブログ村のバナーと、自己紹介ガジェットのGoogle＋のリンクです。これも除外コードに追加したい所です。しかし、単純に除外コードを追加すると日本ブログ村の紹介記事や、自己紹介の作成記事で必要なジャンプアイコンも表示されなくなります。
後、amazonアソシエイトの画像にもアイコンが付加されますが、これも不要です。どうしましょうか？
アイコンを付けるリンクと、付けたくないリンクをURL以外で識別する必要があります。

閃きました（3日程掛かりましたが）、ブログの修正が必要になりますが、除外したいリンクのaタグにtitleプロパティを追加して識別しましょう。除外コードも追加します。こんな感じ。

a[title="商品の画像"] {
  padding: inherit;
  background:transparent; 
}
a[title="固定のリンク"] {
  padding: inherit; 
  background:transparent; 
}

これで大成功！！

---

総括
つまり、外部リンクを指定するaタグの範囲に余白を付けて、背景にアイコンの画像を付けるだけです。そしてアイコンを付けたくないaタグは、余白と背景画像を無効にしています。
言われてしまえば簡単ですが、自分の知識レベルでは思い付きませんね。

感想と構想

サンプルコードを参考にしてCSSを作成しましたが、最初は上手く行きませんでした。古い記事を参考にしたため、ブラウザの仕様に合わなくなっていたのかも知れません。
画像がリンクの中央に表示され、余白の意味がない。これは、background-positionプロパティで解決しました。一方、画像サイズには手こずりました。

最初にbackground-sizeプロパティの使い方を勘違いしていたため、画像サイズが制御できずに悩みました。画像サイズに関連する（と思われる）margin、padding、height、font-size、borderの各プロパティを弄くり倒しましたが、ダメです。アプローチを間違えて、2日間無駄なりました。（笑）

もう一度、background-sizeプロパティの仕様を読み直して、サイズを指定したら、ドンピシャリ！！


今回作成したスタイルシートをブログテンプレートに組み込めば、自動でジャンプアイコンが付くようになります。これからは記事の投稿が楽になりますね。しかし、手動でジャンプアイコンを付けた過去の投稿記事は、アイコンが2個表示されてしまいます。
んー、仕方ない。過去記事を全て見直して、ジャンプアイコンを削除しますか。これから楽になる以上の労力を使う気がしますが。（笑）

---

リンクに自動でアイコンを付ける方法は、以下の記事を参考にさせていただきました。

CSSでPDFやExcelなどのリンクに自動でアイコンを付ける方法


CSSの書式を適用する対象を指定するのに、以下の記事を参考にしました。

意外と知らない!?CSSセレクタ20個のおさらい