はてなブログのAmazon商品紹介のボタンの色を変える方法

はてなブログでは、Amazonアソシエイトに参加している人ならだれでも簡単に、Amazon商品紹介という機能を使ってAmazonの商品リンクをブログに貼ることができます。

はてなブログにAmazonアソシエイトの設定をしよう
Amazonのブランドカラー
はてなブログのAmazon商品紹介のボタンの色を変える方法
CSSの解説

Amazon商品紹介のボタンは、デフォルトではグレーで、ボタンの文字の色はテーマのリンクカラーになっていますが、今回はクリックされやすいようにわかりやすい色に変更する方法をご紹介したいと思います。

はてなブログにAmazonアソシエイトの設定をしよう

Amazonアソシエイトに登録すると、AmazonアソシエイトIDが付与されます。

【公式サイト】アソシエイト・セントラル

Amazonアソシエイトにログインすると右上に「アソシエイトID: affiliate〇〇〇〇-〇〇」とIDが表示されていますので、それをコピーしておきます。

はてなブログの「管理画面」→「アカウント設定」→「AmazonアソシエイトID」の「変更する」をクリックします。

表示された画面のAmazonアソシエイトIDのところに先ほどのアソシエイトIDを貼り付けます。

楽天とAmazonのアフィリエイトIDは、はてな共通の「アフィリエイト」設定画面で設定し、iTunesのアフィリエイトIDはアカウント設定ページで設定できます。

はてなブログで各種アフィリエイトプログラムを利用する場合には、ガイドラインに従って連絡先の明記などが必要になります。

連絡先は、恒常的に受信できるメールアドレスなど、誰でも直接連絡が取れるもので、

自身でプライバシーポリシーを設けている場合、プライバシーポリシー内に記載
ブログのヘッダ、フッタ、サイドバー、プロフィールなど、どの記事からも確認できる箇所に記載

が必要となります。

参考：はてなブログ個人営利利用ガイドライン（2019年10月1日施行） - はてなブログヘルプ

ただし、記事編集画面の編集サイドバーから挿入される広告のみを掲載している場合は、非営利利用とみなされます。

Amazonのブランドカラー

AmazonのブランドカラーはAmazon OrangeとSauid ink、そしてWhiteです。

Amazon Orange（amazonのプライマリー・ブランド・カラー）

HEX: #FF9900
RGB: 255、153、0

Squid Ink

HEX: #333E48
RGB: 51、62、72

White

HEX: #FFFFFF
RGB: 255、 255 、255

参考：Amazon Logo Brand Guidelines（PDF）

ブランドカラーは馴染みがあるので、今日はブランドカラーを使ってボタンのCSSを編集してみましょう。

はてなブログのAmazon商品紹介のボタンの色を変える方法

「管理画面」→「デザイン」→「カスタマイズ」 →「デザインCSS」に下のCSSをコピーして貼り付けると反映されます。 ※CSSにもとから入っている記述は消さないでください。

.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy {
    background-color: #FF9900;
    color: #fff;
}
.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy:hover {
    background-color: rgba(255,153,0,.7);
}

.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy {
    background-color: #FF9900;
    color: #fff;
    border-radius: 5px;
}
.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy:hover {
    background-color: rgba(255,153,0,.7);
}

.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy {
    background-color: #FF9900;
    color: #fff;
    border-radius: 5px;
    box-shadow: 1px 2px 4px #777;
}
.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy:hover {
    background-color: rgba(255,153,0,.7);
}

.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy {
    background-color: #333E48;
    color: #FF9900;
}
.hatena-asin-detail-info .asin-detail-buy:hover {
    background-color: rgba(51,62,72,.7);
}

.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy {
    background-color: #333E48;
    color: #FF9900;
    border-radius: 5px;
}
.hatena-asin-detail-info .asin-detail-buy:hover {
    background-color: rgba(51,62,72,.7);
}

.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy {
    background-color: #333E48;
    color: #FF9900;
    border-radius: 5px;
    box-shadow: 1px 2px 4px #777;
}
.hatena-asin-detail-info .asin-detail-buy:hover {
    background-color: rgba(51,62,72,.7);
}

.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy:hover {
    color: #fff;
    background-color: #FF9900;
}
.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy {
    color: #FF9900;
    background-color: #fff;
    border: solid 2px #FF9900;
}

.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy:hover {
    color: #fff;
    background-color: #FF9900;
}
.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy {
    border-radius: 5px;
    color: #FF9900;
    background-color: #fff;
    border: solid 2px #FF9900;
}

.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy:hover {
    color: #fff;
    background-color: #FF9900;
}
.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy {
    border-radius: 5px;
    color: #FF9900;
    background-color: #fff;
    border: solid 2px #FF9900;
    box-shadow: 1px 2px 4px #777;
}

商品タイトルの部分のリンク色も変更ができます。黒くしたいのであれば

.hatena-asin-detail .hatena-asin-detail-info .hatena-asin-detail-title a {
    color: #333;
}
.hatena-asin-detail .hatena-asin-detail-info .hatena-asin-detail-title a:hover {
    opacity: .7;
}

ただし、このリンク色は楽天商品紹介と同じクラス名が付与されているので、楽天商品紹介のタイトルの色も同時に変わります。

CSSの解説

.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy { /* ボタンの設定 */
    border-radius: 5px; /* 角丸にする */
    color: #FF9900; /* 文字色 */
    background-color: #fff; /* 背景色 */
    border: solid 2px #FF9900; /* 枠線 */
    box-shadow: 1px 2px 4px #777; /* 影をつける */
}
.hatena-asin-detail .hatena-asin-detail-info .asin-detail-buy:hover { /* カーソルをボタンに合わせたとき */
    color: #fff; /* 文字色 */
    background-color: #FF9900; /* 背景色 */
}