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

hatenaロゴ

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

Corredorさんの以下の記事を参考にさせてもらいました。ありがとうございます。
はてなブログの Amazon と楽天の商品リンクにアイコンを付けた - Corredor
はてなブログの Amazon と楽天の商品リンクにアイコンを付けた 第2弾 - Corredor

(デザイン→カスタマイズ→デザインCSSにコードを入力)

CSS
/* 商品カード全体の設定 */
.hatena-asin-detail,
.hatena-rakuten-detail {
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
}

/* 商品カードのアイコンの設定 */
.hatena-asin-detail:after,
.hatena-rakuten-detail:after {
    visibility: visible;
    position: absolute;
    font-family: blogicon;
    font-size: 32px;
    font-weight: normal;
    color: #ddd;
    right: 0.6em;
    bottom: 1.6em;
}

/* Amazonの商品カードの右下にアイコン */
.hatena-asin-detail:after {
    content: '\f034';
}

/* 楽天の商品カードの右下にアイコン */
.hatena-rakuten-detail:after {
    content: '\f722';
}

商品カード全体「-detail」を相対位置(position: relative)に、アイコン「:after」を絶対位置(position: absolute) にします。

「:after」が非表示になっているので、(visibility: visible;)でアイコンを表示させます。
また、clearfixが効かなくなってしまうので、親要素を(overflow: hidden;)します。

参考になるブログ・Webサイト
ITハット - CSSでFontAwesomeなどのWebフォントを背景画像として扱う
ZENO-TEAL - カスタマイズに便利な、はてなブログで使えるアイコンフォント一覧

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