ブログ運営

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

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

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

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

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

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

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

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

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

※2018年8月29日追記

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

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

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

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

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(リンカー)カスタマイズ前の注意点

わんこず
わんこず
カスタマイズする前に2点確認を頼むぞ!

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

Rinker公式HPを見る

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

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

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

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

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

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

Before

PC・タブレット表示☟

スマホ表示☟

After

PC・タブレット表示☟

スマホ表示☟

基本コード


/* ————————————- */
/* Rinker カスタマイズ */
/* ————————————- */
/* ——— 外枠 ——— */
div.yyi-rinker-contents {
/*border: solid 1px #dbdbdb;*/ /* 1重線 */
border:double #CCC; /* 2重線 */
}/* — 商品リンク タイトル — */
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
Haru
『JIN』ユーザーは=外観▷CSS編集 から設定出来るよ
わんこず
わんこず
『JIN』じゃない場合はCSS編集プラグインを使用すると安心だぞ

 

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

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

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

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

変更するコードの箇所


/* ——— ボタン色 ——— */
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; /* 文字色 */
}

上記のコードの黄色い部分を、変更したいカラーコードに変更してください。

背景色と文字色を指定する事が出来ます。

リンクの表記変更

追加コード


alabel=Amazonで探す rlabel=楽天市場で探す ylabel=Yahoo!ショッピングで探す] 

 

  1. 記事内にRinkerを使ってアイテムリンクを表示させます▷
  2. そのアイテムリンクのおしりの部分にalabel=Amazonで探す rlabel=楽天市場で探す ylabel=Yahoo!ショッピングで探す] と記入します。

『で探す』の部分は違う文言に変更する事が出来ます。

商品タイトルの変更

追加コード



title=▲▲▲▲] 

《例》

  1. 記事内にRinkerを使ってアイテムリンクを表示させます▷
  2. そのアイテムリンクのおしりの部分にtitle=▲▲▲▲] と記入します。

《例》の場合は 〜title=iPad芸人になりたいから買う♡] となります。

title= の後に文字を記入すると強制的にタイトルを上書きする事が出来ます。

Haru
Haru
もっと変更したい方は、やよいさん(@oyayoi19)のnoteをcheck♪

まとめ

お疲れ様でした!以上でRinkerのデザイン変更は終了です。

アイテムリンクのおしりに付けるコードを毎回追加するのは大変なので、プラグインの『Addquicktag』を使うと便利ですよ。

気が付いたらブログのデザインをカスタマイズする事が大好きになってきましたw

他にもカスタマイズのリクエストがあったらtwitterからご連絡よろしくお願いします!

わんこず
わんこず
最後まで読んでくれてありがとな!ブログの更新情報はtwitterで発信しているからフォロー(@yurupura_haru)してくれたら嬉しいぞ♪