Rinkerの導入とカスタマイズ
Amazonアソシエイトのリンク生成に移転前のサイトではamazlet it!を使用していましたが、2023/08/11時点で使用できなくなっているようです。Amazon提供のアソシエイト・ツールバーというものもあるようですが、使い勝手はさほど良くない様子。調べてみるとRinkerというプラグインが好評みたいなので導入してみることにしました。
目次
準備
【2023年最新】Rinkerの使い方・カスタマイズ方法(マイクロコピー追加等)を参考に実施。RinkerはWordPressのプラグイン検索では見つからないため、BTOOTHからダウンロードする必要がありました。またRinkerはデフォルトで3つの物販広告ボタンが設置されるらしいので、せっかくなので記事を参考に “楽天アフィリエイト” と “Yahoo!ショッピング(バリューコマース)” の登録を済ませました。バリューコマースは国内ASPの中でも信頼性が高いようで、審査も厳しいと言われています。そのため記事を20本以上投稿してから申請しました。承認後は個人ページから広告コードを取得しますが、Yahoo!ショッピングの中の “自動提携機能用プロモーションを選ぶ” ということに気付かず少しハマりました。その他は申請も設定も簡単でした。
プライバシーポリシーの記載
アフィリエイト関係で所有するブログやサイトにプライバシーポリシーの明記が必要だと明言しているサービスには以下があります。このうちAmazonアソシエイトを利用しており、将来的にはGoogleアナリティクスの利用も考えているためAboutに枠を設けておきました。
- Google Adsense
- Googleアナリティクス
- Amazonアソシエイト
2023/08/14現在、楽天アフィリエイトやASP(バリューコマース)は利用者である旨をサイトに記載する必要はないようです。ただし利用規約は変わることがあるので定期的に確認するようにしたいと思います。
Rinkerのデザインを変更する
Rinkerの初期デザインはポップ過ぎるのでカスタマイズすることにしました。移転前のサイトで使用していた以下のようなデザインを目指します。必要最低限の情報が綺麗にまとまっていて気に入ってました。
デフォルトでは以下のようなデザインでした。枠やボタンに影があったり、そもそものデザインが大きすぎるなど修正したい点が多くあります。また書籍の作者情報が入らないのは結構な痛手でした。これはcss修正によるデザイン変更では解決できないため、現時点での対応は見送ることにします。
最終的に以下のようになりました。制作中の自作テーマに合わせてデザインしています。
Rinkerは広く使われているので、Googleで「Rinker カスタマイズ」で検索すると結構な数の参考サイトがヒットしました。修正に際して【コピペOK】Rinkerカスタマイズ！シンプルでやさしいデザインを目指そうや【ブログカスタマイズ】プラグインRinkerのデザインをシンプルにを参考にさせていただきました。いずれもカスタムcssに追記していけばOKです。
ボタン色と文字色の変更
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
background: #333333;/* Amazonリンクのボタンの色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
color: #C69F73;/* Amazonリンクの文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink {
background: #333333;/* 楽天リンクのボタンの色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a {
color: #C69F73;/* 楽天リンクの文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
background: #333333;/* Yahooショッピングのボタンの色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a {
color: #C69F73;/* Yahooショッピングの文字色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 {
background: #333333;/* 自由リンクのボタンの色 */
}
div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 a {
color: #C69F73;/* 自由リンクの文字色 */
}余白の調整と影の削除
div.yyi-rinker-contents {
margin: 0 0 1.5em;/* 外側上の余白を調整 */
border: none;/* 外側の枠線を消す */
box-shadow: none;/* 影を消す */
}ボタンのテキストを太字にしない
div.yyi-rinker-contents ul.yyi-rinker-links li a {
font-weight: normal;
}サムネイル幅を120pxに変更
div.yyi-rinker-contents div.yyi-rinker-image {
width: 120px;
min-width: 100px;
padding: 0;
margin-right: 10px;
}
div.yyi-rinker-contents img.yyi-rinker-main-img {
width: auto;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
margin-bottom: 0 !important;
}商品タイトルリンク色の変更
div.yyi-rinker-title a {
color: #5383c3 !important;/* 通常時 */
font-weight: normal;/* 太字にしない */
}
/* ホバー時 */
div.yyi-rinker-title a:hover {
text-decoration: underline !important;
}