[ 解決済 ] 楽天などでよく見かけるセールを強調する縦バナーの設置方法

おそらくやりたいことは、
楽天市場でよくみかけるサイドにピタッとついている縦長追従バナーのようなものですよね、、？？

こんな記事をみつけました。
サイズは違いますが、これを応用して、ウィジェットのフッター上部にHRMLブロックでHTMLを配置、
追加CSSなどにCSSを記述すれば、似たようなバナーは配置できるかなと思います（スマホサイズではバナーは非表示にしているようです）

レスポンシブのフローティングバナー(追従バナー)の作り方【コピペOK】

「楽天GOLDのindex.htmlへhtmlコードを貼りましょう。」（ここには載せませんが、記事中のhtmlコードはコピペOKなものでした。）

固定ページやウィジェットに、ブロックでカスタムHTMLは配置できます。
が、、、記事は見ておりませんが、楽天GOLDのindex.htmlへ貼り付ける記事だと思いますので、、うまくいかないようなきがしております。。

わたしの添付したURLでしたら、バナー部分のHTMLとCSSですので、ちょっとカスタマイズするとうまくできるのではないかと思っております。

ーー追記ーー
わたしのLightningで実装しているサイトで試したところ、うまくいきました。

CSSの参考サイト

できる！WordPressカスタマイズ #01 簡単なデザイン（CSS）カスタマイズ方法徹底解説

• この返信は3年、 2ヶ月前にうなこが編集しました。
• この返信は3年、 2ヶ月前にうなこが編集しました。
• この返信は3年、 2ヶ月前にうなこが編集しました。

バナーは画像を配置するのだと思いますので、少し変えてみました。
以下でいかがでしょうか？横幅が1199.98px以下では非表示になるようにしました。こちらもお好きな形に変えてください。
※HTMLはリンク先と画像のURLを変えてご利用ください。
※CSSの数値はお好きなものに変えてください。

▼ウィジェットのフッター上部に　HTMLブロックを配置して以下を追記

<div class="floating-banner">
<div class="banner">
<a href="https://〇〇〇〇/">
<img src="https://〇〇.png">
</a>
</div>
</div>

▼カスタマイズ→追加CSSなどに追記

.floating-banner {
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
}
.floating-banner:hover {
    opacity: .9;
}
.banner {
    width: 80px;/* バナーの横幅 */
height:100vh;/* バナーの高さ */
padding: 16px;/* バナーの余白 */
background-color:#30ddd4;/* バナーの背景色 */
}

/* pcサイズ以下で非表示 */
@media (max-width: 1199.98px){
    .floating-banner {
        display: none;
    }
}

• この返信は3年、 2ヶ月前にうなこが編集しました。