はてなブログの Amazon 商品紹介をちょっぴり改善するカスタマイズ

はてなブログには、カエレバやヨメレバといった外部サービスを使わず、管理画面から直接記事に Amazon の商品を紹介できる機能「Amazon 商品紹介」があります。

非常に便利ですが、Amazon の商品ページへのリンクかどうか一目で分からないという弱点があり、このためにカエレバやヨメレバを使っている方もいるようです。この弱点を改善する CSS を紹介します。

CSS
- リンクの色を変更
- アイコンを表示
適用後

CSS

リンクの色を変更

.hatena-asin-detail a {
    color: #e47911;
}

.hatena-asin-detail a:hover {
    color: #ff9900;
}

Amazon 商品紹介に含まれるリンクの色を Amazon 風のオレンジに変更します。

アイコンを表示

.hatena-asin-detail {
    position: relative;
}

.hatena-asin-detail > a,
.hatena-asin-detail > div {
    position: relative;
    z-index: 2;
}

.hatena-asin-detail::before {
    color: #ddd;
    content: "\f034";
    cursor: default;
    display: inline-block;
    font: 36px/1 blogicon;
    vertical-align: middle;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

Amazon 商品紹介の class である .hatena-asin-detail に position: relative を指定し、はてなブログで標準で使えるアイコンフォントの Amazon アイコン（\f034）を擬似要素として右下に表示します。

moonnote.hateblo.jp