Rinkerのボタンを格好良くカスタマイズしたいけど、何か良いアイデアはないかなー?
Rinkerのボタンの配色を物販サイトのロゴ配色と同じにしてみると面白いんじゃないかな。
へぇー、それ面白そうだね。
ロゴにどんな色が使われているか調べてみよう。
今回は、RinkerでAmazon/楽天/Yahooのボタンのおすすめ配色とCSSの設定方法についてご紹介します。
無料のWordPressテーマ「Cocoon」にも対応していますので、CSSをコピーしてご利用ください。
Rinkerとは?
RInkerとは、Amazonや楽天などの物販広告リンクを簡単でカッコよく作成できるWordPressのプラグインです。
こんな感じで商品リンクが作れるよ。
以前はカエレバを使っていたけど、WorePressを使っている人はこっちの方が楽チンかも。
Rinkerプラグインは他のプラグインとは違って、下記ページからダウンロードしてのインストールが必要になります。
各サイトの配色
それでは、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をカスタマイズして、自分のサイトを格好良くカスタマイズしてみましょう!
コメント