2013年2月2日土曜日

cssで投稿の外部リンクにアイコンをつける

ラベル: 時刻:

前の投稿でけっこうな数の外部リンクとページ内リンクを書きました。 外部リンクとページ内リンクが混じっていてちょっと見づらいかもしれません。 その投稿ってのがcssセレクタのお話なんですよね。 せっかくなのでそこで調べたことを使ってbloggerのテンプレートを書き換え、外部リンクにアイコンを付けてみました。

これをやってみたキッカケの1つに「主要ブラウザの中でなかなか対応しなかったieでも ::after で画像を追加できるようになった」ってのがあります。 逆に言うと古いieでは表示されません。

追加したスタイルはこんな感じです。 

.entry-content *:not(object):not(embed) a[href^="http"]:not([href^="http://pieceofnostalgy.blogspot."]):not([href$=".png"]):not([href$=".gif"]):not([href$=".jpg"])::after {
    content:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAgMAAABinRfyAAAADFBMVEX///8znOeo4P+Lvv/oog0KAAAAAXRSTlMAQObYZgAAADtJREFUCNdjYGBgZQACNgcGxtCwCQyMq1YtARErGWJBrMyVQLHMlcsKgMRSEGsVChEKJLJWwYjQ0NAAAOvfHQIxIo/eAAAAAElFTkSuQmCC');
}

完全に自分のブログ用のセレクタになってます。 でも、ドメイン名のところを書き換えれば他のブログでも使えるかもしれませんね?

セレクタについてちょっとだけ説明しておきましょう。 .entry-content が投稿本文に当たるクラスです。 本文に書いたリンクにのみマッチ。

*:not(object):not(embed) でyoutubeを埋め込んだときに外部リンクのマークが付くのを防いでます。 他のobjectも除外されてしまいますが、そもそもブログに色々リンクを貼る気はないので雑だけど気にしない方向で。

a[href^="http"] でページ外へのリンクをマッチ。 not([href^="http://pieceofnostalgy.blogspot.jp/"]) でブログ内のリンクを除外。 bloggerに投稿した画像はPicasaにアップロードされます。 投稿で画像を貼るたびにPicasaへのリンクができるので、それも除外です。 少々野暮ったいですが :not([href$=".png"]):not([href$=".gif"]):not([href$=".jpg"]) と書いて除外しました。

アイコンの画像はデータURIスキームでテンプレートに埋め込みました。 画像のサイズを減らすためパレット4色のpng画像にしています。 見た目はこんな感じ。

対応ブラウザで見たら下のリンクの右端に付いてます。

投稿者