楽天などでよく見かけるセールを強調する縦バナーのリピート及び左右設置方法
楽天などでよく見かけるセールを強調する縦バナーのリピート及び左右設置方法
- このトピックには3件の返信、2人の参加者があり、最後に
により3年、 2ヶ月前に更新されました。
-
投稿
-
■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ テーマの種類
Lightning Pro■ スキンの種類
Origin II■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。先日縦帯バナー設置方法について質問し、以下のように回答をいただきました。
▼ウィジェットのフッター上部に HTMLブロックを配置して以下を追記<div class=”floating-banner”>
<div class=”banner”>
</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;
}
}このままペーストしましたら画像は右上に一つだけ表示されるようになりましたが、複数画像が並んだ帯を上から下までリピートさせるにはどうすればよいでしょうか
また左右に設置する場合もご教示くだされば幸いです。
よろしくお願いいたします。複数画像が並んだ帯を上から下までリピートさせるにはどうすればよいでしょうか
ひとつ前のご質問にあったバナーではなく、いわゆる壁紙のように画像を並べて埋め尽くしたいということであれば、以下のページが参考になると思います。
https://step-learn.com/article/html-css/066-background-repeat.html
「background-repeat」でググれば、もっとわかりやすい情報が見つかるかもしれません。
左右に設置する場合もご教示くだされば幸いです。
コードをコピーして、.floating-banner の部分を .floating-banner-2 と置き換えたものを左に配置するように、以下のページを参考にカスタマイズすれば作ることができると思います。
「position fixed」でググれば、もっとわかりやすい情報が見つかるかもしれません。
ご質問の内容は Lightning の使い方ではないので、ベクトルさんは回答を保証していません。
有志の参加者からの回答を得られやすくするために、このように変えてみたけど思ったようにできなかったとか、可能であれば実際に作ってうまくいってない状態のものを URL で提示していただくと、もしかしたら回答を得られるかもしれません。
どのコードをどこに追加すればよいのかわかりませんでした。
遅くなりましたが、以下のページを紹介させていただきます。
まずこのページを読んでおくと、最初に提示させていただいたページに書かれていることが理解しやすくなると思います。
- このトピックに返信するにはログインが必要です。
