制作担当者が新しいページの構築を始めるとき、ページ作成の出発点にするテーマを選択し、そのテーマ内のテンプレートを選択して開始するよう指示されます。
テーマのプレビュー画像などのテーマ設定はtheme.jsonファイルに設定されています。
開発者はテーマを使ってモジュールフィールドに類似したテーマフィールドのセットを作成できます。これにより制作担当者は、開発者がデザインしたさまざまなノブやダイヤルを調整し、CSSを編集せずにウェブサイト全体のスタイルを制御できます。開発者はCSS全体のテーマフィールドの値にHubLを使用してアクセスします。制作担当者はテーマエディターを使用して、テーマフィールドの値を変更し、テーマに含まれる既存のテンプレートに対する変更をプレビューしてから、その変更を公開します。
テーマフィールドはテーマのfields.jsonファイルで決まります。
テストモードでテーマを編集するときには、テーマの設定JSONをコピーすることもできます。こうすると、更新内容をテーマのローカルfields.jsonファイルに貼り付けることができます。
テーマ内のモジュールは、テーマ内のテンプレート内で使用するように設計する必要があります。テーマモジュールはコンテンツエディター上で強調表示されるので、制作担当者は作成しているページにそのページのコンテキストで正しく機能するようにデザインされたモジュールを素早く簡単に追加できます。既定のモジュールおよび残りのモジュールは引き続きHubSpotアカウントで利用できます。
テーマを開発するときに、ページエディターでモジュールとセクションを非表示にできます。こうすると、より合理的なコンテンツ作成エクスペリエンスが実現します。
テーマはファイルを含む1つのディレクトリーです。親テーマフォルダーのサブディレクトリー内にはHTML、CSS、JavaScriptファイル、モジュールなどのファイルを含めることができ、任意の方法で整理できます。テーマを作成するには2つのJSONファイル（theme.jsonとfields.json）が必要です。これらのファイルをルート テーマ フォルダーに含める必要があります。
サンプルから始めるには、HubSpot CMS Boilerplateを参照してください。
テストモードを有効にするには、次の2つの方法があります。
- デザインマネージャーからテストモードを有効にするには：
- デザインマネージャーのファインダーで、該当するテーマを選択します。
- 左側のサイドバーの上部にある［プレビュー］ボタンをクリックします。
.png?width=306&name=copy-theme-settings-test-mode-design-manager%20(1).png)
- ページエディターからテストモードを有効にするには：
- ページエディターで、左側のサイドバーの［デザイン］タブをクリックして、［テーマ設定を編集］をクリックします。
- URLに
?testmode=trueを追加して、Enterキーを押します。その後、テストモードになります。
- ページエディターで、左側のサイドバーの［デザイン］タブをクリックして、［テーマ設定を編集］をクリックします。
ページエディター内でテーマ設定を開く方法もあります。開いたら次に、クエリーパラメーター?testmode=trueをアドレスバーのURLに追加します。