【楽天市場】お中元・夏ギフト特集|ポイント最大10倍やクーポンも! >
「招待した人もされた人も必ずP1000もらえる!7月招待キャンペーン」開催中!

今メルカリをはじめると、お買い物で使える1000円分のポイントを進呈🎁
登録するときに招待コードを入力してね❗
キャンペーン期間は7/29まで!

招待コード:KZEUXF

まずはメルカリをダウンロード

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

Rinkerの商品リンクに楽天ROOMのボタンを追加できるようにする方法 Web・副業・パソコン

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

れんさん
れんさん

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

はちべえ
はちべえ

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

ハイクロ
ハイクロ

(お前ら何でそんなこと知っとるん)

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

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

れんさん
れんさん

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

ハイクロ
ハイクロ

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

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

1.楽天ROOM用のボタンをどれにするか決める

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

ハイクロ
ハイクロ

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

はちべえ
はちべえ

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

ハイクロ
ハイクロ

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

 

2.管理画面で追加CSSの記述をする

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

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

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

 

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

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

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

はちべえ
はちべえ

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

ハイクロ
ハイクロ

そういうことだね

 

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

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

Web・副業・パソコンブログ運営
注文住宅の家づくり&雑記ブログ「ハイクロノート」

コメント

タイトルとURLをコピーしました