このブログでは広告貼り付け管理に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 {/*自由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;
}
}
カスタマイズ切り分け方法
このサイトのように同じ要素に対しての切り分けを行っている場合、タグやクラスの重複が起こってしまいます。
その際にどのように切り分けを行っているかを説明します。
その際にPer page add to headというプラグインを利用しています。
Per page add to headは個別のページのHEADにそこでだけ使う要素（例えばcssであったりjavascript）を追加することが出来るプラグインです。
投稿画面にAdd to headという入力欄が出現するので、そのページに必要な物を追加することができます。
Per page add to headに関しては下のページでもう少し詳しく説明してあります。
基本カスタマイズの適用
基本的な処理として、まずは
<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がどんどん肥大していくより特定のページでしか使わない物は特定のページでのみ追加していくほうが、表示速度も落ちなくてオススメです。
カスタマイズ一覧
のたぱ
