サポートされる製品
次のいずれかの製品またはそれ以上が必要です。
Marketing HubMarketing HubProfessional
Content HubContent HubProfessional
最終更新日: 2025年8月22日
子テーマとは、元の親テーマのコピーです。子テーマは、親テーマに変更を加えることなく編集できます。HubSpotテーマ、マーケットプレイステーマ、カスタムテーマなどの子テーマを作成できます。

​
デザインマネージャーを使用して、マーケットプレイステーマまたはHubSpotの既定テーマの子テーマを作成する

デザインマネージャーでは、マーケットプレイスで購入したテーマまたは既定のHubSpotテーマの子テーマを作成できます。デザインマネージャー内でこれらのアセットから子テーマを作成すると、以下のファイルが子テーマに追加されます。
  • theme.json：親テーマにリンクするための適切なextends文が含まれています。
  • child.cssとchild.js：空のCSSファイルとJSファイルです。これらのファイルに追加するコードは、子テーマにのみ影響します。これらのファイル名は、子テーマ作成ウィザードの詳細オプションでカスタマイズできます。
  • standard_header_includes HubL変数を含むファイル。通常は「ベース」または「メイン」テンプレートファイルなどです。この例はボイラープレートで確認できます。
元のテーマが編集できない場合でも、子テーマは編集できます。 デザインマネージャー内でマーケットプレイステーマまたはHubSpotの既定テーマの子テーマを作成するには、次の手順に従います。
  • HubSpotアカウントにて、［マーケティング］>［ファイルとテンプレート］>［デザインツール］の順に進みます。
  • 左側のサイドバーで、（@marketplaceフォルダーにある）マーケットプレイステーマまたは（@hubspotフォルダーにある）HubSpotの既定テーマを右クリックし、［子テーマを作成］を選択します**。**
  • 子テーマの名前を入力し、テーマの場所を選択し、［子テーマを作成］をクリックします。
    • 詳細オプションを開き、子テーマを使用して作成される子CSSファイルと子JSファイルの名前をカスタマイズすることもできます。
  • 子テーマが作成されると、子テーマの公開準備ができたことを示す成功メッセージが表示されます。［閉じる］をクリックします。
  • 左側のサイドバーに子テーマとその内容が表示されます。

​
デザインマネージャー上でマーケットプレイス以外のテーマの子テーマを作成する

デザインマネージャー上で子テーマを作成できます。子テーマには、親テーマからアセットとファイルが継承されます。元のテーマが編集できない場合でも、子テーマは編集できます。 デザインマネージャー内で子テーマを作成するには、次の手順に従います。
  • HubSpotアカウントにて、［マーケティング］>［ファイルとテンプレート］>［デザインツール］の順に進みます。
  • 左側のサイドバーでファイルをクリックして［新しいテーマ］を選択します。
  • ［テーマの開始点］として［空のテーマ］を選択します。
  • テーマの名前を入力し、［作成］をクリックします。
  • 新しいテーマのtheme.jsonファイルが開きます。theme.jsonファイルを編集して、行5の下に新しい行を追加します。行5の末尾にコンマを追加してください。
  • 行6にextends文を追加します。値は、使用する親テーマのパスです。Barricadeテーマから子テーマを作成する場合の例を次に示します。
"extends": "path/to/theme"
  • 新しいテーマには空のfields.jsonファイルがあります。親テーマの元のfields.jsonファイルの内容をコピーするか、またはファイルを必要に応じて更新します。

​
CLIを使用して子テーマを作成する

子テーマは、CLIを使用して作成できます。子テーマを作成する前に、CLIの設定プロセスを完了しておく必要があります。子テーマには、親テーマからテンプレートとファイルが継承されます。この新しいテーマは、CLIとデザインマネージャーの両方で編集できます。 CLIでテーマを拡張するには、次の手順に従います。
  • テーマ用の新しいディレクトリーを作成します。例：
mkdir cms-project
  • 新しいディレクトリーで、親テーマのtheme.jsonファイルのコピーを作成します。例：
cd cms-project
cp ~/src/cms-sprout-theme/src/theme.json
  • コピーしたtheme.jsonファイルを編集し、行5の下（またはresponsive_breakpointsがある場合はその最終行の下）に新しい行を追加します。行5の末尾にコンマを追加してください。
  • 行6（または行14、あるいはテーマの該当する行）にextends文を追加します。値は、使用する親テーマのパスです。Barricadeテーマから子テーマを作成する場合の例を次に示します。
"extends": "@hubspot/barricade"
  • 新しいテーマには空のfields.jsonファイルがあります。親テーマの元のfields.jsonファイルの内容をコピーするか、またはファイルを必要に応じて更新します。
  • 新しいテーマとファイルをポータルにアップロードします。例：
hs upload cms-project cms-project

​
制限

保持できる子テーマの合計数には、CMS Hubのご契約に基づいて上限があります。この上限は次のとおりです。
  • **Marketing/CMS Hub Professional：**5個の子テーマ
  • **Marketing/CMS Hub Enterprise：**10個の子テーマ

​
よくあるご質問（FAQ）

  1. 親テーマがマーケットプレイスのテーマの場合、別のポータルに子テーマをコピーできますか？ はい。「extends」パスが新しいポータルでも同じなら可能です。
  2. 親テーマからはどのアセットが継承されますか？ 子テーマ内で上書きされない限り、親テーマの全てのファイルが継承されます。
  3. 特定のアセットを親テーマとは変える方法は？ 子テーマの同じ相対パスにあるファイルによって、親テーマからの同等のファイルが上書きされます。例えば@marketplace/parent/theme/templates/about.htmlを上書きするには、/child/theme/templates/about.htmlファイルを作成し、この新しいファイルを編集します。新しいファイルが、継承されたファイルの代わりとして有効になります。これはfields.jsonファイル以外に、テーマ内の他のファイルにも適用されることに注意してください。
  4. 子テーマを使用して新しいページを作成する方法は？ 新しいページを作成する場合、子テーマはページ作成モーダルの［自分のテーマ］に選択肢として表示されます。テーマを使用してページを作成する方法については、ナレッジベースを参照してください。
  5. 親テーマの代わりに子テーマを使用して既存のページを編集する方法は？ ページテンプレートを新しいテーマの同等のテンプレートに置き換えることができます。例えば、親テーマのテンプレートlanding-page.htmlを新しいテーマのテンプレートlanding-page.htmlに置き換えることができます。
  6. ページ作成インターフェイスでテンプレートのラベルを編集する方法は？ テンプレートのラベルは、HTMLファイルを編集することで変更できます。ラベルはテーマファイル冒頭のコメント内にあります。
  7. 子テーマからさらに子テーマを作成できますか？ 現在、子テーマから子テーマを作成することはできません。