移転しました。

約3秒後に自動的にリダイレクトします。

【はてなブログ】Amazon商品紹介のリンクにAmazonアイコンをつける

基本の完成品

  • 画像の下に文字が回り込まなくなる
  • スマホで見た場合は画像と説明文の2カラムではなく1カラムとなる

完成画像

PC閲覧時

f:id:wride:20200208190559j:plain

スマホ閲覧時

f:id:wride:20200208190605j:plain

コード

/* amazonリンクカードの設定 */
.hatena-asin-detail {
    position: relative;
}
/* Amazonリンクカードアイコンの設定 */
.hatena-asin-detail:after{
    visibility: visible;
    position: absolute;
    right: 0.5em;
    bottom: 1.3em;
    font-size: 45px; 
    font-family: blogicon;/* はてなブログに通常で読み込まれているアイコンフォント */
    color: #ccc;
    content: '\f034';
}

/* 画像の下に説明が回り込まないように */
.hatena-asin-detail>a{
    overflow: hidden;
}

.hatena-asin-detail-info{
    overflow: hidden;
}

/* スマホのときは1カラムにする */
@media screen and (max-width: 480px) {
    .hatena-asin-detail>a{
        display: block;
        text-align: center;
        width: 100%;
    }
    .hatena-asin-detail .hatena-asin-detail-image {
        float: none;
    }
}

おまけ:影付き

格好つけてみようと影を追加したもの

完成画像

PC閲覧時

f:id:wride:20200208191106j:plain

スマホ閲覧時

f:id:wride:20200208191107j:plain

コード

基本のコードに下記を追加する

/* 影をつける */
.hatena-asin-detail {
    box-shadow: 5px 5px 5px #ccc;
}

 

最近はヨメレバカエレバを使っているのでほぼ利用していないのですけど、どういうわけかいじくってました。