WordPressプラグイン「Rinker（リンカー）」をシンプルにカスタマイズッ！
製作者は在宅フリーランスPG&ブロガーやよい(@oyayoi19)さんです。
Rinkerは、Amazon・楽天市場・YahooショッピングのアフィリエイトリンクをWordPressの管理画面から挿入できるようになる、という便利なプラグインなので、ぜひ使ってみてください。
詳しくは公式サイトからどうぞ。本記事も掲載されてます（｀・ω・´)ノ
メモ
- 問題があれば即刻、修正させていただきます。
- 勉強中の身なので「こっちの表現のほうがいいのでは？」という意見どしどし募集しております。
- 使用テーマはAFFINGER5(WING)で、WordPressのバージョンは5.3.2です。
完成形イメージ
とりあえずこんな感じを目指します。
PC
スマホ・タブレット
Rinkerボタンの文言カスタマイズッ！
「ボタンの文言を変えたい！」という場合のカスタマイズ。
Rinkerショートコードの末尾に「 alabel="Amazonで探す" rlabel="楽天市場で探す" ylabel="Yahooショッピングで探す"」を挿入でおｋ。
1 | [itemlink post_id="XXXXX" alabel="Amazonで探す" rlabel="楽天市場で探す" ylabel="Yahooショッピングで探す"] |
ちなみに、「最安値」の文言はNGなので注意が必要です。
ボタンの文字をちょっと小さくッ！
文字がデカすぎてボタンが横並びにならない場合は、文字の大きさをちょっと小さくする、とか？
1 2 3 4 | /* ボタン文字ちょっと小さく */ div.yyi-rinker-contents ul.yyi-rinker-links li a { font-size: 0.85em; } |
もしくは、Yahooショッピングのみ「で探す」を外す、「Y!ショッピングで探す」などに変更して、ボタン配置のバランスを見てあげてください。
一括文言書き換え＆クレジット削除もできます（有料）
「文言の一括書き換え」と「クレジット（created by Rinker）削除」もできますが、以下の2点が必要になります。
- Rinkerへの支援
- functions.phpの書き換え
functions.phpの書き換えを行う場合は、必ずバックアップを取りましょう。トラブルや不具合は自己責任で。
Rinkerの商品タイトルリンクの色変更カスタマイズッ！
デフォルトだと商品タイトルリンクの色が黒っぽかったので、リンクだとわかりやすくするため青っぽくしてます。
カラーコードはお好みでどうぞ。僕はタイトルを細くしたかったので、「font-weight: normal;」を入れてます。
ホバー時には下線が表示されるだけのシンプルなつくりにしてますよ。
1 2 3 4 5 6 7 8 | /* 商品リンクタイトル色変更 */ div.yyi-rinker-title a { color: #5383c3!important;/* 通常時 */ font-weight: normal;/* 太字にしない */ } div.yyi-rinker-title a:hover {/* ホバー時 */ text-decoration: underline!important; } |
サムネイル幅をカスタマイズッ！
1 2 3 4 5 6 7 | /* サムネイル幅を120pxに変更 */ div.yyi-rinker-contents div.yyi-rinker-image { width: 120px; min-width: 100px; padding: 0; margin: 0 20px 0 10px; } |
サムネ画像はもうちょっと大きくてもいいかも？
詳細箇所（メーカー名・価格・日付）を調整する
1 2 3 4 | /* 詳細箇所を調整 */ div.yyi-rinker-contents div.yyi-rinker-info { width: 100%; } |
各ボタンをカスタマイズッ！
ボタンの高さを変更する
1 2 3 4 5 6 7 8 9 10 11 | /* ボタンの高さを40pxに変更 */ div.yyi-rinker-contents ul.yyi-rinker-links li { font-size: .9em; letter-spacing: .1em; margin: 3px 7px 6px 0px; padding: 0; } div.yyi-rinker-contents ul.yyi-rinker-links li a { height: 40px; line-height: 40px; } |
ボタンのホバー時にちょっと色（透明度）を変化させる
1 2 3 4 5 6 7 8 | /* ホバー時に透明度下げる */ div.yyi-rinker-contents ul.yyi-rinker-links li a:hover { color: #fff!important; opacity: 1; } div.yyi-rinker-contents ul.yyi-rinker-links li:hover { opacity: 0.9; } |
各ボタンの色を変更する
カラーコードはそれぞれお好みでどうぞ。
1 2 3 4 5 6 7 8 9 10 | /* ボタン色変更 */ div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { /* Amazon */ background: #f8b862; } div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink { /* 楽天 */ background: #f0908d; } div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink { /* Yahoo */ background: #89c3eb; } |
ボタンのテキストを太字にしない
1 2 3 | div.yyi-rinker-contents ul.yyi-rinker-links li a { font-weight: normal; } |
外枠二重線カスタマイズッ！
ただの好みです。
1 2 3 4 | /* 外枠二重線 */ div.yyi-rinker-box { border:double #ccc; } |
スマホのボタン表示を中央に
1 2 3 4 5 | /* スマホボタン表示中央 */ @media (max-width: 420px) and (min-width: 321px) { body div.yyi-rinker-contents ul.yyi-rinker-links li a { padding: 0; }} |
余白調整カスタマイズッ！
1 2 3 4 5 | div.yyi-rinker-contents { margin: 0 0 1.5em;/* 外側上の余白を調整 */ border: none;/* 外側の枠線を消す */ box-shadow: none;/* 影を消す */ } |
クレジットの下線と色を改変する
1 2 3 4 | div.yyi-rinker-contents div.credit a { text-decoration: none;/* クレジットの下線を消す */ color: #999;/* リンク色変更 */ } |
まとめカスタマイズッ！
スマホ表示のコードも加えて、レスポンシブデザインにしました。テーマによってはズレがあるかもしれないので、適宜微調整をお願いします。
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 109 110 111 112 113 | /* RINKERカスタマイズッッッ！ */ /* 商品リンクタイトル色変更 */ div.yyi-rinker-title a { color: #5383c3!important;/* 通常時 */ font-weight: normal;/* 太字にしない */ } div.yyi-rinker-title a:hover {/* ホバー時 */ text-decoration: underline!important; } /* サムネイル幅を120pxに変更 */ div.yyi-rinker-contents div.yyi-rinker-image { width: 120px; min-width: 100px; padding: 0; margin: 0 20px 0 10px; } /* 詳細箇所を調整 */ div.yyi-rinker-contents div.yyi-rinker-info { width: 100%; } /* ボタンの高さを40pxに変更 */ div.yyi-rinker-contents ul.yyi-rinker-links li { font-size: .9em; letter-spacing: .1em; margin: 3px 7px 6px 0px; padding: 0; } div.yyi-rinker-contents ul.yyi-rinker-links li a { height: 40px; line-height: 40px; } /* ホバー時に透明度下げる */ div.yyi-rinker-contents ul.yyi-rinker-links li a:hover { color: #fff!important; opacity: 1; } div.yyi-rinker-contents ul.yyi-rinker-links li:hover { opacity: 0.9; } /* ボタン色変更 */ div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { /* Amazon */ background: #f8b862; } div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink { /* 楽天 */ background: #f0908d; } div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink { /* Yahoo */ background: #89c3eb; } div.yyi-rinker-contents ul.yyi-rinker-links li a { font-weight: normal; } /* 外枠二重線 */ div.yyi-rinker-box { border:double #ccc; } div.yyi-rinker-contents { margin: 0 0 1.5em;/* 外側上の余白を調整 */ border: none;/* 外側の枠線を消す */ box-shadow: none;/* 影を消す */ } /* クレジット部分の調整 */ div.yyi-rinker-contents div.credit a { text-decoration: none;/* クレジットの下線を消す */ color: #999;/* リンク色変更 */ } /* スマホ・タブレット表示 */ @media screen and (max-width:767px) { div.yyi-rinker-contents div.yyi-rinker-box{ display:block; } /* 画像とボタンを中央に */ div.yyi-rinker-contents div.yyi-rinker-image{ margin-left:auto; margin-right:auto } div.yyi-rinker-contents ul.yyi-rinker-links li{ text-align:center; width: 100%; margin: 6px 0px; } /* 文字とボタン幅を広げる */ div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info { width: 95%; margin: 0 auto; text-align: center; } /* 詳細箇所の微調整 */ div.yyi-rinker-contents div.yyi-rinker-detail { padding-left: 0; } div.yyi-rinker-contents div.yyi-rinker-detail div.price-box { font-size: .5em; } /* 価格表示を調整 */ div.yyi-rinker-contents div.yyi-rinker-detail div.price-box .price { font-size: 2em; margin: 5px; display: block; } /* サムネイル幅を230pxに変更 */ div.yyi-rinker-contents div.yyi-rinker-image { width: 230px; min-width: 140px; }} /*スマホ表示ボタン中央に*/ @media (max-width: 420px) and (min-width: 321px){ body div.yyi-rinker-contents ul.yyi-rinker-links li a { padding: 0; } } |
Rinkerクレジットの改変って大丈夫なの？
リンク先やショップのボタンと誤認する可能性がなければ、クレジットの改変（色や文字の大きさなど）はOKとのことです（製作者様に確認済み）。
デザインが変わらないんだけど？
デザインが変更されたか確認する場合は、キャッシュを削除してからチェックしてみましょう。
キーボードショートカット：「Command ＋ R」
Windows：「Ctrl ＋ R」or「F5」
Ctrl + F5が効かない場合
Chrome：「Command + Shift + R」 or 「Shiftを押しながら更新ボタンをクリック」
Safari：「Shiftを押しながら更新ボタンをクリック」
Firefox、Operaとか：「Shiftを押しながら更新ボタンをクリック」
IE：「Ctrl ＋ 更新ボタン」or「Ctrl ＋ F5」
まとめ
Amazon・楽天市場・Yahooショッピングのアフィリエイトリンクを簡単に挿入できる便利プラグイン、Rinker。
まだ使ってない人はぜひ使ってみてくださいな。詳細はRinker公式サイトからどうぞ。
Amazonアソシエイトの売上が月100万円を突破するまでにやった3つのこと、雑記ブログで月間収益10万円を稼ぐまでにやったこと＆コツとかの記事も書いてます。参考程度にどうぞ。
-
雑記ブログでも月間収益10万円｜稼ぐまでにやったこと＆コツとか