> ## 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テーマ、マーケットプレイステーマ、カスタムテーマなどの子テーマを作成できます。

export const SupportedProducts = ({marketing, sales, service, cms, marketingLevel, salesLevel, serviceLevel, cmsLevel}) => {
  const translations = {
    header: "サポートされる製品",
    description: "次のいずれかの製品またはそれ以上が必要です。",
    productNames: {
      marketing: "Marketing Hub",
      sales: "Sales Hub",
      service: "Service Hub",
      cms: "Content Hub"
    },
    tiers: {
      free: "無料ツール",
      starter: "Starter",
      professional: "Professional",
      enterprise: "Enterprise"
    }
  };
  const translateTier = tier => {
    if (!tier) return '';
    const lowerTier = tier.toLowerCase();
    return translations.tiers[lowerTier] || tier;
  };
  const products = [{
    name: marketing ? translations.productNames.marketing : '',
    level: translateTier(marketingLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/marketing-bolt.svg",
    alt: "Marketing Hub"
  }, {
    name: sales ? translations.productNames.sales : '',
    level: translateTier(salesLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/sales-star.svg",
    alt: "Sales Hub"
  }, {
    name: service ? translations.productNames.service : '',
    level: translateTier(serviceLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/service-heart.svg",
    alt: "Service Hub"
  }, {
    name: cms ? translations.productNames.cms : '',
    level: translateTier(cmsLevel),
    icon: "https://mintlify-assets.b-cdn.net/Icons/content-play.svg",
    alt: "Content Hub"
  }].filter(product => product.name && product.level);
  if (products.length === 0) return null;
  return <div>
      <div className="text-sm mb-2">{translations.description}</div>
      <div className={`grid ${products.length === 1 ? 'grid-cols-1' : 'grid-cols-2'} gap-1.5`}>
        {products.map((product, index) => <div key={index} style={{
    display: 'flex',
    alignItems: 'center'
  }}>
            <img src={product.icon} alt={product.alt} className="w-3.5 h-3.5 mr-1.5 mt-2.5 mb-2.5 flex-shrink-0 align-middle" />
            <span className="font-medium mr-1 text-sm">{product.name} -</span>
            <span className="text-sm">{product.level}</span>
          </div>)}
      </div>
    </div>;
};

<Accordion title="サポートされる製品" defaultOpen="true" icon="cubes">
  <SupportedProducts marketing={true} marketingLevel="professional" cms={true} cmsLevel="professional" />
</Accordion>

**子テーマ**とは、元の**親テーマ**のコピーです。子テーマは、親テーマに変更を加えることなく編集できます。HubSpotテーマ、マーケットプレイステーマ、カスタムテーマなどの子テーマを作成できます。

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

デザインマネージャーでは、マーケットプレイスで購入したテーマまたは既定のHubSpotテーマの子テーマを作成できます。デザインマネージャー内でこれらのアセットから子テーマを作成すると、以下のファイルが子テーマに追加されます。

* `theme.json`：親テーマにリンクするための適切なextends文が含まれています。
* `child.css`と`child.js`：空のCSSファイルとJSファイルです。これらのファイルに追加するコードは、子テーマにのみ影響します。これらのファイル名は、子テーマ作成ウィザードの詳細オプションでカスタマイズできます。
* [`standard_header_includes` HubL変数](/cms/reference/hubl/variables#required-page-template-variables)を含むファイル。通常は「ベース」または「メイン」テンプレートファイルなどです。[この例はボイラープレートで確認](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates/layouts)できます。

元のテーマが編集できない場合でも、子テーマは編集できます。

デザインマネージャー内でマーケットプレイステーマまたはHubSpotの既定テーマの子テーマを作成するには、次の手順に従います。

* HubSpotアカウントにて、［マーケティング］>［ファイルとテンプレート］>［デザインツール］の順に進みます。
* 左側のサイドバーで、（`@marketplace`フォルダーにある）マーケットプレイステーマまたは（`@hubspot`フォルダーにある）HubSpotの既定テーマを**右クリック**し、［子テーマを作成］を選択します\*\*。\*\*
* 子テーマの名前を入力し、テーマの場所を選択し、［子テーマを作成］をクリックします。
  * 詳細オプションを開き、子テーマを使用して作成される子CSSファイルと子JSファイルの名前をカスタマイズすることもできます。
* 子テーマが作成されると、子テーマの公開準備ができたことを示す成功メッセージが表示されます。［閉じる］をクリックします。
* 左側のサイドバーに子テーマとその内容が表示されます。

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

デザインマネージャー上で子テーマを作成できます。子テーマには、親テーマからアセットとファイルが継承されます。元のテーマが編集できない場合でも、子テーマは編集できます。

デザインマネージャー内で子テーマを作成するには、次の手順に従います。

* HubSpotアカウントにて、［マーケティング］>［ファイルとテンプレート］>［デザインツール］の順に進みます。
* 左側のサイドバーでファイルをクリックして［新しいテーマ］を選択します。
* ［テーマの開始点］として［空のテーマ］を選択します。
* テーマの名前を入力し、［作成］をクリックします。
* 新しいテーマの**theme.json**ファイルが開きます。**theme.json**ファイルを編集して、行5の下に新しい行を追加します。行5の末尾にコンマを追加してください。
* 行6に`extends`文を追加します。値は、使用する親テーマのパスです。Barricadeテーマから子テーマを作成する場合の例を次に示します。

```json theme={null}
"extends": "path/to/theme"
```

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

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

子テーマは、CLIを使用して作成できます。子テーマを作成する前に、[CLIの設定プロセス](https://developers.hubspot.jp/docs/cms/guides/getting-started-with-local-development)を完了しておく必要があります。子テーマには、親テーマからテンプレートとファイルが継承されます。この新しいテーマは、CLIとデザインマネージャーの両方で編集できます。

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

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

```shell theme={null}
mkdir cms-project
```

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

```shell theme={null}
cd cms-project
cp ~/src/cms-sprout-theme/src/theme.json
```

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

```json theme={null}
"extends": "@hubspot/barricade"
```

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

```shell theme={null}
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. **子テーマを使用して新しいページを作成する方法は？** 新しいページを作成する場合、子テーマはページ作成モーダルの［自分のテーマ］に選択肢として表示されます。テーマを使用してページを作成する方法については、[ナレッジベース](https://knowledge.hubspot.com/jp/website-pages/create-website-content-using-a-theme)を参照してください。
5. **親テーマの代わりに子テーマを使用して既存のページを編集する方法は？** ページテンプレートを新しいテーマの同等のテンプレートに置き換えることができます。例えば、親テーマのテンプレート`landing-page.html`を新しいテーマのテンプレート`landing-page.html`に[置き換える](https://knowledge.hubspot.com/jp/cos-general/how-do-i-edit-my-blog-email-page-template#use-a-different-template)ことができます。
6. **ページ作成インターフェイスでテンプレートのラベルを編集する方法は？** テンプレートのラベルは、HTMLファイルを編集することで変更できます。ラベルはテーマファイル冒頭のコメント内にあります。
7. **子テーマからさらに子テーマを作成できますか？** 現在、子テーマから子テーマを作成することはできません。