【SANGOカスタマイズ】プラグインRINKERのデザインをSANGO風にする

RINKERは、Amazon・楽天の商品管理が簡単にできるWordpressプラグインです。

本日は、RINKERをSANGO向けにデザイン調整するカスタマイズを紹介します。

今回は、CSSだけで完了する簡単カスタマイズ。

RINKERを詳しく知りたい方はこちら

Amazon楽天の商品リンクが２秒で作れる！無料の神プラグインRINKER

この記事のもくじ

RINKER完成イメージ

RINKERのデザインを、SANGOで用意されている「カエレバ」のデザインに寄せるイメージです。

ヨメ

これでSANGOにマッチしますね

Rinkerサンプル

Anker PowerCore 10000

created by Rinker

Anker

カエレバサンプル

Anker PowerCore 10000 (10000mAh 最小最軽量大容量モバイルバッテリー) iPhone&Android対応 *2018年5月時点 (ブラック)

posted with カエレバ

Anker

RINKERのSANGO用CSSコード

RINKERのデザインのカスタマイズは、CSSを修正するだけでOKです。style.cssに入力して使いましょう。

RINKER SANGO化CSS

css

/*--------------------------------------
  マサオカブログRINKER用CSS
--------------------------------------*/
div.yyi-rinker-contents {
    border: double 4px #dbdbdb;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    background: #ffb36b;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
    background: #ea7373;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    background: #ff8a65;
}
div.yyi-rinker-contents ul.yyi-rinker-links li{
    position:relative;  
}
div.yyi-rinker-contents ul.yyi-rinker-links li:before {
    position:absolute;
     right: 10px;
    font-family: FontAwesome;
    content: "\f0da";
     color:#fff;
    }
.fa5 div.yyi-rinker-contents ul.yyi-rinker-links li:before {
   font-family: "Font Awesome 5 free";
    font-weight:900;
   content: "\f105";
    }
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover{
    box-shadow: 0 12px 15px -5px rgba(0,0,0,.25);
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    height: 37px;
    line-height: 37px;
    font-size: 0.95em;
    padding-left: 10px;
    padding-right: 0;
    border-radius: 3px;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    display: inline-block;
    height: 37px;
    margin: 5px 10px 5px 0;
    padding: 0 25px 0 10px;
    border-radius: 3px;
    background: #73c1ea;
    box-shadow: 0 8px 15px -5px rgba(0,0,0,.25);
    font-size: .95em;
    font-weight: bold;
    vertical-align: middle;
    line-height: 37px;
    transition: .3s ease-in-out;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    width: 100px;
    min-width: 100px;
    padding:0;
}
.yyi-rinker-title {
    font-size: 1.05em;
}
div.yyi-rinker-contents div.yyi-rinker-title a {
    font-weight: bold;
    color: #555;
}

div.yyi-rinker-contents ul.yyi-rinker-links {
    margin: 0;
 }
div.yyi-rinker-info {
    padding-left: 15px;
}
div.yyi-rinker-contents img.yyi-rinker-main-img {
    width:100px;
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    width: calc(100% - 100px);
}

これでSANGOユーザーはデザインを気にすること無くRINKERを利用できますね。最後までご覧いただきありがとうございました。

ヨメ