app/template/kaorime/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' %}
  16. {% block main %}
  17.     <div class="top">
  18.         <!-- KV -->
  19.         <div class="top-kv">
  20.             <ul class="slider">
  21.                 <li><img src="{{ asset('assets/img/top/KV_03.png')}}" alt="我が家の香り芽1週間"></li>
  22.                 <li><a href="/products/detail/61"><img src="{{ asset('assets/img/top/KV_02.jpg')}}" alt="香り芽で食べ比べ　そふとふりかけおすすめ8選"></a></li>
  23.                 <li><a href="/products/detail/59"><img src="{{ asset('assets/img/top/KV_05.png')}}" alt="しそひじき　オンラインショップ限定！"></a></li>
  24.             </ul>
  25.         </div>
  26.         <!-- /KV -->
  27.         <!-- CONTENTS -->
  28.         <div class="l-container l-2ColumnContainer">
  29.             <!-- MAIN-CONTENTS -->
  30.             <div class="l-main">
  32.                 <!-- RANKING -->
  33.                 <section class="top-ranking marginTop0">
  34.                     <h2 class="top-h2-t02">商品ランキング <span class="itemEn">Ranking</span></h2>
  35.                     <div class="mod-productsBoxContainer">
  36.                         <!-- BOX -->
  37.                         <article class="mod-productsBox">
  38.                             <a href="/products/detail/21" class="mod-productsBoxInner">
  39.                                 <span class="boxImg">
  40.                                   <span class="boxImgInner">
  41.                                     <img src="{{ asset('assets/img/top/rank1.png')}}" alt="" class="imgObjectFitCover" loading="lazy">
  42.                                   </span>
  43.                                 </span>
  44.                                 <div class="boxData">
  45.                                     <h3 class="name">芽かぶ和風スープ 65g</h3>
  46.                                     <p class="price">¥432<span class="tax">(税込)</span></p>
  47.                                 </div>
  48.                             </a>
  49.                         </article>
  50.                         <!-- /BOX -->
  51.                         <!-- BOX -->
  52.                         <article class="mod-productsBox">
  53.                             <a href="/products/detail/22" class="mod-productsBoxInner">
  54.                                 <span class="boxImg">
  55.                                   <span class="boxImgInner">
  56.                                     <img src="{{ asset('assets/img/top/rank2.png')}}" alt="" class="imgObjectFitCover" loading="lazy">
  57.                                   </span>
  58.                                 </span>
  59.                                 <div class="boxData">
  60.                                     <h3 class="name">和風わかめスープ 80g</h3>
  61.                                     <p class="price">¥432<span class="tax">(税込)</span></p>
  62.                                 </div>
  63.                             </a>
  64.                         </article>
  65.                         <!-- /BOX -->
  66.                         <!-- BOX -->
  67.                         <article class="mod-productsBox">
  68.                             <a href="/products/detail/57" class="mod-productsBoxInner">
  69.                                 <span class="boxImg">
  70.                                   <span class="boxImgInner">
  71.                                     <img src="{{ asset('assets/img/top/shisohijiki.jpg')}}" alt="" class="imgObjectFitCover" loading="lazy">
  72.                                   </span>
  73.                                 </span>
  74.                                 <div class="boxData">
  75.                                     <h3 class="name">しそ入りひじきふりかけ 130g</h3>
  76.                                     <p class="price">¥540<span class="tax">(税込)</span></p>
  77.                                 </div>
  78.                             </a>
  79.                         </article>
  80.                         <!-- /BOX -->
  81.                         <!-- BOX -->
  82.                         <article class="mod-productsBox">
  83.                             <a href="/products/detail/18" class="mod-productsBoxInner">
  84.                                 <span class="boxImg">
  85.                                   <span class="boxImgInner">
  86.                                     <img src="{{ asset('assets/img/top/rank4.png')}}" alt="" class="imgObjectFitCover" loading="lazy">
  87.                                   </span>
  88.                                 </span>
  89.                                 <div class="boxData">
  90.                                     <h3 class="name">わかめごはん 110g</h3>
  91.                                     <p class="price">¥432<span class="tax">(税込)</span></p>
  92.                                 </div>
  93.                             </a>
  94.                         </article>
  95.                         <!-- /BOX -->
  98.                     </div>
  99.                 </section>
  100.                 <!-- /RANKING -->
  102.                 <!-- CATEGORY -->
  103.                 <section class="top-pCategory marginTop70">
  104.                     <h2 class="top-h2-t02">商品カテゴリー <span class="itemEn">Category</span></h2>
  105.                     <div class="top-pCategoryCardContainer">
  106.                         <!-- CARD -->
  107.                         <article class="top-pCategoryCard">
  108.                             <a href="/products/list?category_id=7" class="top-pCategoryCardInner">
  109.                                 <div class="boxImg">
  110.                                   <span class="boxImgInner">
  111.                                     <img src="{{ asset('assets/img/top/category_img_01.jpg')}}" alt="わかめふりかけの写真" class="imgObjectFitCover"
  112.                                          loading="lazy">
  113.                                   </span>
  114.                                 </div>
  115.                                 <div class="boxData">
  116.                                     <h3 class="name">わかめふりかけ</h3>
  117.                                     <p class="detail">わかめをもっと手軽に食べていただけるよう、質や味にもこだわって作った自慢の逸品です。</p>
  118.                                 </div>
  119.                             </a>
  120.                         </article>
  121.                         <!-- /CARD -->
  122.                         <!-- CARD -->
  123.                         <article class="top-pCategoryCard">
  124.                             <a href="/products/list?category_id=8" class="top-pCategoryCardInner">
  125.                                 <div class="boxImg">
  126.                                   <span class="boxImgInner">
  127.                                     <img src="{{ asset('assets/img/top/category_img_02.jpg')}}" alt="ひじきふりかけの写真" class="imgObjectFitCover"
  128.                                          loading="lazy">
  129.                                   </span>
  130.                                 </div>
  131.                                 <div class="boxData">
  132.                                     <h3 class="name">ひじきふりかけ</h3>
  133.                                     <p class="detail">海藻類の中でも特に栄養価の高いひじきを使った身体思いのふりかけです。<br>ソフトタイプでやわらかく、食べやすさと、おいしさにこだわった逸品です。</p>
  134.                                 </div>
  135.                             </a>
  136.                         </article>
  137.                         <!-- /CARD -->
  138.                         <!-- CARD -->
  139.                         <article class="top-pCategoryCard">
  140.                             <a href="/products/list?category_id=9" class="top-pCategoryCardInner">
  141.                                 <div class="boxImg">
  142.                                   <span class="boxImgInner">
  143.                                     <img src="{{ asset('assets/img/top/category_img_03.jpg')}}" alt="わかめごはんの写真" class="imgObjectFitCover" loading="lazy">
  144.                                   </span>
  145.                                 </div>
  146.                                 <div class="boxData">
  147.                                     <h3 class="name">わかめごはん</h3>
  148.                                     <p class="detail">炊き上がったご飯にまぜるだけで、手軽にわかめごはんが召し上がれます。</p>
  149.                                 </div>
  150.                             </a>
  151.                         </article>
  152.                         <!-- /CARD -->
  153.                         <!-- CARD -->
  154.                         <article class="top-pCategoryCard">
  155.                             <a href="/products/list?category_id=10" class="top-pCategoryCardInner">
  156.                                 <span class="boxImg">
  157.                                   <span class="boxImgInner">
  158.                                     <img src="{{ asset('assets/img/top/category_img_04.jpg')}}" alt="わかめスープの写真" class="imgObjectFitCover" loading="lazy">
  159.                                   </span>
  160.                                 </span>
  161.                                 <div class="boxData">
  162.                                     <h3 class="name">わかめスープ</h3>
  163.                                     <p class="detail">独自の製法でわかめの葉自体に味を施し、深い味わいに。<br>出汁とわかめの味わいが食欲をそそる、本格わかめスープです。</p>
  164.                                 </div>
  165.                             </a>
  166.                         </article>
  167.                         <!-- /CARD -->
  168.                         <!-- CARD -->
  169.                         <article class="top-pCategoryCard">
  170.                             <a href="/products/list?category_id=11" class="top-pCategoryCardInner">
  171.                                 <span class="boxImg">
  172.                                   <span class="boxImgInner">
  173.                                     <img src="{{ asset('assets/img/top/category_img_05.jpg')}}" alt="お茶漬けの写真" class="imgObjectFitCover" loading="lazy">
  174.                                   </span>
  175.                                 </span>
  176.                                 <div class="boxData">
  177.                                     <h3 class="name">お茶漬け</h3>
  178.                                     <p class="detail">わかめ本来の「緑」が鮮やかなお茶漬けです。<br>磯の香りとあられのこうばしさを合わせて、風味豊かに仕上げました。</p>
  179.                                 </div>
  180.                             </a>
  181.                         </article>
  182.                         <!-- /CARD -->
  183.                     </div>
  184.                 </section>
  185.                 <!-- /CATEGORY -->
  188.                 <!-- RECOMMEND -->
  189.                 <section class="top-recommend marginTop70">
  190.                     <h2 class="top-h2-t02">おすすめの商品 <span class="itemEn">Recommend</span></h2>
  191.                     <div class="mod-productsBoxContainer">
  193.                         {% if Layout.MainBottom %}
  194.                             {{ include('block.twig', {'Blocks': Layout.MainBottom}) }}
  195.                         {% endif %}
  197.                     </div>
  198.                 </section>
  199.                 <!-- /RECOMMEND -->
  202.                 <!-- PICK-BNR -->
  203.                 <ul class="top-pickBnrContainer marginTop60">
  204.                     <li>
  205.                         <img src="{{ asset('assets/img/top/banner_02.png')}}" alt="送料一律３００円のゆうパケット便" class="imgFit" width="396" height="124"
  206.                              loading="lazy">
  207.                     </li>
  208.                     <li>
  209.                         <a href="/products/detail/61">
  210.                         <img src="{{ asset('assets/img/top/banner_03.jpg')}}" alt="香り芽で食べ比べ　そふとふりかけおすすめ8選" class="imgFit" width="396" height="124"
  211.                              loading="lazy">
  212.                         </a>
  213.                     </li>
  214.                      <li>
  215.                          <a href="/products/detail/59">
  216.                          <img src="{{ asset('assets/img/top/banner_05.png')}}" alt="しそひじき　オンラインショップ限定！" class="imgFit" width="396" height="124"
  217.                              loading="lazy">
  218.                          </a>
  219.                     </li>
  220.                </ul>
  221.                 <!-- /PICK-BNR -->
  222.                 <!-- REASON -->
  223.                 <section class="top-reason">
  224.                     <h2 class="top-h2-t01">Kaorimeのごはんのおともが<br>「からだにいい」理由</h2>
  225.                     <div class="top-reasonBoxContainer">
  226.                         <!-- BOX -->
  227.                         <section class="top-reasonBox">
  228.                             <div class="boxImg">
  229.                                 <span class="boxImgInner">
  230.                                   <img src="{{ asset('assets/img/top/reason1.png')}}" alt="良質産地韓国「東海岸」で採れたひじき" class="imgObjectFitCover"
  231.                                        loading="lazy">
  232.                                 </span>
  233.                             </div>
  234.                             <h3 class="itemHl">良質産地韓国「東海岸」で<br><span class="itemShrink">採れたひじき</span></h3>
  235.                         </section>
  236.                         <!-- /BOX -->
  237.                         <!-- BOX -->
  238.                         <section class="top-reasonBox">
  239.                             <div class="boxImg">
  240.                                 <span class="boxImgInner">
  241.                                   <img src="{{ asset('assets/img/top/reason2.png')}}" alt="着色料不使用の無添加へのこだわり" class="imgObjectFitCover" loading="lazy">
  242.                                 </span>
  243.                             </div>
  244.                             <h3 class="itemHl">着色料不使用の<br class="dn-pc">無添加へのこだわり</h3>
  245.                         </section>
  246.                         <!-- /BOX -->
  247.                         <!-- BOX -->
  248.                         <section class="top-reasonBox">
  249.                             <div class="boxImg">
  250.                                 <span class="boxImgInner">
  251.                                   <img src="{{ asset('assets/img/top/reason3.png')}}" alt="栄養豊富な海中で育ったわかめは、低カロリーで栄養分がとても豊富" class="imgObjectFitCover" loading="lazy">
  252.                                 </span>
  253.                             </div>
  254.                             <h3 class="itemHl">栄養豊富な海中で育ったわかめは、低カロリーで栄養分がとても豊富</h3>
  255.                         </section>
  256.                         <!-- /BOX -->
  257.                     </div>
  258.                     <a href="https://kaorime.co.jp/" class="mod-btn-02 mod-btn-external" target="_blank">公式サイトでもっと見る</a>
  259.                 </section>
  260.                 <!-- /REASON -->
  262.                 {#
  263.                 <!-- PICK-BNR-SLIDE -->
  264.                 <div class="top-pickBnrSlide">
  265.                     <ul class="slider">
  266.                         <li>
  267.                             <a href="#">
  268.                                 <img src="{{ asset('assets/img/top/pick_slide_banner_01.jpg')}}" alt="こだわりのスープギフト" width="770" height="241"
  269.                                      loading="lazy">
  270.                             </a>
  271.                         </li>
  272.                         <li>
  273.                             <img src="{{ asset('assets/img/top/pick_slide_banner_dummy.jpg')}}" alt="" width="770" height="241" loading="lazy">
  274.                         </li>
  275.                         <li>
  276.                             <img src="{{ asset('assets/img/top/pick_slide_banner_dummy.jpg')}}" alt="" width="770" height="241" loading="lazy">
  277.                         </li>
  278.                         <li>
  279.                             <img src="{{ asset('assets/img/top/pick_slide_banner_dummy.jpg')}}" alt="" width="770" height="241" loading="lazy">
  280.                         </li>
  281.                     </ul>
  282.                 </div>
  283.                 <!-- /PICK-BNR-SLIDE -->
  284.                 #}
  286.                 {#
  287.                 <!-- RECIPE・COLUMN -->
  288.                 <div class="top-recipeColumnGroup">
  289.                     <!-- RECIPE -->
  290.                     <section class="top-recipe">
  291.                         <h2 class="top-h2-t02">ひろがるレシピ <span class="itemEn">Recipe</span></h2>
  292.                         <!-- CARD -->
  293.                         <article class="top-recipeCard">
  294.                             <a href="#" class="top-recipeCardInner">
  295.                                 <div class="boxImg">
  296.                       <span class="boxImgInner">
  297.                         <img src="{{ asset('assets/img/top/recipe_img_01.jpg')}}" alt="じゃことわかめ入り卵焼きの写真" class="imgObjectFitCover"
  298.                              loading="lazy">
  299.                       </span>
  300.                                     <span class="boxImgProduct">
  301.                         <img src="{{ asset('assets/img/top/recipe_product_img_01.png')}}" alt="香り芽本舗ちりめん入わかめふりかけの写真" class="imgFit"
  302.                              width="60" height="80" loading="lazy">
  303.                       </span>
  304.                                 </div>
  305.                                 <div class="boxData">
  306.                                     <h3 class="recipeName">じゃことわかめ入り卵焼き</h3>
  307.                                     <span class="nameHl">利用商品</span>
  308.                                     <p class="name">香り芽本舗<br>ちりめん入わかめふりかけ</p>
  309.                                 </div>
  310.                             </a>
  311.                         </article>
  312.                         <!-- /CARD -->
  313.                         <!-- CARD -->
  314.                         <article class="top-recipeCard">
  315.                             <a href="#" class="top-recipeCardInner">
  316.                                 <div class="boxImg">
  317.                       <span class="boxImgInner">
  318.                         <img src="{{ asset('assets/img/top/recipe_img_02.jpg')}}" alt="わかめ入りペペロンチーノの写真" class="imgObjectFitCover"
  319.                              loading="lazy">
  320.                       </span>
  321.                                     <span class="boxImgProduct">
  322.                         <img src="{{ asset('assets/img/top/recipe_product_img_01.png')}}" alt="香り芽本舗ちりめん入わかめふりかけの写真" class="imgFit"
  323.                              width="60" height="80" loading="lazy">
  324.                       </span>
  325.                                 </div>
  326.                                 <div class="boxData">
  327.                                     <h3 class="recipeName">わかめ入りペペロンチーノ</h3>
  328.                                     <span class="nameHl">利用商品</span>
  329.                                     <p class="name">香り芽本舗<br>ちりめん入わかめふりかけ</p>
  330.                                 </div>
  331.                             </a>
  332.                         </article>
  333.                         <!-- /CARD -->
  334.                         <!-- CARD -->
  335.                         <article class="top-recipeCard">
  336.                             <a href="#" class="top-recipeCardInner">
  337.                                 <div class="boxImg">
  338.                       <span class="boxImgInner">
  339.                         <img src="{{ asset('assets/img/top/recipe_img_03.jpg')}}" alt="3種類のきゅうりとわかめのしそ風味浅漬けの写真" class="imgObjectFitCover"
  340.                              loading="lazy">
  341.                       </span>
  342.                                     <span class="boxImgProduct">
  343.                         <img src="{{ asset('assets/img/top/recipe_product_img_02.png')}}" alt="香り芽本舗ちりめん入わかめふりかけの写真" class="imgFit"
  344.                              width="60" height="80" loading="lazy">
  345.                       </span>
  346.                                 </div>
  347.                                 <div class="boxData">
  348.                                     <h3 class="recipeName">3種類のきゅうりとわかめのしそ風味浅漬け</h3>
  349.                                     <span class="nameHl">利用商品</span>
  350.                                     <p class="name">香り芽本舗<br>ちりめん入わかめふりかけ</p>
  351.                                 </div>
  352.                             </a>
  353.                         </article>
  354.                         <!-- /CARD -->
  355.                         <!-- BTN -->
  356.                         <a href="#" class="mod-btn-02 mod-btn-external">もっと見る</a>
  357.                         <!-- /BTN -->
  358.                     </section>
  359.                     <!-- /RECIPE -->
  360.                     <!-- COLUMN -->
  361.                     <section class="top-column">
  362.                         <h2 class="top-h2-t02">コラム <span class="itemEn">Column</span></h2>
  363.                         <div id="column-container"></div>
  364.                         <!-- BTN -->
  365.                         <a href="#" class="mod-btn-02 mod-btn-external">もっと見る</a>
  366.                         <!-- /BTN -->
  367.                     </section>
  368.                     <!-- /COLUMN -->
  369.                 </div>
  370.                 <!-- /RECIPE・COLUMN -->
  371.                 #}
  372.                 {#
  373.                 <!-- VOICE -->
  374.             <section class="top-voice">
  375.                 <h2 class="top-h2-t02">お客様の声 <span class="itemEn">Customer’s voice</span></h2>
  376.                 <div class="swiperContainer">
  377.                     <div id="swiper" class="swiper">
  378.                         <div class="swiper-wrapper">
  379.                             <!-- CARD -->
  380.                             <article class="top-voiceCard swiper-slide">
  381.                                 <a href="#" class="top-voiceCardInner">
  382.                                     <div class="boxImg">
  383.                       <span class="boxImgInner">
  384.                         <img src="{{ asset('assets/img/top/products_img_01.jpg')}}" alt="" class="imgObjectFitCover" loading="lazy">
  385.                       </span>
  386.                                         <p class="name">ちりめん入…</p>
  387.                                     </div>
  388.                                     <div class="boxData">
  389.                                         <div class="reviewStarGroup">
  390.                                             <span class="reviewStar starON">★</span>
  391.                                             <span class="reviewStar starON">★</span>
  392.                                             <span class="reviewStar starON">★</span>
  393.                                             <span class="reviewStar starON">★</span>
  394.                                             <span class="reviewStar starON">★</span>
  395.                                         </div>
  396.                                         <h3 class="reviewName">お名前</h3>
  397.                                         <p class="reviewComment">コメントが入ります。テキストテキストテキストテキストテキスト…</p>
  398.                                     </div>
  399.                                 </a>
  400.                             </article>
  401.                             <!-- /CARD -->
  402.                             <!-- CARD -->
  403.                             <article class="top-voiceCard swiper-slide">
  404.                                 <a href="#" class="top-voiceCardInner">
  405.                                     <div class="boxImg">
  406.                       <span class="boxImgInner">
  407.                         <img src="{{ asset('assets/img/top/products_img_01.jpg')}}" alt="" class="imgObjectFitCover" loading="lazy">
  408.                       </span>
  409.                                         <p class="name">ちりめん入…</p>
  410.                                     </div>
  411.                                     <div class="boxData">
  412.                                         <div class="reviewStarGroup">
  413.                                             <span class="reviewStar starON">★</span>
  414.                                             <span class="reviewStar starON">★</span>
  415.                                             <span class="reviewStar starON">★</span>
  416.                                             <span class="reviewStar starON">★</span>
  417.                                             <span class="reviewStar starOFF">★</span>
  418.                                         </div>
  419.                                         <h3 class="reviewName">お名前</h3>
  420.                                         <p class="reviewComment">コメントが入ります。テキストテキストテキストテキストテキスト…</p>
  421.                                     </div>
  422.                                 </a>
  423.                             </article>
  424.                             <!-- /CARD -->
  425.                             <!-- CARD -->
  426.                             <article class="top-voiceCard swiper-slide">
  427.                                 <a href="#" class="top-voiceCardInner">
  428.                                     <div class="boxImg">
  429.                       <span class="boxImgInner">
  430.                         <img src="{{ asset('assets/img/top/products_img_01.jpg')}}" alt="" class="imgObjectFitCover" loading="lazy">
  431.                       </span>
  432.                                         <p class="name">ちりめん入…</p>
  433.                                     </div>
  434.                                     <div class="boxData">
  435.                                         <div class="reviewStarGroup">
  436.                                             <span class="reviewStar starON">★</span>
  437.                                             <span class="reviewStar starON">★</span>
  438.                                             <span class="reviewStar starON">★</span>
  439.                                             <span class="reviewStar starOFF">★</span>
  440.                                             <span class="reviewStar starOFF">★</span>
  441.                                         </div>
  442.                                         <h3 class="reviewName">お名前</h3>
  443.                                         <p class="reviewComment">コメントが入ります。テキストテキストテキストテキストテキスト…</p>
  444.                                     </div>
  445.                                 </a>
  446.                             </article>
  447.                             <!-- /CARD -->
  448.                             <!-- CARD -->
  449.                             <article class="top-voiceCard swiper-slide">
  450.                                 <a href="#" class="top-voiceCardInner">
  451.                                     <div class="boxImg">
  452.                       <span class="boxImgInner">
  453.                         <img src="{{ asset('assets/img/top/products_img_01.jpg')}}" alt="" class="imgObjectFitCover" loading="lazy">
  454.                       </span>
  455.                                         <p class="name">ちりめん入…</p>
  456.                                     </div>
  457.                                     <div class="boxData">
  458.                                         <div class="reviewStarGroup">
  459.                                             <span class="reviewStar starON">★</span>
  460.                                             <span class="reviewStar starON">★</span>
  461.                                             <span class="reviewStar starON">★</span>
  462.                                             <span class="reviewStar starON">★</span>
  463.                                             <span class="reviewStar starON">★</span>
  464.                                         </div>
  465.                                         <h3 class="reviewName">お名前</h3>
  466.                                         <p class="reviewComment">コメントが入ります。テキストテキストテキストテキストテキスト…</p>
  467.                                     </div>
  468.                                 </a>
  469.                             </article>
  470.                             <!-- /CARD -->
  471.                             <!-- CARD -->
  472.                             <article class="top-voiceCard swiper-slide">
  473.                                 <a href="#" class="top-voiceCardInner">
  474.                                     <div class="boxImg">
  475.                       <span class="boxImgInner">
  476.                         <img src="{{ asset('assets/img/top/products_img_01.jpg')}}" alt="" class="imgObjectFitCover" loading="lazy">
  477.                       </span>
  478.                                         <p class="name">ちりめん入…</p>
  479.                                     </div>
  480.                                     <div class="boxData">
  481.                                         <div class="reviewStarGroup">
  482.                                             <span class="reviewStar starON">★</span>
  483.                                             <span class="reviewStar starON">★</span>
  484.                                             <span class="reviewStar starON">★</span>
  485.                                             <span class="reviewStar starON">★</span>
  486.                                             <span class="reviewStar starON">★</span>
  487.                                         </div>
  488.                                         <h3 class="reviewName">お名前</h3>
  489.                                         <p class="reviewComment">コメントが入ります。テキストテキストテキストテキストテキスト…</p>
  490.                                     </div>
  491.                                 </a>
  492.                             </article>
  493.                             <!-- /CARD -->
  494.                             <!-- CARD -->
  495.                             <article class="top-voiceCard swiper-slide">
  496.                                 <a href="#" class="top-voiceCardInner">
  497.                                     <div class="boxImg">
  498.                       <span class="boxImgInner">
  499.                         <img src="{{ asset('assets/img/top/products_img_01.jpg')}}" alt="" class="imgObjectFitCover" loading="lazy">
  500.                       </span>
  501.                                         <p class="name">ちりめん入…</p>
  502.                                     </div>
  503.                                     <div class="boxData">
  504.                                         <div class="reviewStarGroup">
  505.                                             <span class="reviewStar starON">★</span>
  506.                                             <span class="reviewStar starON">★</span>
  507.                                             <span class="reviewStar starON">★</span>
  508.                                             <span class="reviewStar starON">★</span>
  509.                                             <span class="reviewStar starON">★</span>
  510.                                         </div>
  511.                                         <h3 class="reviewName">お名前</h3>
  512.                                         <p class="reviewComment">コメントが入ります。テキストテキストテキストテキストテキスト…</p>
  513.                                     </div>
  514.                                 </a>
  515.                             </article>
  516.                             <!-- /CARD -->
  517.                         </div>
  518.                         <div class="swiper-scrollbar"></div>
  519.                     </div>
  520.                     <div class="swiper-button-prev"></div>
  521.                     <div class="swiper-button-next"></div>
  522.                 </div>
  523.             </section>
  524.             <!-- /VOICE -->
  525.                 #}
  526.             </div>
  527.             <!-- /MAIN-CONTENTS -->
  529.             <!-- SIDE-CONTENTS -->
  530.             {{ include('Block/side_menu.twig') }}
  531.             <!-- /SIDE-CONTENTS -->
  532.         </div>
  533.         <!-- /CONTENTS -->
  534.     </div>
  536.     {#
  537.     <script>
  538.         /**
  539.          * コラム・レシピの記事を取得する
  540.          * クロスドメイン対策のため、自サーバー内のPHPを迂回する。
  541.          */
  542.         $(function() {
  543.             $.ajax({
  544.                 type: 'GET',
  545.                 url:'/get_feed.php?t=column',
  546.                 dataType: 'xml',
  547.                 success: function(xml) {
  548.                     $(xml).find("item").each(function(i){
  549.                         if ( i >=5  ) {    //表示件数の設定　満たしたら処理を抜ける
  550.                             return false;
  551.                         }
  552.                         /* 記事タイトル */
  553.                         let item_title=$(this).find("title").text();
  554.                         /*リンク*/
  555.                         let item_link=$(this).find("link").text();
  556.                         /* 日付処理 */
  557.                         let item_postDate = $(this).find("pubDate").text();
  558.                         //日付の変換
  559.                         let dateStr = new Date(item_postDate);
  560.                         // 年の取得
  561.                         let year = dateStr.getFullYear();
  562.                         // 月の取得
  563.                         let month = dateStr.getMonth() + 1;
  564.                         // 日の取得
  565.                         let day = dateStr.getDate();
  566.                         /* 画像サムネイル */
  567.                         let item_description = $(this).find("description").text();
  568.                         //画像の取得、文字列「src="xxxx"」を抜き出す。
  569.                         var result = item_description.match(/(src=)["|'](.*?)["|']+/g);
  570.                         let imgUrl = "";//TODO:ここにロゴマークなどno imageをいれる
  571.                         if(result[0]){ //最初の１つをサムネイルとして使う。
  572.                             imgUrl = result[0].replace('"', '');
  573.                             imgUrl = imgUrl.replace('src=', '');
  574.                         }
  575.                         //出力HTML生成
  576.                         let article = '<article class="top-columnCard">'+
  577.                             '<a href="'+item_link+'" class="top-columnCardInner">'+
  578.                             '<div class="boxImg">'+
  579.                             '<span class="boxImgInner">'+
  580.                             '<img src="https://kaorime.co.jp'+imgUrl+'" alt="" class="imgObjectFitCover" loading="lazy">'+
  581.                             '</span>'+
  582.                             ' </div>'+
  583.                             '<div class="boxData">'+
  584.                             '<time class="itemDate">'+year+'年'+month+'月'+day+'日</time>'+
  585.                             '<h3 class="title">'+item_title+'</h3>'+
  586.                             '</div>'+
  587.                             '</a>'+
  588.                             '</article>';
  589.                         /* HTML生成 */
  590.                         if(item_title!="") {
  591.                             $("div#column-container").append(article);
  592.                         }
  593.                     });
  594.                 },
  595.                 fail: function() {
  596.                 }
  597.             });
  598.         });
  599.     </script>
  600.     #}
  601. {% endblock %}