サポートされる製品
次のいずれかの製品またはそれ以上が必要です。
最終更新日: 2025年8月28日
HubSpotのブログは、ブログ リスト ページと個別のブログ記事で構成されます。ブログ リスト ページ テンプレートは個別のブログ記事をリスト化するために使用されるほか、執筆者およびタグのリストページをレンダリングするためにも使用されます。リストページ用とブログ記事用にそれぞれ個別のテンプレートを作成することも、両方を含めて全てのページをレンダリングする共通のテンプレートを作成することも可能です。
この記事では、ブログテンプレートのマークアップ、テンプレートを構成する要素、そしてカスタマイズのオプションについて説明します。
リストページと記事の共通テンプレートを作成する
リストページと記事の両方をレンダリングする共通のテンプレートを作成するには、テンプレートファイルの先頭にtemplateType: blog
アノテーションを追加します。共通のテンプレートを両方のレンダリングに使用する場合は、if文を使用して、ユーザーがリストページと個別の記事のどちらを表示しているかを評価します。デザインマネージャーのドラッグ&ドロップレイアウトを使用している場合、ブログ コンテンツ モジュール ボタンのUIにこのif
文が組み込まれます。
if is_listing_view
ステートメントを使用すると、記事とリストのコードを別々に書くことができます。
リストページ用と記事用に個別のテンプレートを作成する
ブログ記事とリストページに別々のテンプレートを用意することも可能です。個別のテンプレートを使用することにより、開発者はコードがすっきりして読みやすく、コンテンツ作成者はテンプレートを選びやすくなります。共通のテンプレートでは先頭にtemplateType: blog
アノテーションを挿入しますが、各ページ用に個別のテンプレートを作成する場合はそれに代わり、テンプレートの先頭にそれぞれ以下のアノテーションを追加します。
- ブログ記事テンプレート
templateType: blog_post
- ブログ リスト テンプレート
templateType: blog_listing

is_listing_view
チェックは必要ありません。代わりに、アカウントのブログ設定で個別のテンプレートを手動で選択します。
また、共通のブログテンプレートを、リストページ用もしくは記事用のテンプレートに移行することも可能です。
リスト ページ テンプレート
テンプレートにtemplateType: blog_listing
アノテーションを挿入すると、[ブログ設定]の下のセクションでリストページ用のテンプレートとして選択できるようになります。コンテンツ作成者はこのテンプレートタイプを使用して、ページエディター内でリストページを編集することも可能です。さらに、テンプレートにドラッグ&ドロップエリアも含めることで、他のCMSページと同様にページエディターにおけるモジュールの追加や削除が可能になります。ドラッグ&ドロップエリアの追加例に関して、詳しくはCMSボイラープレートのブログテンプレートをご覧ください。
記事のリストは、ブログ記事を反復処理するforループによって生成されます。contents
は、そのブログに含まれる全ての記事を含む事前定義されたコンテンツシーケンスです。
ブログ リスト ページ テンプレートの全てのテキスト文字列は、フィールドで制御することをお勧めします。これにより、多言語ブログの作成が容易になり、コンテンツ作成者の操作性が向上します。
ブログ リスト ページ モジュールを作成する
コンテンツ作成者がモジュールをブログ リスト ページ内コンテンツの周囲(側面や上下など)に配置することを許可できます。これを有効にするには、ブログリストのforループを使用したブログ リスト モジュールを作成することをお勧めします。例については、CMSボイラープレートのブログ リスト ページ モジュールをご参照ください。 HubSpotは、サマリーの表示やキービジュアルを使用するためのブログ設定を提供していますが、これらの機能をモジュールに組み込むこともできます。モジュールへの組み込みにより、コンテンツ作成者はブログの設定ページへ切り替えることなく、ページエディター内で必要な機能を使用できるようになります。ブログ執筆者、タグ、シンプル リスト ページ
HubSpotブログにはブログ記事とブログ リスト ページに加えて、ブログ執筆者用のページ、ブログ記事のタグ用のページ、シンプル リスト ページもあります。こうした追加ページは、ブログ リスト ページと同じテンプレートを使用してコンテンツが表示されます。リストページのテンプレートはブログ執筆者、タグ、簡単なリストページでも共有されるため、テンプレートに公開された更新内容もこれらのページに適用されます。
if
文を使用して、各タイプのページのコンテンツを条件付きでレンダリングします。
Ifblog_author
標準的なHubSpotブログ リスト ページのマークアップには、if blog_author
ステートメントが含まれます。このステートメントは、執筆者が公開した全ての記事を一覧にした執筆者の個別ページを表示する際に[true]と評価されます。ボイラープレートテンプレートには、執筆者の名前、プロフィール、およびソーシャル メディア アカウントが含まれています。
If tag
if tag
ステートメントを使用すると、ブログのトピックページにのみコードをレンダリングできます。訪問者がウェブサイト上でブログトピックをクリックすると、その値が表示されます。以下の例は、ページタイトル変数を使用してタグ リスト ページ上部にタグ名を自動出力するスニペットです。
If not simple_list_page
ブログ記事の一覧を表示するためにレンダリングされるブログ リスト ページには、標準のリストページとシンプル リスト ページの2種類があります。- 標準のリストページでは、記事リストのブログ設定で指定された記事の数だけレンダリングが反復し、それに応じてページ番号も付与されます。
- シンプル リスト ページは全ての記事の一覧で、ページ番号には対応していません。シンプル リスト ページは、ブログ設定の記事数制限の影響を受けることなく、通常は直近200件のブログ記事へのリンクが格納されます。シンプル リスト ページのアドレスは、ブログURLのパスの末尾に
/all
を追加したものです。
if not simple_list_page
ステートメントを使用して、シンプル リスト ページと標準のリストページのどちらをレンダリングするかを指定できます。このステートメントを簡略化したものを以下でご参照ください。
この
if
文ではロジックが反転している点にご注意ください。つまり、else
でシンプル リスト ビューを定義しています。必要に応じて、代わりにunless文を使用することもできます。リストのページ送り
ブログ リスト ページではページ番号が自動生成されます。リスト ページ テンプレートには、訪問者がブログ記事内でページを簡単に切り替えられるようにするロジックを含めることが可能です。ボイラープレートのブログでは、次のマークアップを使って数値によるシンプルなページ送りを実現しています。ボイラープレートマークアップ
以下で、ブログ記事とブログ リスト ページ テンプレートのボイラープレートマークアップをご覧ください。各セクションに記載されているように、GitHubのCMSボイラープレートでこのマークアップを表示することもできます。記事テンプレートマークアップ
ブログ内の全てのブログ記事は、1つのブログテンプレートによって生成されます。Content
は、リクエストされたブログ記事に関する情報を含む事前定義されたデータオブジェクトです。ボイラープレート記事は、次のマークアップを使ってレンダリングされます。
content
contentデータの中に含まれます。