⇒おすすめのPS4ソフト&周辺機器!

【cocoon】Amazon商品リンクのボタン色を変えるCSS【コピペ可】

当ブログでのAmazon商品リンクは、このようなボタン色に設定しています。

ボタンの色を変えることで、自分のブログデザインによりなじむボタン色にしようというのが今回の試みです。

初心者の方からすると「何だか難しそう」というイメージを持たれるかもしれませんが、この記事で紹介するCSSはコピペで実装できるので、是非チャレンジしてみて下さい。

スポンサーリンク

まず初めに当ブログのAmazon商品リンクのCSS

.shoplinkrakuten a {
background: #e52952;
}
.shoplinkyahoo a {
background: #dbb82e;
}

上記灰色枠内のCSSはコピペOKですm(__)m

  1. CSSの貼り付け場所が分からない方はこちら

このCSSの変更点は、

・楽天のボタンを#e52952(薄い赤色)に
・Yahoo!のボタンを#dbb82e;(黄土色)に

になります。

ただし、このCSSは私のブログデザインに合うような色の設定にしてあるので、このCSSをコピペすればたくさん売れるというわけではありません。

どの色がクリックされるかは正直ブログによるかと。

そこで以下では、ボタン色を自分の好きな色に変更する方法を紹介します。

ボタンの色を好きな色に変えたい場合

Amazonのボタン色を変えたい場合

.shoplinkamazon a {
background: #〇〇〇〇〇〇;
}

楽天のボタン色を変えたい場合

.shoplinkrakuten a {
background: #〇〇〇〇〇〇;
}

Yahoo!のボタン色を変えたい場合

.shoplinkyahoo a {
background: #〇〇〇〇〇〇;
}

これらのCSSの太い赤字部分#英数字;)を変更することによって、ボタン色を好きな色に変更可能です。

その他の色まとめ
・#000000  黒
・#ffffff    白
・#1e73be  青
・#f713af   ピンク
・#81d742  緑
・#8224e3  紫
・#eeee22  黄色
・#919191  ねずみ色

これらはあくまでおおよその色なので、

「もっと薄くしたい」
「もっと濃くしたい」

と考えた場合、自分でお好みの色を探す方法を覚えておくと便利です。

自力でお好みの色を探す方法

#英数字;は、【cocoon設定】→【ヘッダー】→【サイトキーカラー】からいろいろ調べてられます。

私はこのキーカラー機能を利用して、いつもカスタマイズしています。

変更をまとめて保存を間違えて押してしまうと、ボタン色にするつもりの色でキーカラーが適用されてしまうので注意!

×ボタンでブラウザを閉じようとすると、「行った変更が保存されない可能性があります」という確認ダイヤログが出ますが、むしろキーカラーの変更をしたくないため【このページを離れる】でOKです。

CSSの貼り付け場所が分からない方へ

CSSが良くわからない方向けに、このCSSをどこにコピペすればいいか以下で記載していきます。

ワードプレスのダッシュボード画面から、

【外観】→【テーマの編集】→【Cocoon Child: スタイルシート (style.css)】

へ移動。

ここのファイルの空いているところ(下側)にCSSをコピー&ペーストで貼り付ければOKです。

2018年12月追記

cocoon設定でAMPをオンにしている場合は

【外観】→【テーマの編集】→【Cocoon Child: amp.css】

でこちらにもコピペすると、AMPページでもボタン色の変更が適用されます。

2018年12月のcocoon1.4.3アップデートにて、【子テーマのstyle.css】がAMPページでも読み込まれるようになりました。

そのため、amp.cssに記載する必要がなくなります。

詳しくはcocoonの公式ページをご確認下さい。

子テーマのstyle.cssとamp.cssに重複してスタイルを書いている場合は重複部分の削除をおすすめします