『Rinker(リンカー)』カスタマイズ！ブログに合うデザインに変更する方法

Haru

『Rinker』を初めて使ったときは快適過ぎて、感動して泣けました

こんにちはHaru(@yurupura_haru)です。

やよいさん(@oyayoi19)が開発した商品管理プラグイン『Rinker』を使うと、

ブログの作業時間が短縮できる
商品リンクが見やすくなる

と言うメリットがあります。

Rinkerの必要性については、アフィリエイト初心者はこれだけ押さえよう！3つのASPと＆プラグイン！にも書いた通りで”ブログを収益化したいブロガーさんにとっては最強のプラグイン”です。

Haru

でも…もっと自分のブログに馴染むデザインに変更したいんだよー！

今回は、そんな『Rinker』のデザインを”もっと自分のブログに馴染ませたい人の為のカスタマイズをご紹介します。

※2018年8月29日追記

2018年8月27日に「Rinkerベーシック版　ver1.3.1」がリリースされました。

以前、この記事のCSSを使ってRinkerをカスタマイズした
その後旧バージョンから「Rinkerベーシック版ver1.3.1」にアップデートをした
その結果、デザインが左に寄ってしまう症状が発生した

上記の条件に該当された方は、下記のコードを追記するとデザインが修正されます。

ご迷惑をお掛けいたしますが、ご対応の程よろしくお願いします。

Rinkerリリース履歴・公式HP

上記条件に該当した場合追加するコード

/*Rinkerアプデ追加コード*/
div.yyi-rinker-contents img.yyi-rinker-main-img {
width:100px;
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
width: calc(100% – 100px);
}
body div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
width: 100%;
}

読みたい目次をクリック

Rinker(リンカー)カスタマイズ前の注意点

わんこず

カスタマイズする前に２点確認を頼むぞ！

①このカスタムは、既にRinkerを導入済で、各リンクの設定が完了している前提を過程しています。

Rinker公式HPを見る

②今回のカスタマイズは、CSS部分に触れるため必ずバックアップを取ってからの作業をお願いします！

③テーマを使用している場合は『子テーマ』を編集してください！

Haru

カスタマイズは何が起きても自己責任で何卒よろしくお願いします。

ネイネイの喜怒哀楽｜日々の日常をつづった雑記ブログ

参考にしました

商品リンクRinker(リンカー)のCSSカスタマイズ【2選】

https://neyney-blog.com/blog/wordpress/rinker-customize/

こんにちは！ CSSカスタマイズを勉強中のネイネイ(@NEYNEYx2)です。先日導入した、WordPres…

RoughLog（ラフログ）

参考にしました

CSSコピペでOK！Rinker(リンカー)プラグインのデザインをカスタマイズ

https://rough-log.com/7308

WordPress向け商品管理プラグイン「Rinker」のデザインをカスタマイズしました。レスポンシブデザインですので、パソコン・タブレット・スマホに対応しています。CSSコピペでカスタマイズ完了しますので、どうぞお試しください。

Rinker(リンカー)のデザインを変更する方法

下記のCSSコードをCSS編集画面に追加するだけです！

RinkerカスタマイズのBefore/Afterを掲載します。

Before

PC・タブレット表示☟

スマホ表示☟

After

PC・タブレット表示☟

スマホ表示☟

基本コード

クリックしてコードを表示

/* ————————————- */
/* Rinker カスタマイズ */
/* ————————————- */
/* ——— 外枠 ——— */
div.yyi-rinker-contents {
/*border: solid 1px #dbdbdb;*/ /* １重線 */
border:double #CCC; /* ２重線 */
}/* — 商品リンクタイトル — */
div.yyi-rinker-contents div.yyi-rinker-title a {
color: #3296d2; /* 文字色 */
}/* ——- クレジット ——- */
div.yyi-rinker-contents div.yyi-rinker-detail .credit {
margin-bottom: 10px; /* 下スペース */
color: #999; /* 文字色 */
}div.yyi-rinker-contents div.yyi-rinker-detail .credit a{
color: #2581B3; /* リンクの文字色 */
}
/* ——- 商品価格 ——- */
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
color: #aaa; /* 文字色 */
}/* ——— ボタン基本スタイル ——— */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
border-radius: 2px; /* ボタン角の丸み */
text-align: center;
min-width:129px; /* ボタンの最小幅 */
font-size: 0.9em;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
border-radius: 5px; /* ボタン外枠角の丸み */
}/* ——— ボタン色 ——— */
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { /* Amazon */
background: #FEB396; /* 背景色 */
border: 2px solid #FEB396; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink { /* 楽天 */
background: #FFCCBF; /* 背景色 */
border: 2px solid #FFCCBF; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink { /* Yahoo */
background: #AED4D5; /* 背景色 */
border: 2px solid #AED4D5; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a{ /* Amazon */
color: #f4f4f4; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{ /* 楽天 */
color: #f4f4f4; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a{ /* Yahoo */
color: #f4f4f4; /* 文字色 */
}/* — マウスオーバー時のボタン色 — */
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
opacity: 1; /* 透明度(1.0=不透明 0.0=完全透明) */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover { /* Amazon */
background: #f6a306; /* 背景色 */
color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover { /* 楽天 */
background: #cf4944; /* 背景色 */
color: #fff; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover { /* Yahoo */
background: #51a7e8; /* 背景色 */
color: #fff; /* 文字色 */
}/* ——— 外部リンクマーク削除 ——— */
div.yyi-rinker-contents div.yyi-rinker-title a[target=”_blank”]::after{ /* 商品リンクタイトル */
content: none;
}div.yyi-rinker-contents div.yyi-rinker-detail .credit a[target=”_blank”]::after{ /* クレジット */
content: none;
}div.yyi-rinker-contents ul.yyi-rinker-links li a[target=”_blank”]::after{/* ボタン */
content: none;
}/* ——— レスポンシブ用 ——— */
@media screen and (max-width: 768px) { /* 画面幅768px以下の時 */
/* — 商品リンクタイトル — */
div.yyi-rinker-contents div.yyi-rinker-title a {
font-weight: bold; /* 太字 */
}
/* ——— ボタン基本スタイル ——— */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
font-size: 0.8em;
}
}

@media screen and (max-width: 480px) { /* 画面幅480px以下の時 */
/* — 商品リンクタイトル — */
div.yyi-rinker-contents div.yyi-rinker-title a {
font-weight: bold; /* 太字 */
font-size: 1.05em;
}
/* ——— ボタン基本スタイル ——— */
div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding-left: 3.5px !important; /* ボタン文字位置調整 */
font-size: 0.8em;
}
}
html,body{margin:0px;}
/*タブレット表示*/
@media screen and (max-width: 768px){
div.yyi-rinker-contents div.yyi-rinker-box {
display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image{
width: 100%;
}
div.yyi-rinker-contents div.yyi-rinker-info {
text-align: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
justify-content: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
width: 32.33%;
margin: 0.5%;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding: 0 0.5px;
}
}
/*スマホ表示*/
@media screen and (max-width: 480px) {
div.yyi-rinker-contents ul.yyi-rinker-links li {
width: 99%;
margin: 0.7% 0.5%;
}
}
/*Rinkerアプデ追加コード*/
div.yyi-rinker-contents img.yyi-rinker-main-img {
width:100px;
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
width: calc(100% – 100px);
}
body div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
width: 100%;
}

Haru

『JIN』ユーザーは＝外観▷CSS編集　から設定出来るよ

わんこず

『JIN』じゃない場合はCSS編集プラグインを使用すると安心だぞ

Rinker(リンカー)カスタマイズの詳細設定

あわせて下記の3点も変更する事が出来ます。順番に説明してゆきます。

リンクボタンの色と文字色を変更
リンクの表記変更(Amazonで探すの部分)
商品タイトルの変更

リンクボタンの色と文字色を変更

変更するコードの箇所

クリックしてコードを表示

/* ——— ボタン色 ——— */
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { /* Amazon */
background: #FEB396; /* 背景色 */
border: 2px solid #FEB396; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink { /* 楽天 */
background: #FFCCBF; /* 背景色 */
border: 2px solid #FFCCBF; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink { /* Yahoo */
background: #AED4D5; /* 背景色 */
border: 2px solid #AED4D5; /* 外枠 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a{ /* Amazon */
color: #f4f4f4; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a{ /* 楽天 */
color: #f4f4f4; /* 文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a{ /* Yahoo */
color: #f4f4f4; /* 文字色 */
}