お得なAmazonタイムセールはこちらをクリック!!
本ページはプロモーションが含まれています

【カスタマイズ】Cocoonの商品リンクボタンを管理プラグインRinkerの色にしてみた

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

みなさんは、商品リンク管理プラグインRinkerを使っていますか?

私はRinkerが出た当初にインストールはしました。

【報告】Cocoonにカエレバ代替Rinkerプラグインを導入してみたよ!

ただ、最近はCocoon標準で同様のことが出来るようになったので、実はあまり使っていません。

Rinker(The SONIC)で機能追加されているのでまたRinkerを使いたくなってきています。

スポンサーリンク

Rinkerはデザインがいい!

Rinkerは使い勝手もいいですが、何よりデザインが良いですよね。

Cocoon標準は、悪くは無いんですが、なんとなく硬いですよね。

ぱんだ先輩
ぱんだ先輩

だったら、CocoonデザインをRinkerに近づけたら良いんじゃない?

というわけでちょっとカスタマイズしたいと思います。

Rinkerのボタンの色を調べる:ColorPick Eyedropper

Rinkerのボタンの色をまずは調べます。

webページの特定場所の色を調べるにはChrome拡張の「ColorPick Eyedropper」が便利です。

ColorPick Eyedropperを使って調べたところ、それぞれのボタンの色は以下のとおりでした。

 RinkerCocoon
AmazonF6A306F79901
楽天CF4944BF0000
Yahoo51A7E8E60033

文字で見るとあんまり変わらないですね(^_^;)

テーマの編集から子テーマの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)でした!(*^^*)

美味しい食事と音楽に囲まれて毎日笑顔を大切に過ごしています。
ブログもYoutubeものんびりとやっています。(*^^*)

fullnoteをフォローする
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
Wordpress
スポンサーリンク
ふるのーとさんのブログ
タイトルとURLをコピーしました