
みなさんは、商品リンク管理プラグインRinkerを使っていますか?
私はRinkerが出た当初にインストールはしました。
⇒【報告】Cocoonにカエレバ代替Rinkerプラグインを導入してみたよ!
ただ、最近はCocoon標準で同様のことが出来るようになったので、実はあまり使っていません。
Rinker(The SONIC)で機能追加されているのでまたRinkerを使いたくなってきています。
Rinkerはデザインがいい!

Rinkerは使い勝手もいいですが、何よりデザインが良いですよね。
Cocoon標準は、悪くは無いんですが、なんとなく硬いですよね。

だったら、CocoonデザインをRinkerに近づけたら良いんじゃない?
というわけでちょっとカスタマイズしたいと思います。
Rinkerのボタンの色を調べる:ColorPick Eyedropper

Rinkerのボタンの色をまずは調べます。
webページの特定場所の色を調べるにはChrome拡張の「ColorPick Eyedropper」が便利です。
ColorPick Eyedropperを使って調べたところ、それぞれのボタンの色は以下のとおりでした。
Rinker | Cocoon | |
---|---|---|
Amazon | F6A306 | F79901 |
楽天 | CF4944 | BF0000 |
Yahoo | 51A7E8 | E60033 |
文字で見るとあんまり変わらないですね(^_^;)
テーマの編集から子テーマのstyle.cssにコピペ
色がわかったら子テーマのstyle.cssに書き込みましょう。
/*--- ショップリンクここから----*/ .shoplinkamazon a { background: #F6A306; } .shoplinkrakuten a { background: #CF4944; } .shoplinkyahoo a { background: #51A7E8; position: relative; } /*--- ショップリンクここまで----*/
上記をコピペするだけです。
これだけです。
超簡単ですね。
すごい微妙な違いですが、以下のように変わります。

↓

どうですか?
すこし雰囲気が柔らかくなりましたよね◎
AMP対応OK!Cocoonならね!
これの何が良いかというと、Cocoon標準はAMP対応しているんです。
RinkerだとAMP対応していないのですが、CocoonのままならAMPについていけるんです!
これは地味に嬉しいですよね。
最新版のRinkerはAMP対応してるかも。
まとめ:Cocoonの商品リンクボタンを管理プラグインRinkerの色にしてみた
今回はCocoonの商品リンクボタンの色をRinkerの色にするカスタマイズでした。
すごく簡単なので是非試してみてください。
私は基本的にデフォルトで使いたい人なので後で戻してしまうかもしれませんが、しばらくはRinkerカラーでいってみたいと思います。
それでは今日はこの辺で! ふるのーと(@fullnote)でした!(*^^*)