Rinkerの商品リンクに楽天ROOMのボタンを追加できるようにする方法

Rinkerで商品リンクを設置するときに、Amazon・楽天市場・Yahoo!ショッピングのボタンに加えて、自分の楽天ROOMの商品詳細ページへのリンクボタンを追加したいと思うことはありませんか？

れんさん

Rinkerだったら自由URLボタンを設置できる機能があるだろ？

はちべえ

そこに楽天ROOMの商品詳細ページのリンクを貼るだけなんじゃないの？

ハイクロ

（お前ら何でそんなこと知っとるん）

はい、その通り、自由URLボタンを使えばいいんですね。

しかし、何も設定せずに使うとボタンの色が「うーん」と思いませんか？

れんさん

ああ、たしかにボタンの色はできれば楽天ROOMのカラーにしたいな

ハイクロ

そうそう、そのやり方をここから説明していくよ

自由URLボタンは4つまで使用できます。
商品ごとに毎回ボタンの名称、リンク先URLを設定できますが、今回の方法ではどれか1つを完全に楽天ROOM用に固定することになります。

ハイクロ

おすすめなのは自由URLボタン2ですかね
Amazon、楽天市場、Yahoo!ショッピングの後ろに来るので

はちべえ

関係ないけど、どうして1→3→2→4の順番なんだろうねえ？

ハイクロ

それはよく分からないな…

管理画面で［外観］＞［カスタマイズ］の中にある［追加CSS］を選択します。

僕はCocoonというWordPressテーマを使用しているのでこのやり方で設定を追加できるのですが、（自作テーマを含む）他のテーマではできない場合があります。

その場合は、［外観］＞［テーマエディタ］からstyle.cssを変更したり、ローカルのstyle.cssを編集してアップロードするなどの方法で行う必要がありますが、とくにテーマエディタの編集は初心者が行うには危険なので自己責任においてお願いします。

ul.yyi-rinker-links li.freelink2 a {
background: #C61F79;}

ハイクロ

「#C61F79」が楽天ROOMのカラーですね

スクリーンショットは以下のようになります。
「公開」をクリックするとブログに反映されます。

はちべえ

あ、「freelink2」ってところを1や3や4に変えれば、
他の3つのボタンの色も好きな色に変更できるんだね！

ハイクロ

そういうことだね

ということで、自由URLボタン2の色が楽天ROOMの色になりました。

「楽天ROOM」という文言は商品によって変えられますが、色は固定になるので注意してください。