大人におすすめ漫画特集

RINKERプラグインのデザインを変えるCSSカスタマイズ

SANGOのリンカ-カスタマイズ

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

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

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

 

RINKER完成イメージ

RINKERのデザインを、SANGOでもともと調整されているカエレバのデザインに寄せるイメージです。

ヨメ

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

Rinkerサンプル

カエレバサンプル

RINKERのSANGO用CSSコード

RINKERのデザインのカスタマイズは、CSSを修正するだけでOKです。style.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; } @media screen and (max-width: 480px) { div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before { right: 20px; font-family: FontAwesome; content: "\f0da"; } } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before { padding-right: 90%; font-family: FontAwesome; content: "\f0da"; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink 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 12px; 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; } 

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

ヨメ

これでじゃんじゃん記事が書けるね!

コメントを残す