お家で「好き」を仕事にしたい!ぱるのブログ

ぱるろぐ

ブログカスタマイズ

【Rinkerカスタマイズ】コピペOK!ストークに合うポップなデザインにしてみた

投稿日:2018年7月28日 更新日:



ブログカスタマイズ大好きなぱる(@palulog)です。

この記事では「商品リンク管理プラグインRinker(リンカー)」のストーク風カスタマイズをご紹介します!

Rinkerとは?

カエレバのような「Amazon」や「楽天」「Yahooショッピング」の商品リンクが、ワードプレスの管理画面で作れちゃうプラグインです。開発者はやよいさん(@oyayoi19)。詳しくは公式サイトへ!

そのままでも十分可愛いデザインなのですが、ストークのようなポップなデザインにも合うようなカスタマイズにしてみました。

ストーク使いさんや、はっきりした色合いが好きな方に使っていただけたら嬉しいです♡

ストークに馴染むRinkerカスタマイズサンプル

こんな感じになります↓ストークのリッチボタンやシェアボタンのようなデザインですね。

PCで見るとこんな感じ。
Rinkerカスタマイズ(PC)

カーソルを合わせるとぽこんと凹みます。
Rinkerカスタマイズ表示サンプル

タブレットや幅の狭いブラウザで見るとこんな感じ。
Rinkerカスタマイズ(タブレット)

スマホだとこんな感じ。
Rinkerカスタマイズ(スマホ)

コピペ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へ

おすすめ関連記事

-ブログカスタマイズ

Copyright© ぱるろぐ , 2024 All Rights Reserved.