バナーは画像を配置するのだと思いますので、少し変えてみました。
以下でいかがでしょうか?横幅が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年、 1ヶ月前にうなこが編集しました。