> ## 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 CMSテーマの作成について紹介します。 

テーマは、移植可能な形式に統合されたさまざまな開発アセットであり、柔軟なコンテンツ編集環境の提供に役立ちます。[HubSpot CLIを使用してローカル環境でテーマを作成](/developer-tooling/local-development/hubspot-cli/install-the-cli)する際には、使い慣れたツール、テクノロジー、ワークフローを使用できます。テーマと、テーマ内の全てのファイルも、環境間およびアカウント間で移植可能です。テーマの開発方法に関する動画については、以下のHubSpotアカデミーの動画をご覧ください。

<HubspotVideoPlayer videoId="172844605010" />

## パッケージとしてのテーマ

テーマはパッケージであり、HubSpotアプリ全体に適用されるので、効率的なコンテンツ作成が可能になります。開発者はテーマを使用して、制作担当者向けのデザインシステムを構築できます。柔軟なテーマに、一定の基準を組み込んでビジネスニーズに合わせることもできます。

### ページの作成

制作担当者が新しいページの構築を始めるとき、ページ作成の出発点にするテーマを選択し、そのテーマ内のテンプレートを選択して開始するよう指示されます。

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/theme%20selection.gif" alt="HubSpot内でのテーマの選択" />
</Frame>

テーマのプレビュー画像などのテーマ設定は、[theme.jsonファイル](#theme-json)に設定されます。

### テーマフィールド

開発者はテーマを使ってモジュールフィールドに類似した[テーマフィールド](#fields-json)のセットを作成できます。これにより制作担当者は、開発者がデザインしたさまざまなノブやダイヤルを調整し、CSSを編集せずにウェブサイト全体のスタイルを制御できます。開発者はCSS全体の[テーマフィールドの値にHubLを使用してアクセス](#using-theme-field-values)します。制作担当者はテーマエディターを使用して、テーマフィールドの値を変更し、テーマに含まれる既存のテンプレートに対する変更をプレビューしてから、その変更を公開します。

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/themes.gif" alt="テーマ" />
</Frame>

テーマフィールドは[テーマのfields.jsonファイル](#fields-json)で決まります。

[テストモード](/cms/start-building/building-blocks/overview#test-mode)でテーマを編集するときには、テーマの設定JSONをコピーすることもできます。こうすると、更新内容をテーマのローカル`fields.json`ファイルに貼り付けることができます。

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/copy-theme-settings-test-mode.png" alt="copy-theme-settings-test-mode" />
</Frame>

### テーマモジュール

テーマ内のモジュールは、テーマ内のテンプレート内で使用するように設計する必要があります。テーマモジュールはコンテンツエディター上で強調表示されるので、制作担当者は作成しているページにそのページのコンテキストで正しく機能するようにデザインされたモジュールを素早く簡単に追加できます。既定のモジュールおよび残りのモジュールは引き続きHubSpotアカウントで利用できます。

<Frame>
  <img src="https://cdn2.hubspot.net/hubfs/53/theme%20modules.png" alt="テーマ内のテーマモジュール" />
</Frame>

テーマを開発するときに、[ページエディターでモジュールとセクションを非表示](/cms/start-building/building-blocks/modules/hide-modules-and-sections)にできます。こうすると、より合理的なコンテンツ作成エクスペリエンスが実現します。

## テーマファイルの構造

テーマはファイルを含む1つのディレクトリーです。親テーマフォルダーのサブディレクトリー内にはHTML、CSS、JavaScriptファイル、モジュールなどのファイルを含めることができ、任意の方法で整理できます。テーマを作成するには、`theme.json`と`fields.json`の2つのJSONファイルが必要です。これらのファイルをルート テーマ フォルダーに含める必要があります。

サンプルから始めるには、[HubSpot CMSボイラーテンプレート](https://github.com/HubSpot/cms-theme-boilerplate)を参照してください。

<Frame>
  <img src="https://designers.hubspot.com/hs-fs/hubfs/theme%20file%20structure.png?width=599&height=452&name=theme%20file%20structure.png" alt="テーマファイルの構造" />
</Frame>

<Info>
  現時点では、.jsonファイルの作成とHubSpotアカウントへのアップロードは[ローカル開発ツール](/developer-tooling/local-development/hubspot-cli/install-the-cli)を通じてのみ行えます。
</Info>

### theme.json

`theme.json`ファイルには、テーマの読み取り可能なラベル、プレビュースクリーンショット、テーマの動作のためのさまざまな設定など、テーマディレクトリーのメタ情報が含まれます。`theme.json`ファイルの例を次に示します。

```json theme={null}
// theme.json
{
  "label": "Cool Theme",
  "preview_path": "./templates/home-page.html",
  "screenshot_path": "./images/templates/homepage.jpg",
  "enable_domain_stylesheets": false,
  "version": "1.0",
  "author": {
    "name": "Jon McLaren",
    "email": "noreply@hubspot.com",
    "url": "https://theme-provider.com/"
  },
  "documentation_url": "https://theme-provider.com/cool-theme/documentation",
  "license": "./license.txt",
  "example_url": "https://theme-provider.com/cool-theme/demo",
  "is_available_for_new_content": true
}
```

| パラメーター                         | タイプ    | 説明                                                                                                                                           |
| ------------------------------ | ------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
| `label`                        | 文字列    | テーマの読み取り可能なラベル。テンプレート選択画面やテーマエディターなど、HubSpotアプリ全体にわたってテーマが表示されるさまざまな箇所で使用されます。                                                               |
| `preview_path`                 | 文字列    | テーマ内のテンプレートファイル（既定のテンプレート）への相対パス。これはテーマエディターでテーマをプレビューする際に使用されます。                                                                            |
| `screenshot_path`              | 文字列    | 画像ファイルへの相対パス。この画像は、テーマが選択されるさまざまな箇所（テンプレート選択画面など）で、テーマの外観を示すスナップショットの提供に使用されます。                                                              |
| `enable_domain_stylesheets`    | ブール値   | ウェブサイト設定でドメインに添付されたスタイルシートをテーマ内のテンプレートに含めるかどうかを指定します。既定値は`false`です。                                                                          |
| `version`                      | 文字列    | `.`に対応した整数のバージョン番号。                                                                                                                          |
| `Author`                       | オブジェクト | テーマプロバイダーとしての開発者自身に関する情報を提示するオブジェクト。`name` <br />プロバイダーの名前。<br />`email` <br />プロバイダーのサポート担当のEメールアドレス。<br />`url` <br />プロバイダーのウェブサイト。<br /> |
| `documentation_url`            | 文字列    | テーマドキュメントのリンク。                                                                                                                               |
| `example_url`                  | 文字列    | テーマの実例リンク。                                                                                                                                   |
| `license`                      | 文字列    | 有効な[SPDX ID](https://spdx.org/licenses/)またはテーマ内のライセンスの相対パス。このライセンスは、テーマの作成者に対してどのような使用と変更を許可するかを規定します。マーケットプレイスに提出する場合に便利です。                 |
| `is_available_for_new_content` | ブール値   | 制作担当者のページにテーマが選択対象として表示されるかどうかを指定するブール値。既定値は`true`です。                                                                                        |

### fields.json

`fields.json`ファイルは、テーマエディターで利用可能なフィールドとフィールドグループ（[スタイルフィールド](https://developers.hubspot.jp/docs/guides/cms/content/fields/overview#style-fields)を含む）を制御します。含めるフィールドは、ページエディターでの制作担当者による制御をどの程度可能にするかに応じて異なります。テーマ内で利用可能なフィールドの数は、モジュールと比べて限られています。これは、[グローバルコンテンツ](/cms/start-building/building-blocks/global-content)がテーマのコンテンツに適している一方、テーマフィールドはスタイルオプションとして最適なためです。

例えば、テーマの`field.json`にサイトのタグラインのテキストフィールドを追加する代わりに、それをグローバルモジュールとして追加します。これにより、制作担当者はテーマエディターではなくページエディター内でタグラインを更新できるようになります。

テーマ内で使用できるフィールドを次に示します。

* [ブール値](/cms/reference/fields/module-theme-fields#boolean)
* [境界線](/cms/reference/fields/module-theme-fields#border)
* [選択](/cms/reference/fields/module-theme-fields#choice)
* [カラー](/cms/reference/fields/module-theme-fields#color)
* [フォント](/cms/reference/fields/module-theme-fields#font)
* [画像](/cms/reference/fields/module-theme-fields#image)
* [数値](/cms/reference/fields/module-theme-fields#number)
* [間隔](/cms/reference/fields/module-theme-fields#spacing)

テーマフィールドで使用できるオプションに関する包括的なドキュメントについては、[モジュールとテーマフィールドのドキュメント](/cms/reference/fields/module-theme-fields)を参照してください。

#### テーマのフィールド値の使用

フィールド値にアクセスするには、`fields.json`の値へのパスにthemeを使用したドット表記とプレフィックスを使用します。スタイルシートでテーマフィールド値を`{{ theme.path.to.value }}`のような構文で使用できます。例えば、以下のフォントフィールドで説明します。

```json theme={null}
// fields.json
[
  {
    "type": "group",
    "name": "typography",
    "label": "Typography",
    "children": [
      {
        "type": "font",
        "name": "h1_font",
        "label": "Heading 1",
        "load_external_fonts": true,
        "default": {
          "color": "#000",
          "font": "Merriweather",
          "font_set": "GOOGLE",
          "variant": "700",
          "size": "48"
        }
      }
    ]
  }
]
```

これを次のようなCSSで参照します。

```css theme={null}
h1 {
 font-size: {{ theme.typography.h1_font.size }}px;
 font-family: {{ theme.typography.h1_font.font }};
 color: {{ theme.typography.h1_font.color }};
 text-decoration: {{ theme.typography.h1_font.styles.text-decoration }};
 font-style: {{ theme.typography.h1_font.styles.font-style }};
 font-weight: {{ theme.typography.h1_font.styles.font-weight }};
}
```

## テーマのプレビュー

開発者は、テーマフィールドの正常な動作をテストする必要が生じる場合がありますが、実際のページに影響を与えないようにもする必要があります。ここでテーマ テスト モードを使います。

### テストモード

<DndSection>
  <DndModule numCols={6}>
    <div>
      テストモードを使用するとテーマのフィールドを操作できる安全な環境が提供され、期待どおりに機能することを確かめることができます。インターフェイスは[制作担当者が表示できるテーマプレビュー／エディター](https://knowledge.hubspot.com/website-pages/edit-your-global-theme-settings#edit-theme-settings)とまったく同様の表示ですが、実際のウェブサイトの設定は変更されないので安心です。誤ってテーマ設定が更新されないように保護されるため、テストモードでは公開がブロックされています。テストモードになっているかどうかはアドレスバーに`?testmode=true`と表示されることで分かります。また、テーマエディターのヘッダーにはテスト モード アイコンが表示されます。
    </div>
  </DndModule>

  <DndModule numCols={6}>
    <Frame>
      <img src="https://f.hubspotusercontent00.net/hubfs/53/theme-test-mode.png" alt="テーマテスト／プレビューモード" />
    </Frame>
  </DndModule>
</DndSection>

テストモードを有効にするには、次の2つの方法があります。

* デザインマネージャーからテストモードを有効にするには：

  * デザインマネージャーのファインダーで、該当する**テーマ**を選択します。
  * 左側のサイドバーの上部にある［プレビュー］ボタンをクリックします。

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/copy-theme-settings-test-mode-design-manager%20(1).png" alt="copy-theme-settings-test-mode-design-manager (1)" />
</Frame>

* ページエディターからテストモードを有効にするには：

  * ページエディターで、左側のサイドバーの［デザイン］タブをクリックして、［テーマ設定を編集］をクリックします。

<Frame>
  <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2021/Developer/page-editor-edit-theme.png" alt="page-editor-edit-theme" />
</Frame>

* URLに`?testmode=true`を追加して、**Enter**キーを押します。その後、テストモードになります。

ページエディター内でテーマ設定を開く方法もあります。開いたら次に、クエリーパラメーター`?testmode=true`をアドレスバーのURLに追加します。

## 関連リソース

* [テーマを使ってみる](/cms/start-building/building-blocks/themes/getting-started)
* [テーマ機能を既存のサイトに追加する方法](/cms/best-practices/improve-existing-sites/add-theme-features-to-existing-sites)
* [HubSpotテーマボイラープレート](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)