追記
表示幅によってデザインが崩れてしまうため@mediaを追加しました。(2018.9.6)
横幅が画像のように広くならない部分を修正いたしました。(2018.10.1)
2018.10.8

参考 商品リンク管理プラグインRinker(リンカー)の公式サイトおやこそだて
一気に「~で探す」を追加する方法が書かれている支援noteはこちら
参考
Rinkerの支援とカスタマイズ方法やよい|note

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

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

えへへ、シンプルにしてみたよ!
PCだとこんな感じ
Before
After

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

このデザイン、完全に自分のサイト用やんけ
カスタマイズしたところ
こんなところをカスタマイズ
- 枠線をsolidに
- ボタン幅を統一
- 「で探す」を追加(ビジュアルエディタより)
- 価格を削除(Rinker設定より)
- レスポンシブデザインに変更
スマホ(iPhone8)だとこんな感じ
Before
After

スマホでは画像が縦に並ぶ用に変更しました。
見たい場所へジャンプ
Rinkerのカスタマイズの前に
カスタマイズは自己責任で!
ワードプレステーマ

子テーマ

Rinkerの価格の表示・非表示

WordPress>設定>Rinker設定>価格を非表示にするにチェックを入れます。これはお好みです。表示していてもデザインは崩れません。
Rinkerの「で探す」を手動で追加
ビジュアルエディタ
1 2 3 4 |
<!-- 1. 普通のRinkerのコード --> [itemlink post_id="〇〇"] <!-- 2.「で探す」を追加する場合のコード --> [itemlink post_id="〇〇" alabel=Amazonで探す rlabel=楽天市場で探す ylabel=Yahoo!ショッピングで探す] |
普通のコードの後ろにこれをコピーして貼り付ければ「~で探す」を追加できます。
1 |
alabel=Amazonで探す rlabel=楽天市場で探す ylabel=Yahoo!ショッピングで探す |
コードを追記する3つの方法
追加CSSの手順
外観
カスタマイズ
追加CSS
子テーマの手順
外観
テーマの編集
FTPソフトの手順
FTPソフト起動
自サイトに接続
style.cssを開く
追加CSSの使い方はこちら
Rinkerのカスタマイズコード

な、長いです、、、CSS詳しい方、短くする方法教えてください。
普通のカスタマイズコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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%*/ }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
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%; }} |
自由リンクをご利用の方向け
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のコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
/*-------------------------------------- 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: ""; } |
うまくいったかの確認
確認の手順
保存ボタンを押す
ブラウザでキャッシュを削除して更新
Rinkerをカスタマイズ:まとめ
Rinkerは商品管理として、非常に使いやすいプラグインです。
自分のブログにマッチしたデザインにすると、売上が上がるかもしれませんね。