CSSで、ボタンやバナーの位置を指定することで、画面の右下などの決まった位置に固定することが可能です。
さらに、JavaScript(jQuery)などでスクロールに合わせて追いかけるような動きをつけることで、追従させることもできます。
なお、個別のカスタマイズになりますので、作り方についてはサポートの対象外です。
Googleなどの検索サイトで「追従するバナー 作り方」などのキーワードで検索することで、設置方法を紹介するサイトを参照することができます。
またはChatGPTなどのAIに「サイトにバナーを設置し、ページの右下に固定し、スクロールに追従させたいです。HTML、CSS、必要があればJavaScriptのコードを作成してください。」
のようなプロンプトを与えることでコード例の取得ができますので、お試しください。
作成が難しい場合は、「おてがる更新代行サービス」(有償)の利用をご検討ください。
<デザインの例>
◆ボタンの位置を右下に固定する
CSSで「fixed(固定)」と指定することで、位置の固定が可能です。
.add-cart {
position: fixed;
right: 0;
z-index: 1;
bottom: 200px;
}
※classはデザインによって異なります。
◆ボタンの位置を右下に固定し、ページ内リンクを指定する →表示例はこちら
「カートに入れる」ボタンをページ内と、ページ右下の2か所に設置し、右下のボタンからはページ内リンクでページ内のボタンの位置に戻します。
バリエーション・オプショングループ(必須)・名入れなどの選択項目が設定されている商品ではこのような方法が適しています。
◆【応用】「カートに入れる」ボタンの位置を下に固定し、一定の高さを過ぎるとページ内の位置に戻す →表示例はこちら
jQueryで動きをつけると、スクロールにあわせてボタンを見やすい位置に追従させることができます。


