Rinkerカスタマイズ for wordpressテーマ JIN 1 tune 2

このブログでは広告貼り付け管理にRinkerというプラグインを利用しています。
このプラグイン自体もなかなかに神ってるんですが、プラグイン自体の紹介については今回割愛します。

あわせて読みたい

商品リンク管理プラグインRinker（リンカー）の公式サイト

Rinkerカスタマイズ for wordpressテーマ JINWordPress用広告プラグインのRinkerのカスタマイズをしています。元々SANGO用だったものをJIN向けに微調整しています。...

この記事の【PC時横2列、スマホ表示時にに全要素を縦配置】をさらにボタンのクリック率が上がりやすくなるようにそれぞれのサイズを拡大しています。コードを少し減らして見やすくしました。

実際のリンク

ソニー SONY 43V型 4K対応液晶テレビ KJ-43X8500F ブラビア KJ-43X8500F B (2018年モデル)

created by Rinker

ソニー(SONY)

ウィンドウサイズを変更して実際の動作を確認してください。

JINの子テーマダウンロード

テーマのカスタマイズを行う際にはJINの子テーマをダウンロードして、カスタマイズを適応してください。

あわせて読みたい

JIN【子テーマ】のダウンロード

カスタマイズ実装

以下のコードをダウンロードした子テーマのstyle.cssにコピペしてください。
枠線およびボタンの色は自分のお好みの色に変更してお使いください。


/* rinker ボタン高さを44pxに */
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width: 45%;/*幅（2列になるように）*/
    height:44px;
    line-height:44px;
    font-size: 1em;
    margin:10px;
    text-align:center;

}
div.yyi-rinker-contents ul.yyi-rinker-links li a{
    height:44px;
    line-height:44px;
    font-size: 1em;
}


/*-----ボタンの色-----*/
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {/*Amazon*/
    background: #FFC266;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    color: #3A4D66;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {/*楽天*/
    background: #D95656;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {/*Yahoo*/
    background: #FF4D4D;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 {/*自由URL１*/
    background: #4DFF88;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 {/*自由URL２*/
    background: #4D4DFF;
}

  
/* rinker サムネイル幅を230pxに */
div.yyi-rinker-contents div.yyi-rinker-image {
  width: 230px;
  min-width: 140px;
  padding: 0;
}
div.yyi-rinker-contents img.yyi-rinker-main-img {
   width: auto;
}
  
/* rinker 商品詳細幅を広げる */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    width: calc(100% - 30px);
    padding-left: 0;
    margin-left:auto;
    margin-right:auto;
    display:block;
}
  
  
/* スマホサイズのみ適用 */
@media screen and (max-width:1000px) {
    div.yyi-rinker-contents div.yyi-rinker-box{
      display:block;
    }
    /* 画像中央 */
    div.yyi-rinker-contents div.yyi-rinker-image{
      margin-left:auto;
      margin-right:auto;
    }
    /* ボタン縦 */
    div.yyi-rinker-contents ul.yyi-rinker-links li{
      text-align:center;
      width: 100%;
      margin:10px 0;
    }
}