ブログ

Rinker カスタマイズ for wordpressテーマ JIN notabo デフォルト

このブログでは広告貼り付け管理にRinkerというプラグインを利用しています。

いくつかRinkerカスタマイズ記事を書きましたが、このブログの今のカスタマイズはどれなの?と思う人もいるかと思い、notaboの最新のRinkerカスタマイズページを作りました。

実際のリンク

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


/* 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;
    }
}

カスタマイズ切り分け方法

このサイトのように同じ要素に対しての切り分けを行っている場合、タグやクラスの重複が起こってしまいます。

その際にどのように切り分けを行っているかを説明します。

その際にPer page add to headというプラグインを利用しています。

Per page add to headは個別のページのHEADにそこでだけ使う要素(例えばcssであったりjavascript)を追加することが出来るプラグインです。

投稿画面にAdd to headという入力欄が出現するので、そのページに必要な物を追加することができます。

Per page add to headに関しては下のページでもう少し詳しく説明してあります。

あわせて読みたい
ページ毎にCSSやjavascriptを設定するwordpressプラグイン【Per page add to head】wordpressでカスタマイズをしているとついついstyle.cssや追加CSSの分量が増えていってしまいます。 特定のページで...

基本カスタマイズの適用

基本的な処理として、まずは

<div class="rcd">
[itemlink post_id="1765" alabel="Amazonで探す" rlabel="楽天市場で探す" ylabel="Yahooで探す"]
</div>

のようにDIVタグで囲いclassを設定します。例では当サイトの基本クラスとしてrcd(Rinker Customise Default)と設定しています。お好みの物をつけてください。

これを全てのRinkerのリンクに設定しました。(結構量があって大変です。)

基本のカスタマイズに関してはテーマのstyle.cssに記述してあります。

触るのが難しい場合は追加CSSに記述するほうが簡単です。

その上で、各カスタマイズのページではPer page add to headにカスタマイズのCSSを記入していきます。その際にRinkerのショートコードをDIVで囲います。

<div class="rc1">
[itemlink post_id="1765" alabel="Amazonで探す" rlabel="楽天市場で探す" ylabel="Yahooで探す"]
</div>

のようにrc1というクラスを設定し、Add to headという入力覧に

図のように記入していきます。Headタグの中に直接記述されるので、CSSの場合は<style>タグを忘れないようにしてください。

.rc1 div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {/*価格*/
    display: block;/*価格を縦並びにする*/
}

その際に.rc1 div.~のように指定したクラス名[スペース]をつけるとそのRinkerに対してのみカスタマイズ指定をすることができます。CSSのクラス指定をスペースで区切っていくとクラスの中にある要素のクラスと限定して指定することができます。

style.cssがどんどん肥大していくより特定のページでしか使わない物は特定のページでのみ追加していくほうが、表示速度も落ちなくてオススメです。

実際のリンク

カスタマイズ一覧

赤枠で囲まれた物が現在当サイトで適応している物です。

あわせて読みたい
Rinkerカスタマイズ for wordpressテーマ JINWordPress用広告プラグインのRinkerのカスタマイズをしています。 元々SANGO用だったものをJIN向けに微調整しています。...
Rinkerカスタマイズ for wordpressテーマ JIN 2前回に引き続きBear face(@Bearface18)さんのRinkerカスタマイズ記事を元に丸p・・・参考に今回もRinkerのカ...
最大2.5%ポイント還元
Amazonで買い物をするならお得なギフト券チャージを!
  • コンビニ・銀行(ATM・ネットバンキング)でのお支払いで簡単すぐチャージ