子テーマを作成する

デザインマネージャーでは、マーケットプレイスで購入したテーマまたは既定の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テーマから子テーマを作成する場合の例を次に示します。

• 新しいテーマには空のfields.jsonファイルがあります。親テーマの元のfields.jsonファイルの内容をコピーするか、またはファイルを必要に応じて更新します。

子テーマは、CLIを使用して作成できます。子テーマを作成する前に、CLIの設定プロセスを完了しておく必要があります。子テーマには、親テーマからテンプレートとファイルが継承されます。この新しいテーマは、CLIとデザインマネージャーの両方で編集できます。

CLIでテーマを拡張するには、次の手順に従います。

• テーマ用の新しいディレクトリーを作成します。例：

• 新しいディレクトリーで、親テーマのtheme.jsonファイルのコピーを作成します。例：

• コピーしたtheme.jsonファイルを編集し、行5の下（またはresponsive_breakpointsがある場合はその最終行の下）に新しい行を追加します。行5の末尾にコンマを追加してください。
• 行6（または行14、あるいはテーマの該当する行）にextends文を追加します。値は、使用する親テーマのパスです。Barricadeテーマから子テーマを作成する場合の例を次に示します。

• 新しいテーマには空のfields.jsonファイルがあります。親テーマの元のfields.jsonファイルの内容をコピーするか、またはファイルを必要に応じて更新します。
• 新しいテーマとファイルをポータルにアップロードします。例：

保持できる子テーマの合計数には、CMS Hubのご契約に基づいて上限があります。この上限は次のとおりです。

• Marketing/CMS Hub Professional：5個の子テーマ
• Marketing/CMS Hub Enterprise：10個の子テーマ

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. 子テーマからさらに子テーマを作成できますか？
   現在、子テーマから子テーマを作成することはできません。