はてなブログの商品カードにAmazonと楽天のアイコンを表示

はてなブログでは、標準でAmazonと楽天の商品を紹介できる機能があるのですが、以前にはてなブログの引用デザインをはてなのアイコンフォントで表示したときのコードを応用して、Amazonと楽天の商品カードの右下にそれぞれのアイコンを表示してみます。

（デザイン→カスタマイズ→「デザインCSS」にコードを入力）

CSS
/* 商品カードの設定 */
.hatena-asin-detail,
.hatena-rakuten-detail {
    position: relative;
    margin: 16px 10px 21px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
}

/* 商品カードのアイコン設定 */
.hatena-asin-detail:after,
.hatena-rakuten-detail:after {
    position: absolute;
    font-family: blogicon;
    font-size: 24px;
    color: #222;
    right: 8px;
    bottom: 2px;
}

/* Amazonのアイコン */
.hatena-asin-detail:after {
    content: '\f034';
}

/* 楽天のアイコン */
.hatena-rakuten-detail:after {
    content: '\f722';
}

シードコムス 国産 すっぽん黒酢 サプリメント 約3ヶ月分 90粒 コラーゲンアミノ酸 大豆ペプチド

【ポイント5倍】有機マカ粒 (高吸収タイプ)100g オーガニック334粒　GMP工場 　JAS認定　 マカサプリ 男性 女性 妊活 健康 美容 アルギニン アミノ酸 ビタミン スーパーフード

上記の商品は、以前愛用していたサプリです（元気になります）。いつか記事にします。