app/template/default/Block/float_1yen_banner.twig line 1

Open in your IDE?
  1. {% block stylesheet %}
  2.     <style>
  3.     /* バナー全体のスタイル */
  4.     .float_btn {
  5.         width: 200px;
  6.         height: 200px;
  7.         position: fixed;
  8.         right: 25px;
  9.         bottom: 25px;
  10.         z-index: 500;
  11.     }
  13.     .float_btn img {
  14.         width: 200px;
  15.     }
  17.     /* クローズボタンのスタイル */
  18.     .close-btn {
  19.         position: absolute;
  20.         top: -10px;
  21.         right: -10px;
  22.         background-color: #000000; /* 赤い背景色 */
  23.         color: #ffffff; /* 白い文字 */
  24.         border: none;
  25.         border-radius: 50%;
  26.         width: 30px;
  27.         height: 30px;
  28.         font-size: 18px;
  29.         font-weight: bold;
  30.         cursor: pointer;
  31.         line-height: 30px;
  32.         text-align: center;
  33.     }
  35.     .close-btn:hover {
  36.         background-color: #000000; /* ホバー時の色 */
  37.     }
  38.     </style>
  39. {% endblock %}
  41. {% block javascript %}
  42.     <script>
  43.         document.addEventListener("DOMContentLoaded", function () {
  44.             const banner = document.getElementById("banner");
  46.             // セッションストレージに閉じた情報があるか確認
  47.             const isClosed = sessionStorage.getItem("bannerClosed");
  49.             // フラグが無ければ（未閉じ状態なら）表示する
  50.             if (isClosed !== "true") {
  51.                 banner.style.display = "block";
  52.             }
  53.         });
  55.         function closeBanner() {
  56.             const banner = document.getElementById('banner');
  57.             banner.style.display = 'none';
  58.             sessionStorage.setItem("bannerClosed", "true");
  59.         }
  60.     </script>
  61. {% endblock %}
  63. <div class="float_btn" id="banner" style="display: none;">
  64.     <a href="{{ url('user_data', { 'route': '1yen_2025_lp' }) }}">
  65.         <img src="{{ asset('assets/img/common/float_banner_1yen.png', 'user_data') }}" alt="1円キャンペーン" style="">
  66.     </a>
  67.     <button class="close-btn" onclick="closeBanner()">×</button>
  68. </div>