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

スポンサーリンク
この記事は 約9 分で読めます。

こまり猫
こまり猫

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

なつめ黒猫
なつめ黒猫

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

こまり猫
こまり猫

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

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

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

理系王子
理系王子

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

スポンサーリンク

Rinkerとは?

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

なつめ黒猫
なつめ黒猫

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

 

なつめ黒猫
なつめ黒猫

以前はカエレバを使っていたけど、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; }
こまり猫
こまり猫

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

なつめ黒猫
なつめ黒猫

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; }
こまり猫
こまり猫

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

なつめ黒猫
なつめ黒猫

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

スポンサーリンク

背景を白で二重枠線と文字をロゴ配色

ロゴを二重線にして、背景を白にしてみました。

こまり猫
こまり猫

Amazonが薄いけど、これもいい感じだね。白を基調としたサイトなら枠線と文字に色がついているくらいの方が格好いいね!

理系王子
理系王子

CSSの設定方法は別の機会にご説明します。

スポンサーリンク

まとめ

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

Rinkerをカスタマイズして、自分のサイトを格好良くカスタマイズしてみましょう!

Pocket

コメント