> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# related_blog_posts HubLタグを使用して関連するブログ記事のリストを作成する

> Related_blog_posts HubLタグを使用すると、さまざまなパラメーターに基づいて関連するブログ記事の動的なリストを作成できます。執筆者、記事パス、および公開日による絞り込み機能を使用して、複数のブログにまたがる記事のリストを生成できます。

[related\_blog\_posts](/cms/reference/hubl/tags/standard-tags#blog-related-posts) HubLタグを使用すると、さまざまなパラメーターに基づいて関連するブログ記事の動的なリストを作成できます。執筆者、記事パス、および公開日による絞り込み機能を使用して、複数のブログにまたがる記事のリストを生成できます。開発者は、マクロを使用してモジュールのHTML出力を指定することもできます。このHubLタグはブログ記事とページの両方で使用できます。このチュートリアルでは、related\_blog\_posts HubLタグのパラメーターと使用方法について説明します。

<Info>
  `related_blog_posts` HubLタグは、記事／ページ側で編集可能なモジュールを生成せず、HubLで完全に設定されることに注意してください。
</Info>

## パラメーター

記事のリストは、以下のパラメーターに一致する記事（このHubLタグが表示された記事に関連する記事）と設定されたパラメーター値を比較して得られた関連性スコアから生成されます。必須のパラメーターはありませんが、パラメーターを指定することで、返される記事を細かく制御できます。カンマ区切りパラメーターの場合は、設定する値が多いほど返されるリストの範囲が広がります。`post_formatter`パラメーターを使用すると、モジュールのHTML出力を生成する[マクロ](https://developers.hubspot.jp/docs/cms/hubl/variables-macros-syntax#macros)を指定できます。パラメーターの完全なリストと既定のHTML出力の例については、[related\_blog\_posts](/cms/reference/hubl/tags/standard-tags#blog-related-posts)の仕様を参照してください。

| Parameter            | Type                 | Description                                                                                                                                                                                                                                                                            | Default |
| -------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| `limit`              | number               | リストするブログ記事の最大数。                                                                                                                                                                                                                                                                        | `3`     |
| `blog_ids`           | 'default' or blog id | リストする記事を含むブログのID。                                                                                                                                                                                                                                                                      | `none`  |
| `tags`               | String               | 記事に関連性があるかどうかを判定するために使用するタグ（カンマ区切り）。ブログ記事にこれらのタグのいずれかまたは類似のタグがある場合、記事の関連性が高くなり、リストでのランキングが向上します。                                                                                                                                                                                       | `none`  |
| `blog_authors`       | String               | リストする記事の執筆者の名前（カンマ区切り）                                                                                                                                                                                                                                                                 | `none`  |
| `blog_post_ids`      | String               | リストする関連ブログ記事の検索に使用するブログ記事ID（カンマ区切り）。このパラメーターは、ウィジェットをページに表示する場合にのみ使用してください。ブログ記事の場合は既定で、ウィジェットが表示される記事になります。                                                                                                                                                                           | `none`  |
| `post_formatter`     | String               | 返されるブログ記事を表示するためのカスタムマクロの名前。このマクロには、フォーマットする記事オブジェクト、ブログ記事の反復数、および結果に含まれるブログ記事の合計数という3つのパラメーターが渡されます。指定されていないか、「default」に設定された場合は、組み込みのフォーマッターを使用して各記事がフォーマットされます。<br /><br />**注：post\_formatterパラメーターの代わりに下のcallbackパラメーターを使用することをお勧めします。タグのHTMLのレンダリングが速くなり、ページの読み込み時間が短縮されるためです。** | `none`  |
| `callback`           | String               | 返されるブログ記事をレンダリングするためのJavaScript関数の名前。関数に、形式を設定するブログ記事オブジェクトの配列が渡されます。callbackパラメーターとpost\_formatterパラメーターのどちらも指定されていない場合、タグは既定の形式のHTMLを生成します。                                                                                                                                          | `none`  |
| `path_prefixes`      | String               | リストする記事のURLパスまたはサブディレクトリー（カンマ区切り）。ブログ記事のパスに類似するプレフィックスがある場合は、記事の関連性が高くなり、リストでのランキングが向上します。                                                                                                                                                                                             | `none`  |
| `start_date`         | date/time            | ある日時より後に公開された記事に絞り込むことができます。                                                                                                                                                                                                                                                           | `none`  |
| `end_date`           | Date/Time            | ある日時より前に公開された記事に絞り込むことができます。                                                                                                                                                                                                                                                           | `False` |
| `blog_post_override` | String               | 他のパラメーター値やフィルターに関係なく、返されたリストに常に表示されるブログ記事のID（カンマ区切り）。                                                                                                                                                                                                                                  | `none`  |

<Warning>
  ページの読み込みを高速化するために、`post_formatter`パラメーターではなく`callback`パラメーターを使用することを強くお勧めします。
</Warning>

<Info>
  1つの記事に`related_blog_posts` HubLタグを使用する場合は、`blog_post_ids`パラメーターを指定しないでください。ブログ記事の場合は既定で、ウィジェットが表示される記事になります。
</Info>

## related\_blog\_posts HubLタグの使用例

このタグを使用してウェブサイトを強化する方法の例を以下に示します。

### 複数のブログから特定の執筆者による記事を表示する

この例では、2つの異なるブログから、指定された3人の`blog_authors`（ブログ執筆者）によって書かれた記事のリストを生成します。

```hubl theme={null}
{% related_blog_posts blog_ids="3241539189,3261083894", limit=6, blog_authors="John Smith,Joe Smith,Frank Smith" %}
```

### 「sales enablement」タグを含む記事を、公開日の期間を限定して表示する

この例では、特定のブログ記事に関連し、「sales enablement」タグを含む10件の記事のリストを、公開日の期間を限定して作成します。この例では、`blog_post_ids`パラメーターをページで使用するために指定します。

```hubl theme={null}
{% related_blog_posts blog_post_ids="3267910554", limit=10, tags="sales enablement", start_date="2018-02-05", end_date="2018-06-10" %}
```

### JSコールバックを使用する記事を表示してHTML出力を制御する

この例では、`callback`パラメーターを使用して記事リストのHTML出力を制御することにより、5件の記事のリストを生成します。（[マクロ](/cms/reference/hubl/variables-macros-syntax#macros)を使用した`post_formatter`パラメーターを使用しない方法。）

```hubl theme={null}
{% related_blog_posts limit=5, callback="blog_post_formatter" %}

<script>
  var blog_post_formatter = function(blogposts) {

    var formatted = "<div>";
    for (var i = 0; i < blogposts.length; i++) {
      var blogpost = blogposts[i];
      formatted += '<div class="related-blog-item">';
      formatted += `<span>Related Post ${i + 1}/${blogposts.length}</span><br>`;
      formatted += `<a class="related-blog-title" href="https://developers.hubspot.jp/docs${blogpost.url}"><span>${blogpost.name}</span></a>`;
      formatted += `<div class="hs-related-blog-byline">by <span class="related-blog-author">${blogpost.blogAuthor.fullName}</span><span class="related-blog-posted-at"> posted on </span><span class="related-blog-date">${new Date(blogpost.publishDate).toLocaleDateString()}</span></div>`;
      formatted += `<p class="related-blog-post-summary">${blogpost.postSummary}<a href="https://developers.hubspot.jp/docs${blogpost.url}">Read more</a></p>`;
      formatted += '<div class="related-blog-tags">';
      if (blogpost.tagList.length > 0) {
        formatted += `Tags: ${blogpost.tagList.map(tag => tag.label).join(", ")}`;
      }
      formatted += '</div>';

      if (blogpost.featuredImage) {
        formatted += `<img src="${blogpost.featuredImage}" alt="${blogpost.featuredImageAltText}">`;
      }
      formatted += '</div>';
    }
    formatted += '</div>';
    return formatted;
  }
</script>
```