Amazonアフィリンクのデザインを整える

2021-09-21 / 2021-09-21

このブログでもAmazonアフィリエイトリンクを使っているんですが、デフォルトのアフィリンクってちょっと見にくいですよね

▼こういうやつ

なのでちょっとカスタマイズしたブックマークレットを使って、そこそこ整えたアフィリンクを作ってます

▼使うとこんな感じ

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice) | Dustin Boswell, Trevor Foucher, 須藤功平, 角征典 |本 | 通販 | Amazon

￥2,640※2021年9月21日時点

Amazon.co.jp

tag=okdyy75-22の部分は自分のIDを使ってください

使用は自己責任でお願いします

javascript:(() => {
const link = document.location.href + '&tag=okdyy75-22';
const asin = document.location.href.match(new RegExp("https://www.amazon.co.jp/(gp/product|dp)/(.*?)/", "i"))[2];
const imgSrc = '//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&ASIN=' + asin;
const title = document.title;
let price = document.querySelector('#corePrice_feature_div .a-offscreen').textContent;
if (!price) price =  document.querySelector('#priceblock_ourprice').textContent;
if (!price) price = document.querySelector('#price').textContent;
if (!price) price = document.querySelector('#newBuyBoxPrice').textContent;
const dt = new Date();
const priceCheckedAt = dt.getFullYear() + '年' + (dt.getMonth() + 1) + '月' + dt.getDate() + '日';
const source = 'Amazon.co.jp';
const tag = `
<div class="affiliateCard">
    <a href="${link}" target="_blank" class="affiliateCard__link"></a>
    <img src="${imgSrc}" class="affiliateCard__image" >
    <div class="affiliateCard__detail">
        <div class="affiliateCard__title">
            ${title}
        </div>
        <div class="affiliateCard__priceWrapper">
            <span>
                ${price}
            </span>
            <span class="affiliateCard__priceCheckedAt">
                ※${priceCheckedAt}時点
            </span>
        </div>
        <div class="affiliateCard__source">
            ${source}
        </div>
    </div>
</div>
`;
navigator.clipboard.writeText(tag);
})()

スタイルシート

.affiliateCard {
    position: relative;
    display: flex;
    margin: 10px 0;
    border: 1px solid $border;
    &:hover {
        opacity: 0.7;
    }
    &__link {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    &__image {
        margin: auto;
        padding: 10px;
        width: 140px;
        height: 140px;
        object-fit: contain;
    }
    &__detail {
        margin: 10px;
    }
    &__priceWrapper {
        margin-top: 5px;
        color: #333;
    }
    &__priceCheckedAt {
        margin-left: 20px;
        font-size: 14px;
    }
    &__source {
        margin-top: 5px;
        font-size: 13px;
        color: $light-text;
    }
}

@media only screen and (max-width: $sp-width) {
    .affiliateCard {
        display: flex;
        flex-direction: column;
    }
}

Amazonアフィリンクのデザインを整える

関連記事

Amazonで使えるブックマークレット