> ## 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でテーマを使用します。 

テーマとは、開発者向けのアセットから成る、移植可能で自己完結型のパッケージであり、これらのアセットを連動させて柔軟なコンテンツ編集操作を可能にするように設計されています。テーマには、テンプレート、モジュール、CSSファイル、JavaScriptファイル、画像などを組み込むことができます。開発者はテーマを使用することで、モジュールフィールドと似た一連のテーマフィールドを作成できます。制作担当者はこのテーマフィールドを使用して、CSSを編集せずにウェブサイト全体のスタイルを制御できるようになります。

HubLは、テーマのCSS全体のテーマフィールドの値にアクセスする際に活用できます。次に制作担当者はテーマエディターを使用して、テーマフィールドの値を変更し、テーマに含まれる既存のテンプレートに対する変更をプレビューしてから、その変更を公開できます。

<Frame>
  <img src="https://www.hubspot.com/hubfs/cms-themes-animation.gif" alt="テーマの要素の色を選択する方法を説明する、テーマ設定の編集UIのアニメーション" />
</Frame>

このドキュメントでは、[HubSpotのCMSボイラープレート](/cms/start-building/building-blocks/themes/hubspot-cms-boilerplate)に基づいて最初のテーマを作成する方法を説明します。テーマの詳細については、[テーマのリファレンスドキュメント](/cms/start-building/building-blocks/overview)を参照してください。

<Tip>
  CMS Hubを使って初めて開発する場合には、以下のチュートリアルをお勧めします。

  [CMS Hub開発のクイックスタート](https://developers.hubspot.jp/docs/guides/cms/quickstart)
</Tip>

<Warning>
  \*\*注：\*\*開始する前に、[HubSpot CLI](/developer-tooling/local-development/hubspot-cli/install-the-cli)をインストールする必要があります。
</Warning>

## 1.ボイラープレート テーマ プロジェクトを開始する

`hs create website-theme my-website-theme`を実行します。これにより、`my-website-theme`ディレクトリーが作成されて、そこに[CMSテーマボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate)のファイルが格納されます。

<Steps>
  <Step title="CMSボイラープレートをHubSpotアカウントにアップロードする">
    `hs upload my-website-theme my-website-theme`を実行します。これにより、ボイラープレートがアカウントのデザインマネージャーにアップロードされ、「*my-website-theme*」というタイトルのフォルダーにアップロードされます。
  </Step>

  <Step title="ページを作成する">
    アップロードしたテーマからページを作成するには、次の手順に従います。

    * HubSpotアカウントで、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］に移動します。
    * 右上にある［作成］をクリックし、［ウェブサイトページ］を選択します。
    * ダイアログボックスで、ページを公開する**ドメイン**を選択し、**ページ名**を入力します。［ページを作成］をクリックします。

    <Frame>
      <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023/create-page-from-dashboard.gif" alt="create-page-from-dashboard" />
    </Frame>

    * テンプレート選択画面のページ上部に、[有効なテーマ](https://knowledge.hubspot.com/website-pages/use-themes#use-an-active-theme)に属するテンプレートが表示されます。
      * 有効なテーマをまだ選択していない場合は、［CMSテーマボイラープレート］にカーソルを合わせ、［有効なテーマに設定］をクリックします。
      * 既に有効なテーマを設定している場合は、**テーマセレクター**のドロップダウンメニューをクリックし、新しいテーマを選択してから［テーマを変更］を選択します。次に、［CMSテーマボイラープレート］にカーソルを合わせて、［有効なテーマに設定］をクリックします。次の画面で、テンプレートを選択します。

    <Frame>
      <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023/theme-selector.gif" alt="theme-selector" />
    </Frame>

    これにより、テーマのフィールドを編集できるページエディターが表示されます。
  </Step>

  <Step title="テーマフィールドを編集する">
    * ページエディターの左のサイドバーで、［テーマ］タブをクリックします。
      * ［テーマ］タブで、［テーマ設定を編集］をクリックします。ここで、既存のテーマ設定を変更できます。テーマ設定への変更を公開すると、この更新したテーマが使用されている全てのページのスタイルが更新されます。

    <Frame>
      <img src="https://www.hubspot.com/hubfs/Knowledge_Base_2023/edit-theme-settings.gif" alt="edit-theme-settings" />
    </Frame>
  </Step>

  <Step title="ローカルでの変更に向けて準備する">
    ターミナルに戻り、`hs watch my-website-theme my-website-theme`を実行します。この[コマンド](/developer-tooling/local-development/hubspot-cli/install-the-cli)は、ローカルディレクトリーを監視し、以後、ファイルが保存されると変更内容をHubSpotアカウントに自動的にアップロードします。
  </Step>

  <Step title="テーマフィールドを追加する">
    ローカルでの変更が監視されるようになりました。新しいテーマフィールドを追加します。

    * エディターで`fields.json`ファイルを開きます。これは、テーマエディターのサイドバーで利用可能なフィールドを制御するためのファイルです。フッターの高さを指定するための新しい[フィールド](/cms/start-building/building-blocks/overview#fields-json)を追加します。
    * ファイルの末尾近くにある`footer`グループを見つけます。
    * 次のコードをコピーし、ファイル内のfooterグループの子配列に含まれる最初の項目の上にJSONを貼り付けます。

    ```json theme={null}
    // fields.json
          {
          "id" : "",
          "name" : "height",
          "label" : "Footer height",
          "required" : false,
          "locked" : false,
          "display" : "text",
          "step" : 1,
          "type" : "number",
          "min" : 10,
          "max" : 900,
          "help_text":"This footer will expand in height to accomodate any content added to the footer. You are setting the minimum height in px",
          "default" : 100
          },
    ```

    * `fields.json`を保存し、HubSpotでテーマのプレビューアーを再読み込みします。左のサイドバーに新しいフィールドが表示されます。
  </Step>

  <Step title="CSSでフィールドを参照する">
    * コードエディターで、`theme-overrides.css`ファイルを開きます。次に、`.footer`のCSSセレクターを見つけます。続いて、このセレクターに`min-height`を追加します。

      * テーマ内の値にアクセスするには、`theme`オブジェクトを使用します。例えば`{{ theme.footer.height }}`を使用して、高さフィールドに設定された高さの値にアクセスします。
      * theme-overrides.css内の`.footer`宣言を次のコードで置き換えます。

      ```css theme={null}
      .footer {
        background-color: {{ footer_bg_color }};
        min-height: {{theme.footer.height}}px;
      }
      ```

      * `theme-overrides.css`を保存し、HubSpotアカウントにアップロードします。
  </Step>

  <Step title="変更をテストする">
    テーマエディターに戻り、新しいフィールドをフッターに表示するためページを再読み込みします。高さの値を変更すると、プレビューに直ちに反映されます。フッターに背景色を設定すると、変化が分かりやすくなります。
  </Step>
</Steps>

## 次のステップ

テーマの作成、更新が完了しました。ここからは、テーマフィールドをさらに作成してプロジェクト用にカスタマイズできます。他のカスタマイズオプションについては、[テーマの概要](/cms/start-building/building-blocks/overview)を参照してください。テーマを作成する際には、[HubSpot CMS上のウェブサイトを最適化する](/cms/best-practices/testing-staging-performance/speed)方法を確認すると参考になります。

HubSpot CMS Hubには[既定のテーマ](/cms/start-building/building-blocks/themes/default-themes)が複数用意されています。これらのテーマを表示、複製、更新するなどして、テーマの具体的な使用方法について学習できます。

テーマについて把握したら、[最初のカスタムモジュールを作成する方法](/cms/start-building/building-blocks/modules/overview)を確認してください。