サポートされる製品
次のいずれかの製品またはそれ以上が必要です。
Marketing HubMarketing HubProfessional
Content HubContent HubStarter
最終更新日: 2025年8月28日
HubSpotのブログは、ブログ リスト ページと個別のブログ記事で構成されます。ブログ リスト ページ テンプレートは個別のブログ記事をリスト化するために使用されるほか、執筆者およびタグのリストページをレンダリングするためにも使用されます。リストページ用とブログ記事用にそれぞれ個別のテンプレートを作成することも、両方を含めて全てのページをレンダリングする共通のテンプレートを作成することも可能です。 この記事では、ブログテンプレートのマークアップ、テンプレートを構成する要素、そしてカスタマイズのオプションについて説明します。

​
リストページと記事の共通テンプレートを作成する

リストページと記事の両方をレンダリングする共通のテンプレートを作成するには、テンプレートファイルの先頭にtemplateType: blogアノテーションを追加します。共通のテンプレートを両方のレンダリングに使用する場合は、if文を使用して、ユーザーがリストページと個別の記事のどちらを表示しているかを評価します。デザインマネージャーのドラッグ＆ドロップレイアウトを使用している場合、ブログ コンテンツ モジュール ボタンのUIにこのif文が組み込まれます。 if is_listing_viewステートメントを使用すると、記事とリストのコードを別々に書くことができます。 
{% if is_listing_view %}
    Markup for blog listing template
{% else %}
    Markup for blog post template
{% endif %}

​
リストページ用と記事用に個別のテンプレートを作成する

ブログ記事とリストページに別々のテンプレートを用意することも可能です。個別のテンプレートを使用することにより、開発者はコードがすっきりして読みやすく、コンテンツ作成者はテンプレートを選びやすくなります。共通のテンプレートでは先頭にtemplateType: blogアノテーションを挿入しますが、各ページ用に個別のテンプレートを作成する場合はそれに代わり、テンプレートの先頭にそれぞれ以下のアノテーションを追加します。
  • ブログ記事テンプレートtemplateType: blog_post
  • ブログ リスト テンプレートtemplateType: blog_listing
template - annotation - blog - listing
記事テンプレートとリスト ページ テンプレートを別々に作成する場合、is_listing_viewチェックは必要ありません。代わりに、アカウントのブログ設定で個別のテンプレートを手動で選択します。 また、共通のブログテンプレートを、リストページ用もしくは記事用のテンプレートに移行することも可能です。

​
リスト ページ テンプレート

テンプレートにtemplateType: blog_listingアノテーションを挿入すると、［ブログ設定］の下のセクションでリストページ用のテンプレートとして選択できるようになります。コンテンツ作成者はこのテンプレートタイプを使用して、ページエディター内でリストページを編集することも可能です。さらに、テンプレートにドラッグ＆ドロップエリアも含めることで、他のCMSページと同様にページエディターにおけるモジュールの追加や削除が可能になります。ドラッグ＆ドロップエリアの追加例に関して、詳しくはCMSボイラープレートのブログテンプレートをご覧ください。 記事のリストは、ブログ記事を反復処理するforループによって生成されます。contentsは、そのブログに含まれる全ての記事を含む事前定義されたコンテンツシーケンスです。 
{% for content in contents %}
    <div class="post-item">
        Post item markup that renders with each iteration.
    </div>
{% endfor %}
ブログ リスト ページ テンプレートの全てのテキスト文字列は、フィールドで制御することをお勧めします。これにより、多言語ブログの作成が容易になり、コンテンツ作成者の操作性が向上します。

​
ブログ リスト ページ モジュールを作成する

コンテンツ作成者がモジュールをブログ リスト ページ内コンテンツの周囲（側面や上下など）に配置することを許可できます。これを有効にするには、ブログリストのforループを使用したブログ リスト モジュールを作成することをお勧めします。例については、CMSボイラープレートのブログ リスト ページ モジュールをご参照ください。 HubSpotは、サマリーの表示やキービジュアルを使用するためのブログ設定を提供していますが、これらの機能をモジュールに組み込むこともできます。モジュールへの組み込みにより、コンテンツ作成者はブログの設定ページへ切り替えることなく、ページエディター内で必要な機能を使用できるようになります。

​
ブログ執筆者、タグ、シンプル リスト ページ

HubSpotブログにはブログ記事とブログ リスト ページに加えて、ブログ執筆者用のページ、ブログ記事のタグ用のページ、シンプル リスト ページもあります。こうした追加ページは、ブログ リスト ページと同じテンプレートを使用してコンテンツが表示されます。
リストページのテンプレートはブログ執筆者、タグ、簡単なリストページでも共有されるため、テンプレートに公開された更新内容もこれらのページに適用されます。
追加ページのレイアウトを個別に構成するには、if文を使用して、各タイプのページのコンテンツを条件付きでレンダリングします。

​
Ifblog_author

標準的なHubSpotブログ リスト ページのマークアップには、if blog_authorステートメントが含まれます。このステートメントは、執筆者が公開した全ての記事を一覧にした執筆者の個別ページを表示する際に［true］と評価されます。ボイラープレートテンプレートには、執筆者の名前、プロフィール、およびソーシャル メディア アカウントが含まれています。 
{% if blog_author %}
  <div class="blog-header">
    <div class="blog-header__inner">
      {% if blog_author.avatar %}
      <div class="blog-header__author-avatar" style="background-image: url('{{ blog_author.avatar }}');"></div>
      {% endif %}
      <h1 class="blog-header__title">{{ blog_author.display_name }}</h1>
      <h4 class="blog-header__subtitle">{{ blog_author.bio }}</h4>
      {% if blog_author.has_social_profiles %}
        <div class="blog-header__author-social-links">
          {% if blog_author.website %}
            <a href="https://developers.hubspot.jp/docs{{ blog_author.website }}" target="_blank">
              {% icon name="link" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.facebook %}
            <a href="https://developers.hubspot.jp/docs{{ blog_author.facebook }}" target="_blank">
              {% icon name="facebook-f" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.linkedin %}
            <a href="https://developers.hubspot.jp/docs{{ blog_author.linkedin }}" target="_blank">
              {% icon name="linkedin-in" style="SOLID" width="10" %}
            </a>
          {% endif %}
          {% if blog_author.twitter %}
            <a href="https://developers.hubspot.jp/docs{{ blog_author.twitter }}" target="_blank">
              {% icon name="twitter" style="SOLID" width="10" %}
            </a>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
{% else %}

​
If tag

if tagステートメントを使用すると、ブログのトピックページにのみコードをレンダリングできます。訪問者がウェブサイト上でブログトピックをクリックすると、その値が表示されます。以下の例は、ページタイトル変数を使用してタグ リスト ページ上部にタグ名を自動出力するスニペットです。 
{% if tag %}
    <h3>Posts about {{ page_meta.html_title|split(" | ")|last }}</h3>
{% endif %}

​
If not simple_list_page

ブログ記事の一覧を表示するためにレンダリングされるブログ リスト ページには、標準のリストページとシンプル リスト ページの2種類があります。
  • 標準のリストページでは、記事リストのブログ設定で指定された記事の数だけレンダリングが反復し、それに応じてページ番号も付与されます。
  • シンプル リスト ページは全ての記事の一覧で、ページ番号には対応していません。シンプル リスト ページは、ブログ設定の記事数制限の影響を受けることなく、通常は直近200件のブログ記事へのリンクが格納されます。シンプル リスト ページのアドレスは、ブログURLのパスの末尾に/allを追加したものです。
if not simple_list_pageステートメントを使用して、シンプル リスト ページと標準のリストページのどちらをレンダリングするかを指定できます。このステートメントを簡略化したものを以下でご参照ください。
このif文ではロジックが反転している点にご注意ください。つまり、elseでシンプル リスト ビューを定義しています。必要に応じて、代わりにunless文を使用することもできます。
{% if not simple_list_page %}
    Iterated post markup for regular listing
{% else %}
    <h2 class="post-listing-simple"><a href="https://developers.hubspot.jp/docs{{content.absolute_url}}">{{ content.name }}</a></h2>
{% endif %}

​
リストのページ送り

ブログ リスト ページではページ番号が自動生成されます。リスト ページ テンプレートには、訪問者がブログ記事内でページを簡単に切り替えられるようにするロジックを含めることが可能です。ボイラープレートのブログでは、次のマークアップを使って数値によるシンプルなページ送りを実現しています。 
{% if contents.total_page_count > 1 %}
<div class="blog-pagination">
    {% set page_list = [-2, -1, 0, 1, 2] %}
    {% if contents.total_page_count - current_page_num == 1 %}{% set offset = -1 %}
    {% elif contents.total_page_count - current_page_num == 0 %}{% set offset = -2 %}
    {% elif current_page_num == 2 %}{% set offset = 1 %}
    {% elif current_page_num == 1 %}{% set offset = 2 %}
    {% else %}{% set offset = 0 %}{% endif %}

    <a class="blog-pagination__link blog-pagination__prev-link {{ "blog-pagination__prev-link--disabled" if !last_page_num }}" href="https://developers.hubspot.jp/docs{{ blog_page_link(last_page_num) }}">
    {% icon name="chevron-left" style="SOLID", width="13", no_wrapper=True %}
    Prev
    </a>
    {% for page in page_list %}
    {% set this_page = current_page_num + page + offset %}
    {% if this_page > 0 and this_page <= contents.total_page_count %}
        <a class="blog-pagination__link blog-pagination__number-link {{ "blog-pagination__link--active" if this_page == current_page_num }}" href="https://developers.hubspot.jp/docs{{ blog_page_link(this_page) }}">{{ this_page }}</a>
    {% endif %}
    {% endfor %}
    <a class="blog-pagination__link blog-pagination__next-link {{ "blog-pagination__next-link--disabled" if !next_page_num }}" href="https://developers.hubspot.jp/docs{{ blog_page_link(current_page_num + 1) }}">
    Next
    {% icon name="chevron-right" style="SOLID", width="13", no_wrapper=True %}
    </a>
</div>
{% endif %}

​
ボイラープレートマークアップ

以下で、ブログ記事とブログ リスト ページ テンプレートのボイラープレートマークアップをご覧ください。各セクションに記載されているように、GitHubのCMSボイラープレートでこのマークアップを表示することもできます。

​
記事テンプレートマークアップ

ブログ内の全てのブログ記事は、1つのブログテンプレートによって生成されます。 Contentは、リクエストされたブログ記事に関する情報を含む事前定義されたデータオブジェクトです。ボイラープレート記事は、次のマークアップを使ってレンダリングされます。 
<div class="content-wrapper">
  <div class="blog-post">
    <h1>{{ content.name }}</h1>
    <div class="blog-post__meta">
      <a href="https://developers.hubspot.jp/docs{{ blog_author_url(group.id, content.blog_post_author.slug) }}">
        {{ content.blog_post_author.display_name }}
      </a>
      <div class="blog-post__timestamp">
        {{ content.publish_date_localized }}
      </div>
    </div>
    <div class="blog-post__body">
      {{ content.post_body }}
    </div>
    {% if content.tag_list %}
    <div class="blog-post__tags">
      {% icon name="tag" style="SOLID" %}
      {% for tag in content.tag_list %}
        <a class="blog-post__tag-link" href="https://developers.hubspot.jp/docs{{ blog_tag_url(group.id, tag.slug) }}">{{ tag.name }}</a>{% if not loop.last %},{% endif %}
      {% endfor %}
    </div>
    {% endif %}
  </div>
  <div class="blog-comments">
    {% module "blog_comments" path="@hubspot/blog_comments", label="Blog Comments" %}
  </div>
</div>
また、ブログ記事の執筆者情報もcontentcontentデータの中に含まれます。 
<img alt="{{ content.blog_post_author.display_name }}" src="{{ content.blog_post_author.avatar }}">
<h3>Written by <a class="author-link" href="https://developers.hubspot.jp/docs{{ blog_author_url(group.id, content.blog_post_author.slug) }}">{{ content.blog_post_author.display_name }}</a></h3>
<p>{{ content.blog_post_author.bio }}</p>
{% if content.blog_post_author.has_social_profiles %}
    <div class="hs-author-social-section">
        <div class="hs-author-social-links">
            {% if content.blog_post_author.facebook %}
                <a href="https://developers.hubspot.jp/docs{{ content.blog_post_author.facebook }}" target="_blank" class="hs-author-social-link hs-social-facebook">Facebook</a>
            {% endif %}
            {% if content.blog_post_author.linkedin %}
                <a href="https://developers.hubspot.jp/docs{{ content.blog_post_author.linkedin }}" target="_blank" class="hs-author-social-link hs-social-linkedin">LinkedIn</a>
            {% endif %}
            {% if content.blog_post_author.twitter %}
                <a href="https://developers.hubspot.jp/docs{{ content.blog_post_author.twitter }}" target="_blank" class="hs-author-social-link hs-social-twitter">Twitter</a>
            {% endif %}
            {% if content.blog_post_author.google_plus %}
                <a href="https://developers.hubspot.jp/docs{{ content.blog_post_author.google_plus }}?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus">Google+</a>
            {% endif %}
        </div>
    </div>
{% endif %}

​
リスト ページ テンプレートのマークアップ

ボイラープレート ブログ リスト ページのコンテンツのforループは、次のマークアップによってレンダリングされます。 
{% for content in contents %}
    {# On the blog homepage the first post will be featured above older posts #}
    {% if (loop.first && current_page_num == 1 && !topic) %}
    <div class="blog-index__post blog-index__post--large">
        <a class="blog-index__post-image blog-index__post-image--large"
        {% if content.featured_image %}
            style="background-image: url('{{ content.featured_image }}')";
        {% endif %}
        href="https://developers.hubspot.jp/docs{{ content.absolute_url }}"></a>
        <div class="blog-index__post-content  blog-index__post-content--large">
        <h2><a href="https://developers.hubspot.jp/docs{{ content.absolute_url }}">{{ content.name }}</a></h2>
        {{ content.post_list_content }}
        </div>
    </div>
    {% else %}
    <div class="blog-index__post blog-index__post--small">
        <a class="blog-index__post-image blog-index__post-image--small"
        {% if content.featured_image %}
            style="background-image: url('{{ content.featured_image }}')";
        {% endif %}
        href="https://developers.hubspot.jp/docs{{ content.absolute_url }}"></a>
        <div class="blog-index__post-content  blog-index__post-content--small">
        <h2><a href="https://developers.hubspot.jp/docs{{ content.absolute_url }}">{{ content.name }}</a></h2>
        {{ content.post_list_content|truncatehtml(100) }}
        </div>
    </div>
    {% endif %}
{% endfor %}

​
関連コンテンツ