RinkerでAmazon/楽天/Yahooのボタンのおすすめ配色とCSS設定

この記事は 約9 分で読めます。

こまり猫

Rinkerのボタンを格好良くカスタマイズしたいけど、何か良いアイデアはないかなー？

なつめ黒猫

Rinkerのボタンの配色を物販サイトのロゴ配色と同じにしてみると面白いんじゃないかな。

こまり猫

へぇー、それ面白そうだね。

ロゴにどんな色が使われているか調べてみよう。

今回は、RinkerでAmazon/楽天/Yahooのボタンのおすすめ配色とCSSの設定方法についてご紹介します。

理系王子

無料のWordPressテーマ「Cocoon」にも対応していますので、CSSをコピーしてご利用ください。

Rinkerとは？

RInkerとは、Amazonや楽天などの物販広告リンクを簡単でカッコよく作成できるWordPressのプラグインです。

なつめ黒猫

こんな感じで商品リンクが作れるよ。

Google AdSense マネタイズの教科書[完全版]

created by Rinker

なつめ黒猫

以前はカエレバを使っていたけど、WorePressを使っている人はこっちの方が楽チンかも。

理系王子

Rinkerプラグインは他のプラグインとは違って、下記ページからダウンロードしてのインストールが必要になります。

Rinkerベーシック - rinker - BOOTH

商品管理プラグインRinkerのベーシック版です。利用規約など詳細はこちらをご確認くださいサポートについてはにて開発支援をくださった方にのみ行っています。 yyi-rinker-1.4.10.zipはtarget="_blank"を残したバージョンです。

各サイトの配色

それでは、Rinkerで使用する物販サイトの配色について見てみましょう。

Amazonのロゴ配色

Amazonのロゴ配色はオレンジ色が特徴となっています。

オレンジ：#FF9900

なつめ黒猫

また、amazonなどの文字で使われる部分は、Squid Ink(#333E48)を使っているよ。

楽天市場のロゴ配色

楽天市場のロゴ配色はクリムゾンレッドが特徴となっています。

クリムゾンレッド：#BF0000

こまり猫

最近のロゴ変更でクリムゾンレッドのみのシンプルな配色になったね。

Yahooショッピングのロゴ配色

Yahooショッピングのロゴ配色はビビッドな赤色が特徴となっています。

赤色：#FF0027

こまり猫

原色に近いような真っ赤な赤色で注目を引く色なんだね。

RinkerのCSS設定

WordPressの編集画面から、外観→CSS編集へと進み、追加CSSにあるRinkerコード部分を変更します。

理系王子

すでにボタン配色をカスタマイズしている人は、ボタン配色部分を以下のコードで置き換えるようにしてください。

Rinkerデフォルト設定

Rinkerデフォルトの配色はこのようになっています。

こまり猫

オレンジ、赤色、青色とバランスの取れた配色になっているね。

Amazonと楽天がロゴに近い色になっているけど、Yahooだけ真逆の青になっているんだね。

なつめ黒猫

デフォルト配色から変更したい人の多くは、Yahooの配色を変更したいんじゃないかな？

広告配色に忠実な設定

上でご紹介した各サイトのロゴに忠実な配色にしてみました。

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {/*Amazon*/
    background: #FF9900;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    color: #3A4D66;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {/*楽天*/
    background: #BF0000;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {/*Yahoo*/
    background: #FF0027;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {/*Amazon*/
	background: #FF9900; }
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
	color: #3A4D66; }
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {/*楽天*/
	background: #BF0000; }
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {/*Yahoo*/
	background: #FF0027; }

こまり猫

３つのサイトとも暖色系のカラーだから若干似てきてしまうんだね。うーん、なんだか少し見辛い感じもするかな・・・

なつめ黒猫

Amazonは文字を白色にすると見やすいかもね。

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {/*Amazon*/
	background: #FF9900; }
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {/*楽天*/
	background: #BF0000; }
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {/*Yahoo*/
	background: #FF0027; }

やや色味を抑えたい方

ロゴ配色を使いたいけど、やや色味を抑えたい方向けの配色です。

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {/*Amazon*/
	background: #FFC266; }
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
	color: #3A4D66; }
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {/*楽天*/
	background: #D95656; }
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {/*Yahoo*/
	background: #FF4D4D; }

こまり猫

こっちの方が見やすい気がするね！

なつめ黒猫

配色を少し淡くしているから、見やすくなっているんだよ。