app/template/default/Block/header0.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. #}
  12. {% block stylesheet %}
  13.     <link rel="stylesheet" href="{{ asset('assets/css/main_module_commom.css', 'user_data') }}">
  14.     <link rel="stylesheet" href="{{ asset('assets/css/header_style.css', 'user_data') }}">
  15. {% endblock %}
  17. {% block javascript %}
  18.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  19.     <script src="{{ asset('assets/js/header.js', 'user_data') }}"></script>
  20. {% endblock  %}
  23. <div class="fixed-header">
  24.     <section>
  25.     <div id="site_header">
  26.         <div class="header_logo">
  27.             <a href="https://photo-pub.com">
  28.                 <img src="{{ asset('assets/img/common/header_logo_0.png', 'user_data') }}">
  29.             </a>
  30.         </div>
  31.         <div class="header_menus">
  32.             <div class="header_inner1">
  33.                 {{ render(path('block_search_product')) }}
  34.                 <div class="header_link1 pc">
  35.                     <ul class="link1">
  36.                         <li><a href="https://photo-pub.co.jp/news">NEWS</a></li>
  37.                         <li><a href="https://photo-pub.co.jp/company">会社概要</a></li>
  38.                         <li><a href="{{ url('contact') }}">お問い合わせ</a></li>
  39.                         <li><a href="{{ url('opinion') }}">意見箱</a></li>
  40.                     </ul>
  41.                 </div>
  42.                 <div class="header_link2">
  43.                     {{ include('Block/login.twig') }}
  44.                 </div>
  46.                 <div class="hamburger-menu sp">
  47.                     <button id="hamburger" class="hamburger">
  48.                         <span></span>
  49.                         <span></span>
  50.                         <span></span>
  51.                     </button>
  53.                     <nav id="menus" class="menus">
  54.                         <ul class="hamburger-tabs">
  55.                             <li class="menu-item">
  56.                                 <a href="https://photo-pub.com/">TOP</a>
  57.                             </li>
  58.                             <li class="menu-item">
  59.                                 <a href="{{ url('homepage') }}">フォトパブ堂書店</a>
  60.                                 <ul class="submenu">
  61.                                     <li><span></span><a href="{{ url('homepage') }}books">  フォトパブ堂書店TOP</a></li>
  62.                                     <li><span></span><a href="{{ url('homepage') }}products/list?category_id=1">  鉄道</a></li>
  63.                                     <li><span></span><a href="{{ url('homepage') }}products/list?category_id=2">  バス</a></li>
  64.                                     <li><span></span><a href="{{ url('homepage') }}products/list?category_id=5">  古地図・歴史散歩（地域）</a></li>
  65.                                     <li><span></span><a href="{{ url('homepage') }}products/list?category_id=7">  その他</a></li>
  66.                                 </ul>
  67.                             </li>
  68.                             <li class="menu-item">
  69.                                 <a href="https://jihi.photo-pub.co.jp/">自費出版サービス</a>
  70.                                 <ul class="submenu">
  71.                                     <li><span></span><a href="https://jihi.photo-pub.co.jp/">詳細情報</a></li>
  72.                                 </ul>
  73.                             </li>
  74.                             <li class="menu-item">
  75.                                 <a href="https://photo-pub.co.jp/event">イベント情報</a>
  76.                                 <ul class="submenu">
  77.                                     <li><span></span><a href="https://photo-pub.co.jp/event">イベント一覧</a></li>
  78.                                 </ul>
  79.                             </li>
  80.                             <li class="menu-item">
  81.                                 <a href="https://photo-pub.co.jp/recruit">各種募集</a>
  82.                                 <ul class="submenu">
  83.                                     <li><span></span><a href="https://photo-pub.co.jp/recruit">募集一覧</a></li>
  84.                                 </ul>
  85.                             </li>
  86.                         </ul>
  88.                         <ul class="hamburger-links">
  89.                             <li><a href="https://photo-pub.co.jp/news">NEWS</a></li>
  90.                             <li><a href="https://photo-pub.co.jp/company">会社概要</a></li>
  91.                             <li><a href="{{ url('contact') }}">お問い合わせ</a></li>
  92.                             <li><a href="{{ url('opinion') }}">意見箱</a></li>
  93.                             <li><a href="https://photo-pub.com/help/privacy">プライバシー<br class="br_linkbox">ポリシー</a></li>
  94.                             <li><a href="https://photo-pub.com/help/tradelaw">特定商取引法<br class="br_linkbox">に基づく表記</a></li>
  95.                         </ul>
  97.                         <ul class="hamburger-sns">
  98.                             <li><a><img src="{{ asset('assets/img/common/sns_ic_insta.png', 'user_data') }}" alt="insta"></a></li>
  99.                             <li><a href="https://www.youtube.com/@%E3%83%95%E3%82%A9%E3%83%88%E3%83%91%E3%83%96"><img src="{{ asset('assets/img/common/sns_ic_youtube.svg', 'user_data') }}" alt="youtube"></a></li>
  100.                             <li><a href="https://twitter.com/share?url=https://photo-pub.co.jp/&via=photopub402&hashtags=%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%95%E3%82%A9%E3%83%88%E3%83%91%E3%83%96%E3%83%AA%E3%83%83%E3%82%B7%E3%83%B3%E3%82%B0&text=%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%95%E3%82%A9%E3%83%88%E3%83%91%E3%83%96%E3%83%AA%E3%83%83%E3%82%B7%E3%83%B3%E3%82%B0"><img src="{{ asset('assets/img/common/sns_ic_x.svg', 'user_data') }}" alt="x"></a></li>
  101.                             <li><a href="http://www.facebook.com/share.php?u=https://photo-pub.co.jp/"><img src="{{ asset('assets/img/common/sns_ic_fb.svg', 'user_data') }}" alt="fb"></a></li>
  102.                         </ul>
  103.                     </nav>
  105.                 </div>
  106.             </div>
  107.             <div class="header_inner2 pc">
  108.                 <ul class="select_btns">
  109.                     <li class="btn"><a href="https://photo-pub.com/">TOP</a></li>
  110.                     <li class="btn"><a href="{{ url('homepage') }}books">フォトパブ堂書店</a></li>
  111.                     <li class="btn"><a href="http://jihi.photo-pub.co.jp/">自費出版サービス</a></li>
  112.                     <li class="btn"><a href="https://photo-pub.co.jp/event">イベント情報</a></li>
  113.                     <li class="btn"><a href="https://photo-pub.co.jp/recruit">各種募集</a></li>
  114.                 </ul>
  115.             </div>
  116.         </div>
  117.     </div>
  118.     {#<div class="tabs">#}
  119.     {#    <ul class="tabs_inner">#}
  120.     {#        {% set Categories = repository('Eccube\\Entity\\Category').getList() %}#}
  121.     {#        {% macro tree(Category) %}#}
  122.     {#            {% from _self import tree %}#}
  123.     {#            <a href="{{ url('product_list') }}?category_id={{ Category.id }}">#}
  124.     {#                {{ Category.name }}#}
  125.     {#            </a>#}
  126.     {#            {% if Category.children|length > 0 %}#}
  127.     {#                <ul>#}
  128.     {#                    {% for ChildCategory in Category.children %}#}
  129.     {#                        <li>#}
  130.     {#                            {{ tree(ChildCategory) }}#}
  131.     {#                        </li>#}
  132.     {#                    {% endfor %}#}
  133.     {#                </ul>#}
  134.     {#            {% endif %}#}
  135.     {#        {% endmacro %}#}
  136.     
  137.             {# @see https://github.com/bolt/bolt/pull/2388 #}
  138.     {#        {% from _self import tree %}#}
  139.             
  140.     {#        <div class="ec-categoryNaviRole">#}
  141.     {#            <div class="ec-itemNav">#}
  142.     {#                <ul class="ec-itemNav__nav">#}
  143.     {#                    {% for Category in Categories %}#}
  144.     {#                        <li>#}
  145.     {#                            {{ tree(Category) }}#}
  146.     {#                        </li>#}
  147.     {#                    {% endfor %}#}
  148.     {#                </ul>#}
  149.     {#            </div>#}
  150.     {#        </div>#}
  151.     {#    </ul>#}
  152.     {#</div>#}
  153.     <div class="sp-search-form">
  154.         <form action="{{ path('product_list') }}" class="search-form sp">
  155.             <input type="text" class="search-form-input" placeholder="キーワード（タイトル、著者など）を入力">
  156.             <button type="submit" class="search-form-submit" aria-label="検索"></button>
  157.         </form>
  158.     </div>
  159. </section>
  160. </div>
  162. <style>
  163.     .fixed-header {
  164.     position: fixed;
  165.     top: 0;
  166.     left: 0;
  167.     width: 100%;
  168.     z-index: 9999;
  169.     background-color: #fff; /* 背景が透けないように */
  170.     box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 任意：影で浮かせる */
  171. }
  173. body {
  174.     padding-top: 100px; /* ヘッダーの高さに合わせて調整（例：80px） */
  175. }
  176. @media screen and (max-width: 820px) {
  177.     body {
  178.         padding-top: 120px; /* ヘッダーの高さに合わせて調整（例：80px） */
  179.     }
  180. }
  183. </style>