app/template/default/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'front_page' %}
  15. {% block stylesheet %}
  16. <style>
  17.     .slick-slider {
  18.         margin-bottom: 30px;
  19.     }
  21.     .slick-dots {
  22.         position: absolute;
  23.         bottom: -45px;
  24.         display: block;
  25.         width: 100%;
  26.         padding: 0;
  27.         list-style: none;
  28.         text-align: center;
  29.     }
  31.     .slick-dots li {
  32.         position: relative;
  33.         display: inline-block;
  34.         width: 20px;
  35.         height: 20px;
  36.         margin: 0 5px;
  37.         padding: 0;
  39.         cursor: pointer;
  40.     }
  42.     .slick-dots li button {
  43.         font-size: 0;
  44.         line-height: 0;
  45.         display: block;
  46.         width: 20px;
  47.         height: 20px;
  48.         padding: 5px;
  49.         cursor: pointer;
  50.         color: transparent;
  51.         border: 0;
  52.         outline: none;
  53.         background: transparent;
  54.     }
  56.     .slick-dots li button:hover,
  57.     .slick-dots li button:focus {
  58.         outline: none;
  59.     }
  61.     .slick-dots li button:hover:before,
  62.     .slick-dots li button:focus:before {
  63.         opacity: 1;
  64.     }
  66.     .slick-dots li button:before {
  67.         content: " ";
  68.         line-height: 20px;
  69.         position: absolute;
  70.         top: 0;
  71.         left: 0;
  72.         width: 12px;
  73.         height: 12px;
  74.         text-align: center;
  75.         opacity: .25;
  76.         background-color: black;
  77.         border-radius: 50%;
  79.     }
  81.     .slick-dots li.slick-active button:before {
  82.         opacity: .75;
  83.         background-color: black;
  84.     }
  86.     .slick-dots li button.thumbnail img {
  87.         width: 0;
  88.         height: 0;
  89.     }
  90. </style>
  91. {% endblock %}
  93. {% block main %}
  94. <div class="mv">
  95.     <div class="slider-wrap">
  96.         <div class="swiper slider">
  97.             <div class="swiper-wrapper">
  98.                 <!-- サタプラ放送前 -->
  99.                 <!-- <div class="swiper-slide">
  100.                     <a href="https://www.mbs.jp/saturday-plus/" target="_blank" class="swiper-slide-link">
  101.                         <picture>
  102.                             <source srcset="{{ asset('assets/img/top/sp/main06.jpg', 'user_data') }}" media="(max-width: 768px)">
  103.                             <img src="{{ asset('assets/img/top/main06.jpg', 'user_data') }}" alt="MBS毎日放送「ひたすら試してランキング」でひろたのぽんずが紹介されます！">
  104.                         </picture>
  105.                     </a>
  106.                 </div> -->
  107.                 <!-- サタプラ放送後 -->
  108.                 <div class="swiper-slide">
  109.                     <a href="https://hirota-s.com/products/list?category_id=51" class="swiper-slide-link">
  110.                         <picture>
  111.                             <source srcset="{{ asset('assets/img/top/sp/main06-3.jpg', 'user_data') }}" media="(max-width: 768px)">
  112.                             <img src="{{ asset('assets/img/top/main06-3.jpg', 'user_data') }}" alt="MBS毎日放送「ひたすら試してランキング」でひろたのぽんずが紹介されました！">
  113.                         </picture>
  114.                     </a>
  115.                 </div>
  116.                 <div class="swiper-slide">
  117.                     <a href="https://hirota-s.com/products/detail/36" class="swiper-slide-link">
  118.                         <picture>
  119.                             <source srcset="{{ asset('assets/img/top/sp/main05.jpg', 'user_data') }}" media="(max-width: 768px)">
  120.                             <img src="{{ asset('assets/img/top/main05.jpg', 'user_data') }}" alt="MBS毎日放送「魔法のレストラン」でひろたのぽんずが紹介されました！">
  121.                         </picture>
  122.                     </a>
  123.                 </div>
  124.                 <div class="swiper-slide">
  125.                     <a href="{{ url('recipe') }}">
  126.                         <picture>
  127.                             <source srcset="{{ asset('assets/img/top/sp/main01.jpg', 'user_data') }}" media="(max-width: 768px)">
  128.                             <img src="{{ asset('assets/img/top/main01.jpg', 'user_data') }}" alt="手造りひろたのポン酢レシピ特集">
  129.                         </picture>
  130.                     </a>
  131.                 </div>
  132.                 <div class="swiper-slide">
  133.                     <a href="https://hirota-s.com/products/detail/8">
  134.                         <picture>
  135.                             <source srcset="{{ asset('assets/img/top/sp/main02.jpg', 'user_data') }}" media="(max-width: 768px)">
  136.                             <img src="{{ asset('assets/img/top/main02.jpg', 'user_data') }}" alt="いつもの料理がランクアップ！ひろたの万能つゆ">
  137.                         </picture>
  138.                     </a>
  139.                 </div>
  140.                 <div class="swiper-slide">
  141.                     <a href="https://hirota-s.com/products/list">
  142.                         <picture>
  143.                             <source srcset="{{ asset('assets/img/top/sp/main03.jpg', 'user_data') }}" media="(max-width: 768px)">
  144.                             <img src="{{ asset('assets/img/top/main03.jpg', 'user_data') }}" alt="ひろたの豊富なラインナップをご自宅で">
  145.                         </picture>
  146.                     </a>
  147.                 </div>
  148.                 <div class="swiper-slide">
  149.                     <a href="https://hirota-s.com/products/detail/11">
  150.                         <picture>
  151.                             <source srcset="{{ asset('assets/img/top/sp/main04.jpg', 'user_data') }}" media="(max-width: 768px)">
  152.                             <img src="{{ asset('assets/img/top/main04.jpg', 'user_data') }}" alt="徳島県那賀町・木頭産ゆずを使用したゆずぽんず">
  153.                         </picture>
  154.                     </a>
  155.                 </div>
  156.             </div>
  157.         </div>
  158.     </div>
  159.     <div class="slider-thumbnail-wrap">
  160.         <div class="swiper slider-thumbnail">
  161.             <div class="swiper-wrapper">
  162.                 <!-- サタプラ放送前 -->
  163.                 <!-- <div class="swiper-slide"><img src="{{ asset('assets/img/top/main06.jpg', 'user_data') }}" alt="MBS毎日放送「ひたすら試してランキング」でひろたのぽんずが紹介されます！"></div> -->
  164.                 <!-- サタプラ放送後 -->
  165.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main06-3.jpg?20251122', 'user_data') }}" alt="MBS毎日放送「ひたすら試してランキング」でひろたのぽんずが紹介されました！"></div>
  166.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main05.jpg', 'user_data') }}" alt="MBS毎日放送「魔法のレストラン」でひろたのぽんずが紹介されました！"></div>
  167.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main01.jpg', 'user_data') }}" alt="手造りひろたのポン酢レシピ特集"></div>
  168.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main02.jpg', 'user_data') }}" alt="いつもの料理がランクアップ！ひろたの万能だし"></div>
  169.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main03.jpg', 'user_data') }}" alt="ひろたの豊富なラインナップをご自宅で"></div>
  170.                 <div class="swiper-slide"><img src="{{ asset('assets/img/top/main04.jpg', 'user_data') }}" alt="徳島県那賀町・木頭産ゆずを使用したゆずぽんず"></div>
  171.             </div>
  172.         </div>
  173.         <div class="swiper-button-prev"></div>
  174.         <div class="swiper-button-next"></div>
  175.     </div>
  177. </div>
  178. {% endblock %}