> ## 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.

# グローバルコンテンツ

> グローバルコンテンツは、一貫した情報表示のために複数のテンプレートで再利用可能なコンテンツです。例として、ウェブサイトのヘッダー、フッター、サイドバー、ロゴなどのコンポーネントがあります。

グローバルコンテンツとは、ウェブサイト全体で共有されるコンテンツです。一般的な例としては、ウェブサイトのヘッダー、フッター、サイドバーが挙げられます。開発者はどのコンポーネントをグローバルとして扱うかを指定するために、グローバルパーシャルを使用するか、モジュールをグローバルに指定します。HubSpotを使用すると、グローバルコンテンツを扱うコンテンツエディターは、グローバルコンテンツを編集し、全てのページで編集内容をプレビューする作業を簡単に行えます。グローバルコンテンツの編集方法については、HubSpotナレッジベースで[複数のテンプレートにわたってグローバルコンテンツを使用する方法](https://knowledge.hubspot.com/cms-general/use-global-content-across-multiple-templates)に関するナレッジベース記事を参照してください。

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/5Cdocs/global-content/global-content-editor-4.png" alt="グローバル コンテンツ エディター" />
</Frame>

## 概要

グローバルコンテンツの使用は、複数のページにわたって同じ情報を表示する場合に最も効果的です。例えば、以下に示すページの上部にあるヘッダーなど、ウェブサイトのヘッダーやフッターに使用できます。

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/hubspot-developers-header.png" alt="hubspot-developers-header" />
</Frame>

グローバルコンテンツは次のような領域にも使用できます。

* ウェブサイトのセクション別のセカンダリーナビゲーション
* 著作権のフッター（またはサブフッター）
* ブログ記事のサイドバー（最近の投稿、執筆者リストなどの表示に使用）

<Warning>
  グローバルコンテンツはウェブサイトの複数の場所で使用されるので、[アクセシビリティーを考慮してグローバルパーシャルとグローバルモジュールをデザインし、作成する](/cms/best-practices/improve-existing-sites/accessibility)ことが特に重要になります。
</Warning>

### グローバルパーシャルとグローバルモジュールの比較

開発者は、グローバルパーシャルとグローバルモジュールを作成できます。この2つの間の主な違いは次のとおりです。

* グローバルパーシャルは、HTMLとHubLを使用して作成されたテンプレートの一種であり、ウェブサイト全体にわたって再利用できます。典型的なパーシャルは、ウェブサイトのヘッダー、サイドバー、フッターです。
* グローバルモジュールは、ウェブサイト上の複数のページで使用可能な1つまたは複数のコンテンツ要素で構成されたモジュールです。典型的なグローバルモジュールとしては、ブログの配信登録フォーム、セカンダリーナビゲーション要素、Call-To-Action（CTA）などがあります。

グローバルパーシャル内にグローバルモジュールを含めることは避けてください。コンテンツの編集作業に悪影響を及ぼす可能性があります。

<Info>
  グローバルパーシャルとグローバルモジュールに含まれる全てのモジュールとフィールドは、[グローバル コンテンツ エディター](https://knowledge.hubspot.com/cms-general/use-global-content-across-multiple-templates)内で簡単に編集できます。
</Info>

## グローバルパーシャル

### グローバルパーシャルを作成する

グローバルパーシャルはテンプレートの一種であり、HubSpot CLIで以下に示す[createコマンド](https://developers.hubspot.jp/docs/guides/cms/tools/local-development-cli#create)を使用することで、ローカルに作成できます。

```shell theme={null}
hs create template <partial-file-name>
```

テンプレートのタイプを選択するように求められたら、`global partial`を選択します。

このコマンドを実行すると、指定したディレクトリーにテンプレートが作成され、そのHTMLファイルには以下のテンプレートアノテーションが含まれます。

```html theme={null}
<!--
  templateType: global_partial
  label: Page Header
-->
```

グローバル コンテンツ パーシャルのサンプルを確認するには、[GitHubにあるHubSpotのボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/master/src/templates/partials/header.html)を参照してください。

### グローバルパーシャルにドラッグ＆ドロップエリアを追加する

グローバルパーシャル内でコンテンツのドラッグ＆ドロップ機能を有効にするには、ページテンプレートで有効にする場合と同様に、`dnd_area`タグを追加します。詳しくは、[ドラッグ＆ドロップエリアのドキュメント](/cms/reference/hubl/tags/dnd-areas)を参照してください。

### 既存のテンプレートにグローバルパーシャルを追加する

既存のテンプレートのいずれかにグローバルパーシャルを追加するには、`global_partial` HubLタグを使用してパーシャルへのパスを参照します。以下に示しているのは、このタグを使用した[CMSボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/master/src/templates/layouts/base.html#L21)の例です。

```hubl theme={null}
{% global_partial path="../partials/header.html" %}
```

グローバルパーシャルが出力の場合は、グローバルパーシャルを`<div>`で囲みます。これは、そのコンテンツがグローバルパーシャルであることを識別するためにページエディターで使用されます。

```html theme={null}
<div data-global-resource-path="cms-theme-boilerplate/templates/partials/header.html">
  <!-- Your header.html code is output here -->
</div>
```

<Warning>
  \*\*注：\*\*テンプレートの`<head>`内では`global_partial`を使用しないでください。使用すると、無効なHTMLになります。

  ヘッダー内でグローバルパーシャルを使用するような場合は通常、代わりにグローバルモジュールで[`{%require_head%}`](/cms/reference/hubl/tags/standard-tags#require-head)を使用してカスタムコードをheadに挿入し、モジュールフィールドも追加する方法が適切です。
</Warning>

## グローバルモジュール

グローバルモジュールを作成するには、CLIを使用する他のモジュールを作成する場合と同様に、以下に示す`hs create`コマンドを実行します。

```shell theme={null}
hs create module <module_name>
```

グローバルモジュールは、モジュールの`meta.json`ファイル内にある`global`フラグによって区別されます。

```json theme={null}
// meta.json file
{
  "css_assets": [],
  "external_js": [],
  "global": true,
  "help_text": "",
  "host_template_types": ["PAGE"],
  "js_assets": [],
  "other_assets": [],
  "smart_type": "NOT_SMART",
  "tags": [],
  "is_available_for_new_content": false
}
```

また、[HubSpotでデザインマネージャーを使用してグローバルモジュールを作成](https://knowledge.hubspot.com/cos-general/create-and-edit-modules)することもできます。

モジュールの操作方法についての詳細は、以下の関連リソースをご確認ください。

* [モジュールの概要](https://developers.hubspot.jp/docs/guides/cms/content/modules/overview)
* [HubSpotの既定のモジュール](/cms/reference/modules/default-modules)
* [モジュールを構成する](/cms/reference/modules/configuration)
* [テンプレートでモジュールを使用する](/cms/reference/modules/using-modules-in-templates)
