monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。

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

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

デフォルトのAmazon商品紹介

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

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

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

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

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

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

アカウント設定画面

表示された画面のAmazonアソシエイトIDのところに先ほどのアソシエイト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);
}

背景Squid Ink&文字オレンジ

.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);
}

背景Squid Ink&文字オレンジ&角丸

.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);
}

背景Squid Ink&文字オレンジ&角丸&影あり

.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; /* 背景色 */
}

背景色などはお好みの色に変更することができます。

.asin-detail-buyの方がボタンの設定で、.asin-detail-buy:hoverは、マウスをボタンに合わせたときの設定です。

色の指定はHEXでもRGBでも、お好みの背景色や文字色に変えて使ってみるのも楽しいですね。

色見本で参考にしているサイトのリンクを貼っておきます。

参考サイト: WEB色見本 原色大辞典 - HTMLカラーコード  

掲載しているコードについて

当ブログでは、カスタマイズを行なっていく上で、HTMLやCSSなどのコードを掲載しています。 自由にコピペしてご利用いただいても構わないのですが、利用しているテーマなどによってはうまくいかない場合もございます。 また、コードを利用して不具合が生じた場合でも一切の責任は負いかねますので、その点はご理解、ご了承いただきますようよろしくお願いいたします。