ブログ

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

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

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

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

実際のリンク

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

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 {/*自由URL1*/
    background: #4DFF88;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 {/*自由URL2*/
    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;
    }
}




ボタン文字列の変更

ボタンの文字列の変更はプラグインのAddQuickTagで追加したエディタボタンで行っています。

追加した商品タグの後ろカッコ前に合わせてボタンを押すだけです。

自作テーマからの移行先を「SANGO」と悩んだ末にwordpressテーマ「JIN」を選んだ理由と機能紹介。元々このブログは古のhtmlとcssの知識を駆使して自作のテーマで作成していました。自分のこだわりで「タグベース管理のゆるふわな記事同士...

リンクテスト

カスタマイズ結果実物

新カスタマイズが更新されていたのでJIN用に対応しました。

あわせて読みたい
Rinkerカスタマイズ for wordpressテーマ JIN 2前回に引き続きBear face(@Bearface18)さんのRinkerカスタマイズ記事を元に丸p・・・参考に今回もRinkerのカ...

当サイトのRinkerデフォルトカスタマイズです。

あわせて読みたい
Rinker カスタマイズ for wordpressテーマ JIN notabo デフォルトこのブログでは広告貼り付け管理にRinkerというプラグインを利用しています。 いくつかRinkerカスタマイズ記事を書きましたが...