楽天 RMS ヘッダフッダーレフトにgoldの一部タグを引用したい

Question

お世話になっております。
goldトップページの右側固定フローティング仕様のバナー4つですが、マウスをおくと少し動く仕様なのですが、この動きが商品ページ、カテゴリページにも設置したいので、RMSのヘッダフッダーレフト編集にて設置する方法をご教授頂きたいです。

一度設置してみたのですが、動く仕様が上手くいきませんでした。
貼り付けるタグをご提示頂けますと非常に助かります。

宜しくお願い致します。

Answer

ECマスターズの田中です。

下記タグの動作をご確認いただきますようお願いします。
（aタグ内のリンク先URL・画像URL・代替テキストは、実際の内容に書き換えた上で、必要な分だけ繰り返しご記載ください）
※21/10/29 20:58 田中にて修正







#fixed_right_banner {
/* 右端の上から20pxの位置に固定表示 */
position: fixed;
top: 80px;
right: 0;
z-index: 99999;
}
/* 画像の共通設定 */
#fixed_right_banner a {
clear: both;
float: right;
/* 横幅 */
width: 100px;
display: block;

/* 最初にあらかじめ右側を詰めて表示。 */
margin-right: -16px;
}

/* 2個目以降の画像の上部に余白を作る */
#fixed_right_banner a:nth-child(n+2) {
margin-top: 2px;
}

/* マウスオーバーで、詰めた右側のマージンをリセット。 */
#fixed_right_banner a:hover {
margin-right: 0;
width: 110px;
}

Answer

ご回答有難うございます。
挙動を確認できました。

ほんの少しバナーが右側に埋もれているように見えるのですが、私のPCだけでしょうか？

商品ページまたはカテゴリページを更新致しましたのでご確認宜しくお願い致します。

Answer

ECマスターズの田中です。

失礼しました、状況を確認したところ、
トップページ用と若干構造を変えたことにより、
画像の表示サイズおよび位置にずれが発生しておりました。

お手数ですが、先程ご案内差し上げたソースの
margin-right: -20px;
を
margin-right: -16px;
にご変更いただき、

margin-right: 0; と } の間に
width: 110px;
を追加していただきますようお願いします。

先程のソースも、併せて修正させていただきました。