WordPress Cocoon

【Cocoon】Amazon、楽天の商品リンクをカスタマイズする方法

Cocoonに実装されたAmazonと楽天の商品リンクが貼れるショートコード、めちゃめちゃ良いですね。価格まで表示されるようになってるし。

このブログでは今までカエレバを使ってまして、最近人気のあるRinkerにしようかな〜なんて思ってたけど簡単にキレイなリンクが貼れるのでCocoon最高すぎます。早速カスタマイズして僕はこんな感じにしました↓

ということで今回は商品リンクのボタンをカスタマイズする方法のご紹介ですが、Amazonと楽天どちらの商品リンクでもコードは共通です。オリジナリティを出したいという方はぜひ参考にしてみてくださいね。

ボタンのカスタマイズその1:色を変える

まずはボタンの色だけを変えてみます。CSSのコードはこちら↓

上から順にAmazon、楽天、Yahooショッピング用のコードになっています。「a:hover」はマウスを置いた時の指定です。ボタンの色は少し明るめにしてありますがお好みで変えてください。PCだとこんな感じです↓

マウスホバー時はデフォルトだと透過(opacity: 0.6;)するようになっていますが、「opacity: 1;」で透過させないようにして、背景色を濃くしています↓

「ボタンのカスタマイズその1〜4」のコードは「transition: .4s;」でアニメーションするようにしているので、マウスホバーの変化はフワッと時間をかけて変わるようになっています。

ちなみにこの記事内にある商品リンクは最初のものだけ本物で、あとは全部画像なのでマウスホバーしても反応しませんのであしからず。Nintendo Switch欲しいです。

ボタンのカスタマイズその2:フレームだけにする

今度は通常時にはフレームだけにして、マウスを乗せた時に背景色が付くようにしてみます。CSSのコードはこちら↓

上記コードでこうなります。上が通常時で下がマウスホバー時。こちらもフワッと切り替わります↓

ボタンのカスタマイズその3:色を統一してみる

ボタンを全部同じ色にしてもかっこいいと思います。コードはこちら↓

マウスホバー時は背景色がついて文字が白くなります。ミニマルなデザインのブログなんかにはピッタリじゃないでしょうか↓

ボタンのカスタマイズその4:影をつけてみる

次はボタンに影をつけたバージョンです。マウスホバーすると上にフワッと浮く感じにしています。コードはこちら↓

PCでの表示はこんな感じになります↓

スマホだとAmazon、楽天が上にくるのでボタン下に少し余白を空けたり、影の大きさを微妙に変えて細かい調整もしています。こちらはスマホ表示↓

ボタンのカスタマイズその5:立体的にしてみる

次は立体的な感じにしたボタンです。コードはこちら↓

border-bottom」で暗めのラインを入れて立体感を表現しています。マウスホバーするとポコっと押し込んだ感じになります↓

商品タイトルや価格、外枠もカスタマイズ

最後にボタン以外の色々な部分のデザインを変更するコードも紹介しておきます。けっこう自由にいじれるので、コメント部分を参考にお好きな部分だけ使ってみてください。

楽天のボックスは外枠を消して背景色をつけたり、アイコンや文字の色を変えたりなど、あえて色々やってみましたが、上記のコードだとこうなります↓

ちょっとやり過ぎ感ありますが(笑)
少しいじるだけでも雰囲気が変わるので、サイトに合わせて皆さんも色々カスタマイズしてみてくださいね。ではまた〜♪

コメント