追記
表示幅によってデザインが崩れてしまうため@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 | |
| テーマエディター | |
| FTPソフト |
はじめてカスタマイズをする方におすすめなのは追加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: ""; } |
うまくいったかの確認
確認の手順
- カスタマイズコードを保存
- カスタマイズしたページを開く
- cntrl+F5を押す
いわゆるキャッシュ削除ですね。詳しい手順はこちらの記事で書いています。
Rinkerをカスタマイズ：まとめ
Rinkerは商品管理として、非常に使いやすいプラグインです。
自分のブログにマッチしたデザインにすると、売上が上がるかもしれませんね。
いつも参考にさせていただいています。
くまさん様とマクリン様のCSSコードをためしましたが、どうしてもモバイル表示の際に、画像とリンクが縦表示になりません。
解決法ありますでしょうか。
PORIPUを使用しているので、PORIPUのRINKER用のCSSを削除などしてみましたが、うまくいきません、、、
akira様
私の方で、本記事に掲載しているコードを適用したところ、問題なく縦表示になっております。
（PORIPU適用時でもです）
できましたら、縦表示できないページのURLをいただければ原因がわかるかもしれません。
ページを公開するのが難しいようでしたら、DMでも構いません。
よろしくお願いいたします( ˶ˆ꒳ˆ˵ )