読者です 読者をやめる 読者になる 読者になる

MoonNote

はてなブログテーマ / CSS / jQuery

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

f:id:waitingmoon:20160104215851p:plain

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

非常に便利ですが、Amazon の商品ページへのリンクかどうか一目で分からないという弱点があり、このためにカエレバやヨメレバを使っている方もいるようです。この弱点を改善する 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-detailposition: relative を指定し、はてなブログで標準で使えるアイコンフォントの Amazon アイコン(\f034)を擬似要素として右下に表示します。

moonnote.hateblo.jp

適用後

Amazon のブランドカラーとアイコンの表示で確実に Amazon のリンクだと分かるデザインになりました。ブログ収入アップを狙うブロガーの方々は是非お試しください。

広告を非表示にする