Rinkerのカスタマイズ！デザインをシンプルにしてみる

目次へGO

追記

表示幅によってデザインが崩れてしまうため@mediaを追加しました。（2018.9.6）

横幅が画像のように広くならない部分を修正いたしました。（2018.10.1）

2018.10.8

マクリンさん（@Maku_ring）verを追加

更に使いやすくしています。
マクリンさんのブログはこちら。

コードへ飛ぶ

参考商品リンク管理プラグインRinker（リンカー）の公式サイトおやこそだて

一気に「～で探す」を追加する方法が書かれている支援noteはこちら

参考 Rinkerの支援とカスタマイズ方法やよい｜note

Rinkerは2018年6月6日に配布が開始された、最強の商品管理プラグインです。ぼくは5月28日からWordPressをはじめたので、ちょっとだけ親近感があります。

いや、まったく関係ないやろ。

えへへ、シンプルにしてみたよ！

PCだとこんな感じ

Before

rinker-カスタマイズ前

After

rinker-カスタマイズ後

細かいところを変更して、ボタンを2列にしてみました！

このデザイン、完全に自分のサイト用やんけ

カスタマイズしたところ

こんなところをカスタマイズ

枠線をsolidに
ボタン幅を統一
「で探す」を追加（ビジュアルエディタより）
価格を削除（Rinker設定より）
レスポンシブデザインに変更

スマホ（iPhone8）だとこんな感じ

Before

rinker-カスタマイズ前スマホ

After

rinker-カスタマイズ後スマホ

スマホでは画像が縦に並ぶ用に変更しました。

ジャンプマップ

Rinkerのカスタマイズの前に

カスタマイズは自己責任でやろう！

「自己責任」の意味がわからない方はこちら

カスタマイズは自己責任。ぼくはこんな風に思っています。

Rinkerの価格の表示・非表示

WordPress＞設定＞Rinker設定＞価格を非表示にするにチェックを入れます。これはお好みです。表示していてもデザインは崩れません。

Rinkerの「で探す」を手動で追加

ビジュアルエディタ

<!-- 1. 普通のRinkerのコード -->
[itemlink post_id="〇〇"]
<!-- 2.「で探す」を追加する場合のコード -->
[itemlink post_id="〇〇" alabel=Amazonで探す rlabel=楽天市場で探す ylabel=Yahoo!ショッピングで探す]

[itemlink post_id="〇〇"]

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

普通のコードの後ろにこれをコピーして貼り付ければ「～で探す」を追加できます。

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

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

コードを追記する3つの方法

追加方法	難しさ
追加CSS
テーマエディター
FTPソフト

はじめてカスタマイズをする方におすすめなのは追加CSSです。

ブログのカスタマイズを加速させる「追加CSS」の使い方

Rinkerのカスタマイズコード

な、長いです、、、CSS詳しい方、短くする方法教えてください。

普通のカスタマイズコード

コメントありのコード

/*--------------------------------------
Rinkerのデザイン変更
--------------------------------------*/
/*-----全体-----*/
div.yyi-rinker-contents {/*内容（全体）*/
    border: solid 1px #42424230;/*枠線の種類・幅・色*/
    border-radius: 10px;/*枠線の丸み（上　右）*/
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);/*影*/
}
div.yyi-rinker-contents div.yyi-rinker-box {/*内容（中身）*/
    padding: 1em 0;/*余白（中）*/
}
/*-----左側（画像）-----*/
div.yyi-rinker-contents div.yyi-rinker-image {/*画像*/
    margin-left: 3%;/*左の余白*/
    width: 30%;/*画像の幅*/
}
/*-----右側（商品名やボタンなど）-----*/
div.yyi-rinker-info {/*右側全体*/
    padding: 0 3%;/*左右の余白*/
    width: 100%;/*右側全体の幅*/
}
.yyi-rinker-title {/*商品名*/
    font-size: .9em;/*文字の大きさ*/
}
div.yyi-rinker-contents div.yyi-rinker-title p {/*タイトル*/
    margin: 0;/*タイトルの余白*/
}
div.yyi-rinker-contents div.yyi-rinker-title a {/*タイトル*/
    color: #42424290;/*タイトルの文字色*/
}
div.yyi-rinker-contents div.yyi-rinker-detail {/*販売者と価格*/
    font-size: .8em;/*文字の大きさ*/
    color: #42424280;/*文字の色*/
    padding-left: 0;/*左側の余白*/
    margin-top: 0;/*上の余白*/
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {/*価格*/
    margin: .5em 0;/*上下の余白*/
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {/*価格の文字*/
    letter-spacing: 0.1em;/*文字の間隔*/
    font-size: 1.2em;/*文字の大きさ*/
    margin-right: .5em;/*右側の余白*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {/*すべてのボタン*/
    width: 45%;/*幅（2列になるように）*/
    padding: 0 .7em;/*左右の余白（ボタン内）*/
    margin: .5em 1.5em .4em 0;/*左側の余白だけ0（ボタン外）*/
    box-shadow: 0 2px 3px rgba(0,0,0,.2);/*影*/
    font-size: .8em;/*文字の大きさ*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
    display: none;/*マーク削除*/
}
/*-----ボタンの色-----*/
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:hover {
    box-shadow: 0 3px 14px rgba(0, 0, 0, .25);/*優しく浮き上がる影*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover {
    box-shadow: none;/*手前のマウスホバー*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
    opacity: 1;/*ホバー時に薄くなるのをオフ*/
}
@media screen and (max-width: 500px){/*スマホ表示用（ブレイクポイント500px）*/
/*-----全体-----*/
div.yyi-rinker-contents div.yyi-rinker-box {
    display: block;/*縦表示になるように*/
}
/*-----画像ー----*/
div.yyi-rinker-contents div.yyi-rinker-image {
    width: auto;/*画像を中央表示*/
}
/*-----商品名やボタンなど-----*/
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {/*全体*/
    padding: 0;/*余白削除*/
    margin: auto;/*中央揃え*/
    width: 87%;/*横幅*/
    text-align: center;/*商品名やボタンを中央表示*/
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {/*価格*/
    display: block;/*価格を縦並びにする*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {/*ボタン*/
    width: 100%;/*横幅いっぱい*/
    margin: .5em 0;/*上下の余白　左右の余白削除*/
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {/*ボタンの文字*/
    padding: 0;/*文字の余計な余白を削除*/
}}
@media screen and (min-width: 501px) and (max-width: 1239px){/*スマホとPCの中間くらい（ブレイクポイント501～1239px）*/
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width:80%;/*横幅を80％*/
}}

100

101

102

103

104

105

106

107

108

/*--------------------------------------

Rinkerのデザイン変更

--------------------------------------*/

/*-----全体-----*/

div.yyi-rinker-contents {/*内容（全体）*/

border: solid 1px #42424230;/*枠線の種類・幅・色*/

border-radius: 10px;/*枠線の丸み（上　右）*/

box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);/*影*/

}

div.yyi-rinker-contents div.yyi-rinker-box {/*内容（中身）*/

padding: 1em 0;/*余白（中）*/

}

/*-----左側（画像）-----*/

div.yyi-rinker-contents div.yyi-rinker-image {/*画像*/

margin-left: 3%;/*左の余白*/

width: 30%;/*画像の幅*/

}

/*-----右側（商品名やボタンなど）-----*/

div.yyi-rinker-info {/*右側全体*/

padding: 0 3%;/*左右の余白*/

width: 100%;/*右側全体の幅*/

}

.yyi-rinker-title {/*商品名*/

font-size: .9em;/*文字の大きさ*/

}

div.yyi-rinker-contents div.yyi-rinker-title p {/*タイトル*/

margin: 0;/*タイトルの余白*/

}

div.yyi-rinker-contents div.yyi-rinker-title a {/*タイトル*/

color: #42424290;/*タイトルの文字色*/

}

div.yyi-rinker-contents div.yyi-rinker-detail {/*販売者と価格*/

font-size: .8em;/*文字の大きさ*/

color: #42424280;/*文字の色*/

padding-left: 0;/*左側の余白*/

margin-top: 0;/*上の余白*/

}

div.yyi-rinker-contents div.yyi-rinker-detail .price-box {/*価格*/

margin: .5em 0;/*上下の余白*/

}

div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {/*価格の文字*/

letter-spacing: 0.1em;/*文字の間隔*/

font-size: 1.2em;/*文字の大きさ*/

margin-right: .5em;/*右側の余白*/

}

div.yyi-rinker-contents ul.yyi-rinker-links li {/*すべてのボタン*/

width: 45%;/*幅（2列になるように）*/

padding: 0 .7em;/*左右の余白（ボタン内）*/

margin: .5em 1.5em .4em 0;/*左側の余白だけ0（ボタン外）*/

box-shadow: 0 2px 3px rgba(0,0,0,.2);/*影*/

font-size: .8em;/*文字の大きさ*/

}

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {

display: none;/*マーク削除*/

}

/*-----ボタンの色-----*/

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:hover {

box-shadow: 0 3px 14px rgba(0, 0, 0, .25);/*優しく浮き上がる影*/

}

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover {

box-shadow: none;/*手前のマウスホバー*/

}

div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {

opacity: 1;/*ホバー時に薄くなるのをオフ*/

}

@media screen and (max-width: 500px){/*スマホ表示用（ブレイクポイント500px）*/

/*-----全体-----*/

div.yyi-rinker-contents div.yyi-rinker-box {

display: block;/*縦表示になるように*/

}

/*-----画像ー----*/

div.yyi-rinker-contents div.yyi-rinker-image {

width: auto;/*画像を中央表示*/

}

/*-----商品名やボタンなど-----*/

div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {/*全体*/

padding: 0;/*余白削除*/

margin: auto;/*中央揃え*/

width: 87%;/*横幅*/

text-align: center;/*商品名やボタンを中央表示*/

}

div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {/*価格*/

display: block;/*価格を縦並びにする*/

}

div.yyi-rinker-contents ul.yyi-rinker-links li {/*ボタン*/

width: 100%;/*横幅いっぱい*/

margin: .5em 0;/*上下の余白　左右の余白削除*/

}

body div.yyi-rinker-contents ul.yyi-rinker-links li a {/*ボタンの文字*/

padding: 0;/*文字の余計な余白を削除*/

}}

@media screen and (min-width: 501px) and (max-width: 1239px){/*スマホとPCの中間くらい（ブレイクポイント501～1239px）*/

div.yyi-rinker-contents ul.yyi-rinker-links li{

width:80%;/*横幅を80％*/

}}

コメントなしのコード

div.yyi-rinker-contents {
    border: solid 1px #42424230;
    border-radius: 10px;
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);
}
div.yyi-rinker-contents div.yyi-rinker-box {
    padding: 1em 0;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    margin-left: 3%;
    width: 30%;
}
div.yyi-rinker-info {
    padding: 0 3%;
    width: 100%;
}
.yyi-rinker-title {
    font-size: .9em;
}
div.yyi-rinker-contents div.yyi-rinker-title p {
    margin: 0;
}
div.yyi-rinker-contents div.yyi-rinker-title a {
    color: #42424290;
}
div.yyi-rinker-contents div.yyi-rinker-detail {
    font-size: .8em;
    color: #42424280;
    padding-left: 0;
    margin-top: 0;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
    margin: .5em 0;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    letter-spacing: 0.1em;
    font-size: 1.2em;
    margin-right: .5em;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    width: 45%;
    padding: 0 .7em;
    margin: .5em 1.5em .4em 0;
    box-shadow: 0 2px 3px rgba(0,0,0,.2);
    font-size: .8em;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
    display: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    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 {
    background: #FF4D4D;
}
div.yyi-rinker-contents ul.yyi-rinker-links li:hover {
    box-shadow: 0 3px 14px rgba(0, 0, 0, .25);
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:hover, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:hover {
    box-shadow: none;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {
    opacity: 1;
}
@media screen and (max-width: 500px){
div.yyi-rinker-contents div.yyi-rinker-box {
    display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    width: auto;
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    padding: 0;
    margin: auto;
    width: 87%;
    text-align: center;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    display: block;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
    width: 100%;
    margin: .5em 0;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding: 0;
}}
@media screen and (min-width: 501px) and (max-width: 1239px){
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width:80%;
}}

div.yyi-rinker-contents {

border: solid 1px #42424230;

border-radius: 10px;

box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);

}

div.yyi-rinker-contents div.yyi-rinker-box {

padding: 1em 0;

}

div.yyi-rinker-contents div.yyi-rinker-image {

margin-left: 3%;

width: 30%;

}

div.yyi-rinker-info {

padding: 0 3%;

width: 100%;

}

.yyi-rinker-title {

font-size: .9em;

}

div.yyi-rinker-contents div.yyi-rinker-title p {

margin: 0;

}

div.yyi-rinker-contents div.yyi-rinker-title a {

color: #42424290;

}

div.yyi-rinker-contents div.yyi-rinker-detail {

font-size: .8em;

color: #42424280;

padding-left: 0;

margin-top: 0;

}

div.yyi-rinker-contents div.yyi-rinker-detail .price-box {

margin: .5em 0;

}

div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {

letter-spacing: 0.1em;

font-size: 1.2em;

margin-right: .5em;

}

div.yyi-rinker-contents ul.yyi-rinker-links li {

width: 45%;

padding: 0 .7em;

margin: .5em 1.5em .4em 0;

box-shadow: 0 2px 3px rgba(0,0,0,.2);

font-size: .8em;

}

display: none;

}

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {

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 {

background: #FF4D4D;

}

div.yyi-rinker-contents ul.yyi-rinker-links li:hover {

box-shadow: 0 3px 14px rgba(0, 0, 0, .25);

}

box-shadow: none;

}

div.yyi-rinker-contents ul.yyi-rinker-links li a:hover {

opacity: 1;

}

@media screen and (max-width: 500px){

div.yyi-rinker-contents div.yyi-rinker-box {

display: block;

}

div.yyi-rinker-contents div.yyi-rinker-image {

width: auto;

}

div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {

padding: 0;

margin: auto;

width: 87%;

text-align: center;

}

div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {

display: block;

}

div.yyi-rinker-contents ul.yyi-rinker-links li {

width: 100%;

margin: .5em 0;

}

body div.yyi-rinker-contents ul.yyi-rinker-links li a {

padding: 0;

}}

@media screen and (min-width: 501px) and (max-width: 1239px){

div.yyi-rinker-contents ul.yyi-rinker-links li{

width:80%;

}}

自由リンクをご利用の方向け

div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1｛background:好きな色コード;｝

1	div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1｛background:好きな色コード;｝

他のテーマの方へ

このカスタマイズはSANGOのテーマでしかテストしておりません。他のテーマで使用される際は横幅％の部分を調整お願いいたします。

JIN・アフィンガーの方はこちら

JINユーザーさん

notaboさんがぼくのコードをJINユーザー用に修正してくれました。

こちらを参考に

参考 Rinkerカスタマイズ for wordpressテーマ JINnotabo

ぼくの姉妹サイトでもつくってみました

参考【JINをカスタマイズしてみた】RinkerのデザインをJINっぽくしてみたfor JIN

アフィンガーユーザーさん

HuuubさんがRinkerのカスタマイズを書いてくれています。

こちらを参考に

参考 Rinker × AFFINGER｜物販リンクのクリック率を上げるCSSカスタマイズ！monogrow

マクリンさんverのコード

CSSコード

/*--------------------------------------
  Rinkerカスタマイズ　マクリンさんver
--------------------------------------*/
/*Rinker変更*/
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    background: #51a7e8;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding-left: 0px;
}
@media screen and (min-width: 375px) and (max-width:490px){/*スマホ表示用（ブレイクポイント500px）*/
/*-----全体-----*/
div.yyi-rinker-contents div.yyi-rinker-box {
    display: block;/*縦表示になるように*/
}
/*-----商品名やボタンなど-----*/
div.yyi-rinker-info {/*全体*/
    padding: 0;/*余白削除*/
    margin: auto;/*中央揃え*/
    width: 87%;/*横幅*/
    text-align: center;/*商品名やボタンを中央表示*/
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {/*価格*/
    display: block;/*価格を縦並びにする*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li {/*ボタン*/
    width: 100%;/*横幅いっぱい*/
    margin: .5em 0;/*上下の余白　左右の余白削除*/
    line-height:44px;
    height: 44px;
    font-size: 0.95em;
    padding: 0 14px 0 10px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {/*ボタンの文字*/
    padding: 0;/*文字の余計な余白を削除*/
    height:44px;
    line-height:44px;
    font-size: 0.95em;
}
/* rinker 商品詳細幅を広げる */
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    width: calc(100% - 20px);
    display:block;
}
/* rinker サムネイル幅を230pxに */
div.yyi-rinker-contents div.yyi-rinker-image {
    width: 230px;
    min-width: 140px;
    padding: 0;
    margin-left:auto;
    margin-right:auto
}
div.yyi-rinker-contents img.yyi-rinker-main-img {
    width: auto;
}}
/*Rinker自由ボタンのマウスオーバー時*/
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a:hover {
    box-shadow: 0 12px 15px -5px rgba(0,0,0,.25);
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before, div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before {
    content: "";
}