app/template/default/blog/news_detail.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block javascript %}{% endblock %}
  5. {% block stylesheet %}
  6. <style>
  7. .pluginCMBblog .post_meta {
  8.     display: flex;
  9.     list-style: none;
  10.     margin: 0;
  11.     padding: 0;
  12.     width: 95%;
  13.     margin: 0 auto;
  14. }
  15. .pluginCMBblog .blog_category{
  16.     margin: 0;
  17.     padding: 0;
  18. }
  19. .pluginCMBblog .blog_category{
  20.     display: initial;
  21. }
  22. .pluginCMBblog .blog_category li{
  23.     display: initial;
  24.     border-right: 1px solid #ddd;
  25. }
  27. .pluginCMBblog .blog_category li:last-child {
  28.     border-right: none;
  29. }
  31. .pluginCMBblog .post_meta .post_meta_list{
  32.     padding-right: 2rem;
  33. }
  35. .pluginCMBblog .list_category_link{
  36.     color: #337ab7;
  37.     padding: 0 0.5rem;
  38. }
  39. .pluginCMBblog .main_image_blog{
  40.     padding: 3rem 0;
  41. }
  43. .pluginCMBblog .post_meta_list.time{
  44.     width: 15rem;
  45.     display: inline-table;
  46. }
  47. .pluginCMBblog .tag_dl{
  48.     display: flex;
  49. }
  51. .pluginCMBblog .blog_detail .blog_Title{
  52.     word-break: break-word;
  53.     margin-bottom: 20px;
  54. }
  55. .pluginCMBblog .cm_blog_main_image img{
  56.     max-width: 100%;
  57.     width: auto;
  58. }
  59. ul.tag-ul {
  60.     padding-left:8px;
  61.     list-style: none;
  62.     display: flex;
  63.     flex-wrap: wrap;
  64. }
  65. ul.tag-ul > li {
  66.     margin: 0.4em;
  67.     padding: 0 0.8em;
  68.     border: 1px solid #ccc;
  69.     border-radius: 5px;
  70. }
  71. ul.tag-ul > li > a:hover {
  72.     text-decoration: none;
  73. }
  74. h3.tag-header {
  75.   padding: 1rem 2rem;
  76.   border-left: 4px solid #000;
  77. }
  78. .w-100 {
  79.     width: 100%
  80. }
  81. .side-bar > div {
  82.     width: 90%;
  83.     margin:40px auto;
  84. }
  85. h5.tag-header {
  86.   padding: 1rem 2rem;
  87.   border-left: 4px solid #000;
  88. }
  89. .month-archive a {
  90.     text-decoration: underline;
  91.     display: block;
  92.     padding: 3px 27px;
  93. }
  94. .ec-productRole__description > p img {
  95.     width: calc(var(--width));
  96.     margin-bottom: 15px;
  97. }
  98. .archive-link-div {
  99.     max-height: 600px;
  100.     overflow-y: scroll;
  101. }
  102. .archive-link-div::-webkit-scrollbar {
  103.     display: none;
  104. }
  105. @media screen and (max-width: 768px){
  106.     .pluginCMBblog .post_meta {
  107.         display: block;
  108.     }
  110.     .pluginCMBblog .post_meta_list.time{
  111.         width: 100%;
  112.     }
  113.     .side-bar > div {
  114.         width: 100%
  115.     }
  116. }
  117. @media only screen and (min-width: 768px) {
  118.     .ec-shelfGrid .ec-shelfGrid__item-image {
  119.         height: 150px;
  120.     }
  121.     h3.tag-header {
  122.         margin: 63px 16px 20px;
  123.     }
  124.     .side-bar {
  125.         width: 280px;
  126.         background-color: #f6f6f6;
  127.     }
  128.     .ec-role {
  129.         display: flex;
  130.         justify-content: flex-start
  131.     }
  132.     .mt-65 {
  133.         margin-top: 65px!important;
  134.     }
  135. }
  136. </style>
  137. {% endblock %}
  139. {% block main %}
  141. <div class="ec-role blog_detail pluginCMBblog content__inner">
  142.     <div class="w-100">
  143.         <div class="ec-pageHeader">
  144.             <h1 class="blog_Title">{{ blog.title }}</h1>
  145.         </div>
  146.         <ul class="post_meta ">
  147.             <li class="post_meta_list time"><i class="fas fa-calendar-alt"></i>&nbsp;{{blog.release_date|date('Y年m月d日')}}</li>
  149.             {% if blog.getBlogCategories|length > 0 %}
  150.             <li class="post_meta_list">
  151.                 <dl class="tag_dl">
  152.                     <dt><i class="fas fa-tags"></i></dt>
  153.                     <dd>
  154.                         <ul class="blog_category">
  155.                             {% for category in blog.getBlogCategories %}
  156.                             <li class="{{category.getCategory.class}}">
  157.                                 <a href="{{ url('news_list', {categories: [category.getCategory().getId()]}) }}" class="list_category_link">
  158.                                 {{ category.getCategory.getName|raw }}
  159.                                 </a>
  160.                             </li>
  161.                             {% endfor %}
  162.                         </ul>
  163.                     </dd>
  164.                 </dl>
  165.             </li>
  166.             {% endif %}
  167.         </ul>
  168.         <div class="ec-off1Grid">
  169.             <div class="ec-off1Grid__cell">
  170.                 <div class="cm_blog_main_image">
  171.                     {% if blog.getMainListImage %}
  172.                     <img src="{{ asset(blog.getMainListImage|no_image_product, 'save_image') }}" class="main_image_blog"></img>
  173.                     {% else %}
  174.                     <img class='item_blog_image'></img>
  175.                     {% endif %}
  176.                 </div>
  177.                     <div class="ec-grid2__cell">
  178.                     <div class="ec-productRole__profile">
  179.                         <div class="ec-productRole__description">{{ blog.body|raw }}
  180.                         </div>
  181.                     </div>
  182.                 </div>
  183.             </div>
  184.         </div>
  185.         {% if tags|length > 0 %}
  186.             <h3 class="tag-header">{{ 'plg.CMBlogPro.blog.tag'|trans }}</h3>
  187.             <ul class="tag-ul">
  188.                 {% for tag in tags %}
  189.                     <li>
  190.                         <a href="{{ url('news_list', {tag: tag|trim }) }}">{{ tag |trim }}</a>
  191.                     </li>
  192.                 {% endfor %}
  193.             </ul>
  194.         {% endif %}
  195.         {{ include('Block/blog_related_product.twig', {}, ignore_missing = true) }}
  197.         <div class="page__inner mt-50">
  198.           <h2 class="mod_movie-h2">
  199.             お知らせ一覧
  200.           </h2>
  201.           <div class="mod_movie-btn-more">
  202.             <a href="{{ url('news_list') }}">お知らせ一覧に戻る</a>
  203.           </div>
  204.         </div>
  205.     </div>
  206.     {#<div class="side-bar">#}
  207.     {#    <div class="mt-65 month-archive">#}
  208.     {#        <h5 class="tag-header">{{ 'plg.CMBlogPro.blog.month_archive'|trans }}</h5>#}
  209.     {#        <div class="archive-link-div">#}
  210.     {#            {% for key, month in monthArr %}#}
  211.     {#                <a href="{{ url('cm_blog_pro_page_list', {date: key}) }}">{{ month }}</a>#}
  212.     {#            {% endfor %}#}
  213.     {#        </div>#}
  214.     {#    </div>#}
  215.     {#</div>#}
  216. </div>
  217. {% endblock %}