外部リンクにアイコンを付ける

記事中にある外部リンクにアイコンを付けました。内部リンクはそのまま。

こちらの記事を参考にしました。
[CSS]リンク先や拡張子ごとにリンクのアイコンを変更するスタイルシート

CSSのセレクタを使って "http://" と "https://" で始まるリンクに対して、外部リンク用のアイコンを背景として表示するようにします。
↓こんな感じ。(細かい設定は省略してます)

a[href^="http://"], a[href^="https://"] { /* 外部リンクアイコン */
   background:transparent url(外部リンクアイコンのパス) right center no-repeat;
   padding-right:12px;
}

内部リンクに "http://" を付けてなければこれでOkなんですが、内部リンクにも "http://" を付けてる場合はさらにCSSのセレクタを使って、自サイトへのリンクに背景を表示しないようにCSS指定を上書きしておきます。↓こんな感じ。

a[href^="http://digital.veefour.com"] { /* 内部リンク用初期化 */
   background:transparent; padding-right:0;
}

上の書き方だとサイト内全体が対象になるので、記事中だけにしたい場合は、例えば記事ブロックの <div> 内にある <a> タグのみ対象とするように書く必要があります。
ちなみに、FC2ブログだと画像ファイルがブログ本体とは違うサーバーにあるため、記事中にはサムネイルを表示してオリジナルの画像にリンクしてるような場合は外部リンクとして判断されちゃいます。

表示例 → 外部リンクアイコン例

Firefox3、Safari4、Chrome4、IE8では問題なく表示できました。
環境がないので未確認ですが、IE6,7では表示されないと思います。


COMMENT

コメントをどうぞ

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)