icon-check icon-sns-facebook icon-sns-twitter icon-sns-instagram icon-sns-line icon-sns-pinterest arrow icon__mail

WEBサイト構築CMS

お問い合わせ・資料請求
  1. HOME
  2. ガイド
  3. 記事詳細ページサンプルコード
GUIDE

記事詳細ページサンプルコード

Clipkitで構築するWEBサイトのフロントエンドをコーディングするためのLiquidテンプレート言語のリファレンスです。記事詳細ページで使われる事が多いコードのサンプルを記載しています。

INDEX

記事詳細ページで利用できるサンプルコードを用意しました。あわせて適切なCSSを適用することで、下記のような記事詳細ページを表示できます。

出力イメージ

(13076)

セクションAのサンプルコード

アイキャッチ画像、タイトル、日付、概要（description）の表示、目次の表示

<!-- アイキャッチ画像 --><br>
<div><br>
<figure style="background-image: url({{ article.image_large_url }});"></figure><br>
<div><br>
 <p>{{ article.category.name }}</p><br>
 <p>{{ article.updated_at | date: '%Y.%m.%d' }}</p><br>
</div><br>
<!-- 記事タイトル、SNSアイコン --><br>
<div><br>
 <h1>{{ article.title }}</h1><br>
 <div><br>
   <ul><br>
     <li><br>
       <a href="https://www.facebook.com/sharer/sharer.php?u={{ article.url }}" target="_blank"><br>
         <img src="{% file "/theme/middle/i_share_fb.png" %}" alt="facebook"><br>
       </a><br>
     </li><br>
     <li><br>
       <a href="https://twitter.com/intent/tweet?url={{ article.url }}&text={{ article.title }}" target="_blank"><br>
         <img src="{% file "/theme/middle/i_share_tw.png" %}" alt="twitter"><br>
       </a><br>
     </li><br>
     <li><br>
       <a href="http://line.me/R/msg/text/?{{ article.title }}{{ article.url }}" target="_blank"><br>
         <img src="{% file "/theme/middle/i_sns_line.png" %}" alt="LINE"><br>
       </a><br>
     </li><br>
     <li><br>
       <button type="button" data-favorite-id="{{ article.permalink }}" data-favorite-json-url="{{ article.favorites_json_url }}"><br>
         <i aria-hidden="true"></i><br>
       </button><br>
     </li><br>
   </ul><br>
 </div><br>
<!-- 概要 --><br>
 <p>{{ article.description | newline_to_br | auto_link }}</p><br>
</div><br>
</div>

セクションBのサンプルコード

各記事アイテムを展開する事により記事を表示、記事につけられたタグの表示

<!-- 記事アイテムの展開（コンテンツ本文） --><br>
<div><br>
{% paginate article.items %}<br>
 {% for item in paginate.collection %}<br>
<!-- ギャラリー --><br>
   {% if item.type == "ItemImageGallery" %}<br>
     <div id="item{{ item.permalink }}" data-item-id="{{ item.permalink }}" data-item-type="ItemImageGallery"><br>
       <p>PHOTO GALLERY</p><br>
       <div><br>
         {% for gallery in item.galleries %}<br>
           <div><br>
             <a data-lightbox="galleries" href="{{ gallery.image_large_url | replace_regexp: 'large', 'original' }}"><br>
               <img src="{{ gallery.image_large_url | replace_regexp: 'large', 'original' }}" alt="{{ gallery.body }}" data-reference="{{ gallery.url }}"><br>
             </a><br>
           </div><br>
         {% endfor %}<br>
       </div><br>
     </div><br>
<!-- 画像 --><br>
   {% elsif item.type == "ItemImage" %}<br>
     {% if item.caption != blank %}<br>
       {% assign alt = item.caption %}<br>
     {% elsif item.body != blank %}<br>
       {% assign alt = item.body %}<br>
     {% endif %}<br>
     <div id="item{{ item.permalink }}" data-item-id="{{ item.permalink }}" data-item-type="ItemImage"><br>
       <div><br>
         <div><br>
           <img src="{{ item.image_large_url }}" alt="{{ alt }}"><br>
         </div><br>
         {% if item.body != blank %}<br>
           <h4>{{ item.body | newline_to_br }}</h4><br>
         {% endif %}<br>
         {% if item.comment != blank %}<br>
           <p>{{ item.comment | newline_to_br | auto_link }}</p><br>
         {% endif %}<br>
         {% if item.source != blank %}<br>
           <p>引用元:<br>
             <cite><br>
               {% if item.url != blank %}<br>
                 <a href="{{ item.url }}">{{ item.source }}</a><br>
               {% else %}<br>
                 {{ item.source }}<br>
               {% endif %}<br>
             </cite><br>
           </p><br>
         {% endif %}<br>
       </div><br>
     </div><br>
<!-- リンク（テキスト） --><br>
   {% elsif item.type == "ItemLink" %}<br>
     {% if item.ext1 == "1" %}<br>
       <div id="item{{ item.permalink }}" data-item-id="{{ item.permalink }}" data-item-type="ItemLink"><br>
         <div><br>
           <a href="{{ item.url }}" rel="nofollow" target="_blank">{{ item.ext2 }}</a><br>
         </div><br>
       </div><br>
     {% else %}<br>
       <div id="item{{ item.permalink }}" data-item-id="{{ item.permalink }}" data-item-type="ItemLink"><br>
         <div><br>
           <a href="{{ item.url }}" target="_blank"><br>
             <div><br>
               <figure style="background-image: url({{ item.image_large_url }});"></figure><br>
               <p>{{ item.source }}</p><br>
             </div><br>
             <p>{{ item.body }}</p><br>
           </a><br>
         </div><br>
         <div>{{ item.comment }}</div><br>
       </div><br>
     {% endif %}<br>
<!-- リンク（画像） --><br>
   {% elsif item.type == "ImageLink" %}<br>
     <div id="item{{ item.permalink }}" data-item-id="{{ item.permalink }}" data-item-type="ImageLink"><br>
       <div><br>
         <a href="{{ item.link_url }}"><br>
           <picture><br>
             <source media="(max-width: 767px)" srcset="{{ item.img.medium_url }}"><br>
             <img src="{{ item.img.large_url }}" alt="title"><br>
           </picture><br>
         </a><br>
       </div><br>
     </div><br>
<!-- 吹き出し（左から） --><br>
   {% elsif item.type == 'ItemTalkLeft' %}<br>
     <div id="item{{ item.permalink }}" data-item-id="{{ item.permalink }}" data-item-type="ItemImage"><br>
       <figure style="background-image: url('{{ item.image_medium_url }}');"></figure><br>
       <div><br>
         <p>{{ item.body | newline_to_br }}</p><br>
         <div><br>
           <i><img src="{% file %}"></i><br>
           {{ item.comment | newline_to_br | auto_link }}<br>
         </div><br>
       </div><br>
     </div><br>
<!-- 吹き出し（右） --><br>
   {% elsif item.type == 'ItemTalkRight' %}<br>
     <div id="item{{ item.permalink }}" data-item-id="{{ item.permalink }}" data-item-type="ItemImage"><br>
       <figure style="background-image: url('{{ item.image_medium_url }}');"></figure><br>
       <div><br>
         <p>{{ item.body | newline_to_br }}</p><br>
         <div><br>
           <i><img src="{% file %}"></i><br>
           {{ item.comment | newline_to_br | auto_link }}<br>
         </div><br>
       </div><br>
     </div><br>
<!-- 画像（2枚横並び） --><br>
   {% elsif item.type == 'Item2galleryType1' or item.type == 'Item2galleryType2' or item.type == 'Item2galleryType3' %}<br>
     <div id="item{{ item.permalink }}" data-item-id="{{ item.permalink }}" data-item-type="ItemImage"><br>
       {% for gallery in item.galleries %}<br>
         <div><br>
           <figure style="background-image: url('{{ gallery.image_large_url | replace_regexp: 'large', 'original' }}');"></figure><br>
         </div><br>
       {% endfor %}<br>
     </div><br>
<!-- プロフィール --><br>
   {% elsif item.type == 'ImageProfile' %}<br>
     <div id="item{{ item.permalink }}" data-item-id="{{ item.permalink }}"><br>
       <div><br>
         <div><br>
           <span><br>
             <img alt="{{ item.body | newline_to_br }}" src="{{ item.image_medium_url }}"><br>
           </span><br>
         </div><br>
         <div><br>
           <h4>{{ item.body | newline_to_br }}</h4><br>
           <div>{{ item.comment | newline_to_br | auto_link }}</div><br>
         </div><br>
       </div><br>
     </div><br>
   {% else %}<br>
     {{ item.render }}<br>
   {% endif %}<br>
 {% endfor %}<br>
<!-- タグ一覧 --><br>
 {% if article.tags != empty %}<br>
   <div><br>
     <ul><br>
       {% for tag in article.tags %}<br>
         <li><br>
           <a href="{{ tag.path }}">{{ tag.name }}</a><br>
         </li><br>
       {% endfor %}<br>
     </ul><br>
   </div><br>
 {% endif %}<br>
{% endpaginate %}<br>
{% render 'custom_pager' %}<br>
</div>

セクションCのサンプルコード

著者のプロフィール

<!-- 著者のプロフィール --><br>
<div><br>
<div><br>
 <h3>writer profile</h3><br>
 <a href="{{ article.user.url }}"></a><br>
 <p>{{ article.user.name }}</p><br>
<div><br>
   <figure style="background-image: url({{ article.user.image_medium_path }});"></figure><!-- 著者画像 --><br>
   <div><br>
     <p>{{ article.user.bio | newline_to_br | auto_link }}</p><!-- 著者プロフィール --><br>
     {% capture html %}<br>
       {% for i in (1..3) %}<br>
         {% capture str %}url{{ i }}{% endcapture %}<br>
         {% assign url = article.user[str] %}<br>
         {% if url != blank %}<br>
           <a href="{{ url }}" target="_blank"><!-- 著者のSNSアカウント --><br>
             {% if url contains 'youtube.com' %}<br>
               <svg width="100px" height="100px"><use xlink:href="#icon-sns-youtube"></use></svg><br>
             {% elsif url contains 'twitter.com' %}<br>
               <svg width="100px" height="100px"><use xlink:href="#icon-sns-twitter"></use></svg><br>
             {% elsif url contains 'facebook.com' %}<br>
               <svg width="100px" height="100px"><use xlink:href="#icon-sns-facebook"></use></svg><br>
             {% elsif url contains 'instagram.com' %}<br>
               <svg width="100px" height="100px"><use xlink:href="#icon-sns-instagram"></use></svg><br>
             {% elsif url contains 'page.line.me' %}<br>
               <svg width="100px" height="100px"><use xlink:href="#icon-sns-line"></use></svg><br>
             {% elsif url contains 'tiktok.com' %}<br>
               <svg width="100px" height="100px"><use xlink:href="#icon-sns-tiktok"></use></svg><br>
             {% else %}<br>
               <svg width="100px" height="100px"><use xlink:href="#icon-sns-etc"></use></svg><br>
             {% endif %}<br>
             {{ url }}<br>
           </a><br>
         {% endif %}<br>
       {% endfor %}<br>
     {% endcapture %}<br>
     {% if html != blank %}<br>
       <div>{{ html }}</div><br>
     {% endif %}<br>
   </div><br>
 </div><br>
</div>

セクションDのサンプルコード

コメントの表示、関連記事、タグの表示

<!--<br>
Clipkitの設定でコメント表示が許可されていれば最新5件のコメントを表示<br>
--><br>
{% if site.accept_comment %}<br>
<div><br>
  <h3>comments</h3><br>
  <div><br>
    <div><br>
      {% if article.num_comments > 0 %}<br>
        <div><br>
          {% for comment in article.comments | limit: 5 %}<br>
            <div><br>
              <header><br>
                <span>{{ comment.sender }}</span><br>
                <time>{{ comment.created_at | date: '%Y/%-m/%-d %H:%M' }}</time><br>
              </header><br>
              <div><br>
                <div><br>
                  <p>{{ comment.body | newline_to_br }}</p><br>
                </div><br>
                {% assign assets = comment.assets | to_array %}<br>
                {% if assets.size > 0 %}<br>
                  <div><br>
                    {% for asset in assets %}<br>
                      <a href="{{ asset.large_url }}"><br>
                        <img src="{{ asset.square_url }}" width="75" height="75"><br>
                      </a><br>
                    {% endfor %}<br>
                  </div><br>
                {% endif %}<br>
<!-- コメントに対する返信があれば返信を表示 --><br>
                {% assign replies = comment.replies | to_array %}<br>
                {% if replies.size > 0 %}<br>
                  <div><br>
                    {% for reply in replies %}<br>
                      <div><br>
                        <header><br>
                          <span>{{ reply.sender }}</span><br>
                          <time>{{ reply.created_at | date: '%Y/%-m/%-d %H:%M' }}</time><br>
                        </header><br>
                        <div><br>
                          <p>{{ reply.body }}</p><br>
                        </div><br>
                        {% assign assets = reply.assets | to_array %}<br>
                        {% if assets.size > 0 %}<br>
                          <div><br>
                            {% for asset in reply.assets %}<br>
                              <a href="{{ asset.large_url }}"><br>
                                <img src="{{ asset.square_url }}" width="75" height="75"><br>
                              </a><br>
                            {% endfor %}<br>
                          </div><br>
                        {% endif %}<br>
                      </div><br>
                    {% endfor %}<br>
                  </div><br>
                {% endif %}<br>
              </div><br>
              <div><br>
                <a href="{{ comment.new_reply_path }}">返信を書く</a><br>
              </div><br>
            </div><br>
          {% endfor %}<br>
        </div><br>
      {% else %}<br>
        <div>コメントはまだありません</div><br>
      {% endif %}<br>
      <div><br>
        <a href="{{ article.comments_path }}"><br>
          すべてのコメントを見る ({{ article.num_comments | format_number }})<br>
        </a><br>
        <a href="{{ article.new_comment_path }}"><br>
          <span></span>コメントを書く<br>
        </a><br>
      </div><br>
    </div><br>
  </div><br>
</div><br>
{% endif %}<br>
<br>
<!-- 関連する記事2件を表示 --><br>
{% assign articles = article.relevance_articles | limit: 2 %}<br>
{% if articles != empty %}<br>
<h3>RELATED</h3><br>
<div><br>
  {% for article in articles %}<br>
    <div><br>
      <a href="{{ article.path }}"><br>
        <div><br>
          <figure style="background-image: url({{ article.image_large_url }});"></figure><br>
        </div><br>
        <div><br>
          <p>{{ article.title }}</p><br>
          <div><br>
            <p>{{ article.category.name }}</p><br>
            <p>{{ article.published_at | date: '%Y.%m.%d' }}</p><br>
          </div><br>
        </div><br>
      </a><br>
    </div><br>
  {% endfor %}<br>
</div><br>
{% endif %}<br>
</div>

ダウンロード

上記で紹介したセクションA〜セクションDまでの標準的なサンプルコードがダウンロードできます。

記事詳細ページサンプルコード

article_sample_code202510.html (14 KB)
ダウンロード

TIPS

記事が更新されていれば、公開日と更新日を並べて表示したい

{% comment %}
記事が更新されていれば、公開日と更新日を並べて表示する
{% endcomment %}

{% if article.published_at == article.updated_at %}
  <p>公開日：{{ article.published_at | date: "%Y.%m.%d %H:%M" }}</p>
{% else %}
  <p>公開日：{{ article.published_at | date: "%Y.%m.%d %H:%M" }}</p>
  <p>更新日：{{ article.updated_at   | date: "%Y.%m.%d %H:%M" }}</p>
{% endif %}

記事の日付を和暦で表示したい①

{% comment %}
記事の右肩に表示する日付を、令和表記にする（過去日付の記事は無いものとする）
{% endcomment %}

{% assign year = article.published_at | date: "%Y" | plus: 0 %}
{% assign reiwa_year = year | minus: 2018 %}

{% assign month = article.published_at | date: "%-m" %}
{% assign day   = article.published_at | date: "%-d" %}
{% assign hour  = article.published_at | date: "%H" %}
{% assign minute = article.published_at | date: "%M" %}

令和{{ reiwa_year }}年{{ month }}月{{ day }}日 {{ hour }}時{{ minute }}分

記事の日付を和暦で表示したい②

{% comment %}
他CMSからの記事移行があった場合等、記事の右肩に表示する日付を、平成を考慮した和暦で表示する
{% endcomment %}

{% assign year   = article.published_at | date: "%Y" | plus: 0 %}
{% assign month  = article.published_at | date: "%-m" | plus: 0 %}
{% assign day    = article.published_at | date: "%-d" | plus: 0 %}
{% assign hour   = article.published_at | date: "%H" %}
{% assign minute = article.published_at | date: "%M" %}

{%- comment -%}
  判定基準: 2019/05/01 以降 → 令和、それ以前 → 平成
  令和元年は 2019年
{%- endcomment -%}

{% if year > 2019 or (year == 2019 and month > 5) or (year == 2019 and month == 5 and day >= 1) %}
  {%- assign reiwa_year = year | minus: 2018 -%}
  {% if reiwa_year == 1 %}
    令和元年{{ month }}月{{ day }}日 {{ hour }}時{{ minute }}分
  {% else %}
    令和{{ reiwa_year }}年{{ month }}月{{ day }}日 {{ hour }}時{{ minute }}分
  {% endif %}
{% else %}
  {%- assign heisei_year = year | minus: 1988 -%}
  平成{{ heisei_year }}年{{ month }}月{{ day }}日 {{ hour }}時{{ minute }}分
{% endif %}

その他の日時の表記形式はLiquid Official Reference のDateフィルターを参照

記事中の見出しアイテムから、ページ内リンクする目次を表示したい

{% comment %}
見出しの自動生成を行います
{% endcomment %}

{% assign headings = article.items | headings_per_page %}
{% if headings.size > 0 %}
<div>
	<p>目次</p>
	<ul>
	{% for heading in headings %}
	<li class="lv{{ heading['level'] }}">
		<a href="{{ heading['path'] }}">{{ heading['title'] }}</a>
	</li>
	{% endfor %}
	</ul>
</div>

記事の拡張項目の値を表示する

{% comment %}
拡張項目：会場（venue）を表示する
{% endcomment %}

会場：{{ article.attributes.venue }}

閲覧数・お気に入り数・コメント数を表示したい

{% comment %}
記事の閲覧数・お気に入り数・コメント数を表示する
{% endcomment %}

<!-- 閲覧数 -->
<span>
  <i class="fa fa-eye" aria-hidden="true"></i>{{ article.num_views | format_number }}
</span>

<!-- お気に入り数 -->
<span>
  <i class="fa fa-bookmark" aria-hidden="true"></i>
  <span class="js-favorite__counter--{{ article.permalink }}">{{ article.num_favorites | format_number }}</span>
</span>

<!-- コメント数 -->
<span>
  <i class="far fa-bookmark"></i>{{ article.num_comments | format_number }}
</span>

複数のお気に入り種類を使用してリアクションを使い分けたい

{% comment %}
複数のお気に入り種類を使用してリアクションボタンを使い分けたい
{% endcomment %}

<!-- サイト管理＞記事設定＞お気に入り種類に定義が必要です -->
<div>
  <button class="nice01 js-favorite__button--{{ article.permalink }}--nice01" type="button">
    <span class="icon">
      <i class="fa" aria-hidden="true"></i>いいね！</span>
    <span class="js-favorite__counter--{{ article.permalink }}--nice01">0</span>
    <div class="js-favorite__users--{{ article.permalink }}--nice01">
    </div>
  </button>
</div>
<div>
  <button class="nice02 js-favorite__button--{{ article.permalink }}--nice02" type="button">
    <span class="icon">
      <i class="fa" aria-hidden="true"></i>最高！</span>
    <span class="js-favorite__counter--{{ article.permalink }}--nice02">0</span>
    <div class="js-favorite__users--{{ article.permalink }}--nice02">
    </div>
  </button>
</div>
<div>
  <button class="nice03 js-favorite__button--{{ article.permalink }}--nice03">
    <span class="icon">
      <i class="fa" aria-hidden="true"></i>応援するよ！</span>
    <span class="js-favorite__counter--{{ article.permalink }}--nice03">0</span>
    <div class="js-favorite__users--{{ article.permalink }}--nice03">
    </div>
  </button>
</div>

記事から特定の記事アイテムのみ取得したい

{% comment %}
記事アイテムの画像アイテム（ItemImage）のみを取得する
{% endcomment %}

{% assign items = article.items | where: "items.type = ?, 'ItemImage'" %}

記事アイテムを判定したい

{% comment %}
記事を構成する記事アイテムの中で画像アイテムだけ特別な処理を行う
{% endcomment %}

{% for item in article.items %}
  {% if item.type == 'ItemImage' %}
    {% comment %}画像アイテムの時の処理{% endcomment %}
  {% endif %}
{% endfor %}

記事種類を判定したい

{% comment %}
記事種類に3が含まれている時、タイトルの前に「注目記事!」を表示する
{% endcomment %}

{% if article.kinds contains "3" %}
  <span class="pickup">注目記事!</span><span class="title">{{ article.title }}</span>
{% else %}
  <span class="title">{{ article.title }}</span>
{% endif %}

記事につけられたタグ一覧を表示したい

{% comment %}
記事に紐づけられたタグ一覧を編集画面の登録順に表示する
{% endcomment %}

{% if article.tags != empty %}
  <div>
    <ul>
      {% for tag in article.ordered_tags %}
        <li><a href="{{ tag.path }}">{{ tag.name }}</a></li>
      {% endfor %}
    </ul>
  </div>
{% endif %}

記事詳細ページにCSS、JavaScriptを読み込みたい

{% comment %}
記事詳細ページにだけarticle.jsを読み込む
{% endcomment %}

テンプレート「全体レイアウト」に記載
{% if article %}
<script src="{% file "/theme/theme_name/js/article.js" %}"></script>
{% endif %}
45 件

関連するガイド

記事一覧ページサンプルコード
ガイド

記事一覧ページサンプルコード

条件抽出・検索サンプルコード
ガイド

条件抽出・検索サンプルコード

Clipkit Liquidテンプレート言語リファレンス（タグ・フィルター）
ガイド

Clipkit Liquidテンプレート言語リファレンス（タグ・フィルター）

Clipkit Liquidテンプレート言語リファレンス（オブジェクト・メソッド）
ガイド

Clipkit Liquidテンプレート言語リファレンス（オブジェクト・メソッド）