18.12.12 ブログテーマPORIPUをアップデート

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を利用できますね。最後までご覧いただきありがとうございました。

ヨメ

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です