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

Open in your IDE?
  1. {% block main %}
  2.   {% if CustomerKbn == "seller" %}
  3.   
  4.   {% else %}
  5.       <div class="categorybannerCol3_hdr">カテゴリから探す<span class="underline"></span></div>
  6.       <br>
  7.       <div class="ec-role">
  8.       <div class="ec-shelfRole123">
  9.           <div class="col2002">
  10.             <!-- 米穀市場 -->
  11.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=9"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/1_banner_kome-meigara/1_banner_kome-meigara_900-225.jpg" /></a></div>
  12.             <!-- 米穀の価格帯区分 -->
  13.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=24"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/31_banner_kome-price/31_banner_kome-price_900-225.jpg" /></a></div>
  14.             <!-- 米米穀の粒区分 -->
  15.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=25"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/32_banner_kome-tsubu/32_banner_kome-tsubu_900-225.jpg" /></a></div>
  16.             <!-- 米穀の精米別の区分 -->
  17.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=26"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/33_banner_seimai/33_banner_seimai_900-225.jpg" /></a></div>
  18.             <!-- 畜産品市場 -->
  19.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=10"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/12_banner_chikusan/12_banner_chikusan_900-225.jpg" /></a></div>
  20.             <!-- 水産品市場 -->            
  21.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=11"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/13_banner_suisan/13_banner_suisan_900-225.jpg" /></a></div>
  22.             <!-- 農産品市場 -->
  23.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=12"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/14_banner_nousan/14_banner_nousan_900-225.jpg" /></a></div>
  24.             <!-- 加工食品市場 -->
  25.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=13"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/15_banner_kashoku/15_banner_kashoku_900-225.jpg" /></a></div>
  26.             <!-- ノンフード市場 -->
  27.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=14"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/16_banner_non-food/16_banner_non-food_900-225.jpg" /></a></div>
  28.             <!-- 支払方法の区分 -->
  29.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=18"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/21_banner_payment/21_banner_payment_900-225.jpg" /></a></div>
  30.             <!-- 税・送料の区分 -->
  31.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=19"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/22_banner_tax-shipping/22_banner_tax-shipping_900-225.jpg" /></a></div>
  32.             <!-- ホット商品の区分 -->
  33.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=20"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/23_banner_hot-category/23_banner_hot-category_900-225.jpg" /></a></div>
  34.             <!-- ロット区分 -->
  35.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=21"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/24_banner_lot-product/24_banner_lot-product_900-225.jpg" /></a></div>
  36.             <!-- 商品の産地区分 -->
  37.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=22"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/25_banner_product-sanchi/25_banner_product-sanchi_900-225.jpg" /></a></div>
  38.             <!-- 限定企画の区分 -->
  39.             <div class="sidepic"><a href="{{ app.request.schemeAndHttpHost }}/products/list?category_id=23"><img src="{{ app.request.schemeAndHttpHost }}/img/banner/26_banner_gentei-kikaku/26_banner_gentei-kikaku_900-225.jpg" /></a></div>
  40.           </div>
  41.       </div>
  42.       </div>
  43.     {% endif %}
  44. {% endblock %}
  46. <style>
  47.     .col2003 {
  48.       display: grid;
  49.       grid-template-columns: repeat(3, 1fr); /* 3列のグリッド */
  50.       gap: 0; /* イメージ間の間隔を0に設定 */
  51.     }
  52.     .col2002 {
  53.       display: grid;
  54.       grid-template-columns: repeat(2, 1fr); /* 2列のグリッド */
  55.       gap: 10px; /* イメージ間の間隔 */
  56.     }
  57.     
  58.     .col2003 .sidepic {
  59.       text-align: center; /* 画像を中央揃えにするため */
  60.       margin: 0; /* 縦横のマージンを0に設定 */
  61.     }
  62.     
  63.     .col2003 .sidepic img {
  64.       max-width: 100%; /* 画像を親要素に合わせてサイズ調整 */
  65.       height: auto; /* アスペクト比を維持 */
  66.     }
  67.   .categorybannerCol3_hdr {
  68.     text-decoration: none;
  69.     font-size: 24px; 
  70.     text-align: center;
  71.     position: relative;
  72.     color: black;
  73.   }
  74.   .categorybannerCol3_hdr .underline {
  75.     position: absolute;
  76.     bottom: 0;
  77.     left: 0;
  78.     right: 0;
  79.     height: 1px;
  80.     background-color: green;
  81.   }
  82. .categorybannerCol3_hdr .underline {
  83.     position: absolute;
  84.     bottom: 0;
  85.     left: 50%; /* アンダーラインの位置を調整 */
  86.     transform: translateX(-50%); /* 中央に配置 */
  87.     width: 25%; /* アンダーラインの幅を調整 */
  88.     height: 2px;
  89.     background-color: green;
  90. }
  91. </style>