最終更新日: 2025年8月28日
テーマとは、開発者向けのアセットから成る、移植可能で自己完結型のパッケージであり、これらのアセットを連動させて柔軟なコンテンツ編集操作を可能にするように設計されています。テーマには、テンプレート、モジュール、CSSファイル、JavaScriptファイル、画像などを組み込むことができます。開発者はテーマを使用することで、モジュールフィールドと似た一連のテーマフィールドを作成できます。制作担当者はこのテーマフィールドを使用して、CSSを編集せずにウェブサイト全体のスタイルを制御できるようになります。 HubLは、テーマのCSS全体のテーマフィールドの値にアクセスする際に活用できます。次に制作担当者はテーマエディターを使用して、テーマフィールドの値を変更し、テーマに含まれる既存のテンプレートに対する変更をプレビューしてから、その変更を公開できます。
テーマの要素の色を選択する方法を説明する、テーマ設定の編集UIのアニメーション
このドキュメントでは、HubSpotのCMSボイラープレートに基づいて最初のテーマを作成する方法を説明します。テーマの詳細については、テーマのリファレンスドキュメントを参照してください。
CMS Hubを使って初めて開発する場合には、以下のチュートリアルをお勧めします。CMS Hub開発のクイックスタート
**注：**開始する前に、HubSpot CLIをインストールする必要があります。

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

hs create website-theme my-website-themeを実行します。これにより、my-website-themeディレクトリーが作成されて、そこにCMSテーマボイラープレートのファイルが格納されます。
1

CMSボイラープレートをHubSpotアカウントにアップロードする

hs upload my-website-theme my-website-themeを実行します。これにより、ボイラープレートがアカウントのデザインマネージャーにアップロードされ、「my-website-theme」というタイトルのフォルダーにアップロードされます。
2

ページを作成する

アップロードしたテーマからページを作成するには、次の手順に従います。
  • HubSpotアカウントで、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］に移動します。
  • 右上にある［作成］をクリックし、［ウェブサイトページ］を選択します。
  • ダイアログボックスで、ページを公開するドメインを選択し、ページ名を入力します。［ページを作成］をクリックします。
create-page-from-dashboard
  • テンプレート選択画面のページ上部に、有効なテーマに属するテンプレートが表示されます。
    • 有効なテーマをまだ選択していない場合は、［CMSテーマボイラープレート］にカーソルを合わせ、［有効なテーマに設定］をクリックします。
    • 既に有効なテーマを設定している場合は、テーマセレクターのドロップダウンメニューをクリックし、新しいテーマを選択してから［テーマを変更］を選択します。次に、［CMSテーマボイラープレート］にカーソルを合わせて、［有効なテーマに設定］をクリックします。次の画面で、テンプレートを選択します。
theme-selector
これにより、テーマのフィールドを編集できるページエディターが表示されます。
3

テーマフィールドを編集する

  • ページエディターの左のサイドバーで、［テーマ］タブをクリックします。
    • ［テーマ］タブで、［テーマ設定を編集］をクリックします。ここで、既存のテーマ設定を変更できます。テーマ設定への変更を公開すると、この更新したテーマが使用されている全てのページのスタイルが更新されます。
edit-theme-settings
4

ローカルでの変更に向けて準備する

ターミナルに戻り、hs watch my-website-theme my-website-themeを実行します。このコマンドは、ローカルディレクトリーを監視し、以後、ファイルが保存されると変更内容をHubSpotアカウントに自動的にアップロードします。
5

テーマフィールドを追加する

ローカルでの変更が監視されるようになりました。新しいテーマフィールドを追加します。
  • エディターでfields.jsonファイルを開きます。これは、テーマエディターのサイドバーで利用可能なフィールドを制御するためのファイルです。フッターの高さを指定するための新しいフィールドを追加します。
  • ファイルの末尾近くにあるfooterグループを見つけます。
  • 次のコードをコピーし、ファイル内のfooterグループの子配列に含まれる最初の項目の上にJSONを貼り付けます。
// 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でテーマのプレビューアーを再読み込みします。左のサイドバーに新しいフィールドが表示されます。
6

CSSでフィールドを参照する

  • コードエディターで、theme-overrides.cssファイルを開きます。次に、.footerのCSSセレクターを見つけます。続いて、このセレクターにmin-heightを追加します。
    • テーマ内の値にアクセスするには、themeオブジェクトを使用します。例えば{{ theme.footer.height }}を使用して、高さフィールドに設定された高さの値にアクセスします。
    • theme-overrides.css内の.footer宣言を次のコードで置き換えます。
    .footer {
  background-color: {{ footer_bg_color }};
  min-height: {{theme.footer.height}}px;
}
    • theme-overrides.cssを保存し、HubSpotアカウントにアップロードします。
7

変更をテストする

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

​
次のステップ

テーマの作成、更新が完了しました。ここからは、テーマフィールドをさらに作成してプロジェクト用にカスタマイズできます。他のカスタマイズオプションについては、テーマの概要を参照してください。テーマを作成する際には、HubSpot CMS上のウェブサイトを最適化する方法を確認すると参考になります。 HubSpot CMS Hubには既定のテーマが複数用意されています。これらのテーマを表示、複製、更新するなどして、テーマの具体的な使用方法について学習できます。 テーマについて把握したら、最初のカスタムモジュールを作成する方法を確認してください。