ブログカスタマイズ大好きなぱる（@palulog）です。
この記事では「商品リンク管理プラグインRinker（リンカー）」のストーク風カスタマイズをご紹介します！
Rinkerとは？
カエレバのような「Amazon」や「楽天」「Yahooショッピング」の商品リンクが、ワードプレスの管理画面で作れちゃうプラグインです。開発者はやよいさん（@oyayoi19）。詳しくは公式サイトへ！
そのままでも十分可愛いデザインなのですが、ストークのようなポップなデザインにも合うようなカスタマイズにしてみました。
ストーク使いさんや、はっきりした色合いが好きな方に使っていただけたら嬉しいです♡
ストークに馴染むRinkerカスタマイズサンプル
こんな感じになります↓ストークのリッチボタンやシェアボタンのようなデザインですね。
PCで見るとこんな感じ。
カーソルを合わせるとぽこんと凹みます。
タブレットや幅の狭いブラウザで見るとこんな感じ。
スマホだとこんな感じ。
コピペOK！Rinkerカスタマイズコード
下記のコードを子テーマのスタイルシートなどにコピペしてお使いください。
※もし不具合等があればDMやリプでご連絡いただけたら嬉しいです！（ぱるのTwitterへ）
/*rinkerのカスタマイズ*/
div.yyi-rinker-contents {
border: solid 2px #dbdbdb;
box-shadow: none;
}
div.yyi-rinker-info {
width: 100%;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
box-shadow: none;
transition: 0.3s ease-in-out;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:before {
display: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
box-shadow: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
margin-bottom: 10px;
box-shadow: 0 4px 0 #c48204;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink:hover {
background: #c48204;
box-shadow: none;
transform: translate3d(0px, 4px, 1px);
-webkit-transform: translate3d(0px, 4px, 1px);
-moz-transform: translate3d(0px, 4px, 1px);
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
margin-bottom: 10px;
box-shadow: 0 4px 0 #a53a36;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink:hover {
background: #a53a36;
box-shadow: none;
transform: translate3d(0px, 4px, 1px);
-webkit-transform: translate3d(0px, 4px, 1px);
-moz-transform: translate3d(0px, 4px, 1px);
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
margin-bottom: 10px;
box-shadow: 0 4px 0 #4085b9;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink:hover {
background: #4085b9;
box-shadow: none;
transform: translate3d(0px, 4px, 1px);
-webkit-transform: translate3d(0px, 4px, 1px);
-moz-transform: translate3d(0px, 4px, 1px);
}
@media only screen and (max-width: 1165px){
div.yyi-rinker-contents div.yyi-rinker-image {
width: 150px;
min-width: 150px;
align-items: end;
}
div.yyi-rinker-contents div.yyi-rinker-title p {
line-height: 1.4;
}
div.yyi-rinker-contents div.yyi-rinker-title a {
font-size: 90%;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
-webkit-flex-flow: column;
flex-direction: column;
}
}
@media only screen and (max-width: 767px){
div.yyi-rinker-contents div.yyi-rinker-image {
width: 100px;
min-width: 100px;
}
}
おわりに
Rinkerはワードプレスの記事投稿画面から簡単に商品リンクが作れるプラグインです。
＞＞商品リンク管理プラグインRinker（リンカー）公式サイトはこちら
流行に乗り遅れてやっと使ってみましたが、すごく便利！まだ使ったことない方はこれを機に一度使ってみては？
また、この記事のカスタマイズは他のテーマでテストなどは行なっていません（当ブログの環境のみ）。
もし不具合等がありましたら、お手数ですがDMやリプでご連絡いただけたら嬉しいです！（ぱるのTwitterへ）