今回は2018年6月6日に配布が再開されたWordPressプラグイン「Rinker（リンカー）」をシンプルにカスタマイズッッッ！していくよ。
製作者は在宅フリーランスPG&ブロガーやよい(@oyayoi19)さんです。
こちら、Amazon・楽天市場・YahooショッピングのアフィリエイトリンクをWordPressの管理画面から挿入できるようになる、ってな便利なプラグイン。
詳しくは公式サイトからどぞ。本記事も掲載されてます（｀・ω・´)ノ
#rinkerプラグイン
再配布開始しました！
利用規約の確認とダウンロードはこちらからhttps://t.co/IuqzDKcE6Q— やよい@在宅フリーランスPG&ブロガー (@oyayoi19) 2018年6月5日
※勉強中の身なので「こっちの表現のほうがいいのでは？」という意見どしどし募集しております。
※使用テーマはAFFINGER5(WING)でWordPressのバージョンは4.9.5です。
完成形イメージ
とりあえずこんな感じを目指します。
1.Rinkerボタンの文言カスタマイズッ！
ボタンの文言を変えたい場合のカスタマイズ。
Rinkerショートコードの末尾に「 alabel="Amazonで探す" rlabel="楽天市場で探す" ylabel="Yahooショッピングで探す"」を挿入でおk。
|
1 |
[itemlink post_id="12345" alabel="Amazonで探す" rlabel="楽天市場で探す" ylabel="Yahooショッピングで探す"] |
ちなみに「最安値」の文言はNGです。ご注意を。
参考【重要】カエレバ、ヨメレバの「最安値で探す」「最安値をチェック」機能についてボタンの文字ちょっと小さくしてます
文字がデカすぎてボタンが横並びにならなかったので、文字の大きさをちょっと小さくしてます。
|
1 2 3 4 |
/* ボタン文字ちょっと小さく */ div.yyi-rinker-contents ul.yyi-rinker-links li a { font-size: 0.85em; } |
2.Rinkerの商品タイトルリンクの色変更カスタマイズッ！
デフォルトだと商品タイトルリンクの色が黒っぽかったので、リンクだとわかりやすくするため青っぽくしてます。
|
1 2 3 4 |
/* 商品リンクタイトル色変更 */ div.yyi-rinker-title a { color: #4682b4!important; } |
3.外枠二重線カスタマイズッ！
ただの好みです。
|
1 2 3 4 |
/* 外枠二重線 */ div.yyi-rinker-box { border:double #CCC; } |
まとめカスタマイズッ！
2018/06/06/13:15追記：かるくレスポンシブ的な感じにしました。テーマによってはズレがあるかもしれないので、微調整をお願いします。
|
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 |
/* RINKERカスタマイズッ！ */ /* 外枠二重線 */ div.yyi-rinker-box { border:double #CCC; } /* 商品リンクタイトル色変更 */ div.yyi-rinker-title a { color: #4682b4!important; } /* クレジット色変更＆位置調整 */ div.yyi-rinker-contents div.credit { color: #000; margin-bottom: 8px; margin-left: -10px; } /* 値段箇所色変更＆位置調整 */ div.yyi-rinker-detail .price-box { color: #000!important; margin-left: -10px; } /* ブランド色変更＆位置調整 */ div.yyi-rinker-contents div.brand { color: #000; margin-left: -10px; } @media screen and (max-width: 680px) { /* 商品リンクタイトル太字 */ div.yyi-rinker-title a { font-size: 0.85em; line-height: 0.5em; font-weight: bold; } /* 商品リンクタイトル行間調整 */ div.yyi-rinker-title p { line-height: 120%; } /* ボタン文字小さく */ div.yyi-rinker-contents ul.yyi-rinker-links li a{ font-size: 0.7em; } } |
Rinkerクレジットの改変って大丈夫なの？
リンク先やショップのボタンと誤認する可能性がなければ、クレジットの改変（色や文字の大きさなど）はOKとのことです（製作者様に確認済み）。
無料でクレジット削除プラグインも配布されておりますが、Rinkerを応援するためにもクレジットは表記して使っていきましょう＼＼\٩( 'ω' )و //／／
おまけ：値段消すカスタマイズッ！
|
1 2 3 4 |
/* 値段消す */ div.yyi-rinker-detail .price-box { display: none; } |
追記：わざわざCSSで非表示にしなくてもショートコードで値段の非表示が可能でした。確認不足、申し訳ございません。
|
1 |
price="-" |
↑をショートコードに挿入でOKです。
|
1 |
[itemlink post_id="12345" price="-"] |
みたいな感じ！
関連Rinker（リンカー）ショートコード属性まとめ
Amazon・楽天市場・Yahooショッピングのアフィリエイトリンクを簡単に挿入できる便利プラグイン、Rinker。
まだ使ってない人はぜひ使ってみてくださいな。詳細はRinker公式サイトからどうぞ。
Amazonアソシエイトの売上が月100万円を突破するまでにやった3つのこと、雑記ブログで月間収益10万円を稼ぐまでにやったこと＆コツとかの記事も書いてます。参考程度にどうぞ。
-
-
雑記ブログでも月間収益10万円。稼ぐまでにやったこと＆コツとか
ブログ収益がついに10万円を突破しました。月に10万円を稼ぐブログなんてごまんとあるとは思いますが、一つの節目として記事にしておこうかと。 僕は右も左も分からないゼロ地点からスタートし、約1年でここま ...
お願い
需要あるかはさておきRINKERカスタマイズ
/* 外枠二重線 */
div.yyi-rinker-box {
border:double #CCC;
}
/* 値段消す */
div.yyi-rinker-detail .price-box {
display: none;
}
/* 商品リンク色変更 */
div.yyi-rinker-title a{
color: #4682b4!important;
}自己責任でどぞ #rinkerプラグイン pic.twitter.com/st3ksDwPPW
— あめのは (@ameyohure) 2018年6月6日
サクッとRINKERカエレバ風カスタマイズ＼＼\\٩( 'ω' )و //／／ #rinkerプラグイン pic.twitter.com/QCe6C5O2GH
— あめのは (@ameyohure) 2018年6月6日