> ## 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のCMS上の既存ウェブサイトに追加する方法
> テーマ機能は、古いサイトにも追加する形で組み込むことが可能です。ウェブサイトの今後と、この機能によってどのようにウェブサイトを強化できるかを検討してください。
'テーマ機能をHubSpotのCMS上の既存ウェブサイトに追加する方法';
'APAC JAPAN (JA) | \[NEW] Add theme capabilities to an existing HubSpot CMS website | 202106';
'テーマ機能は、古いサイトにも追加する形で組み込むことが可能です。ウェブサイトの今後と、この機能によってどのようにウェブサイトを強化できるかを検討してください。';
HubSpotのメリットとして、更新し続ける必要がないことが挙げられます。CMS Hubでは常に最新バージョンが使用されます。CMS Hubの新機能は追加として導入されます。そのため、HubSpotのCMS上に構築した既存のウェブサイトのテンプレートやモジュールなどは、構築した当時と同様に機能します。しかも、CMSの内部は常に改善され、速度や編集のしやすさが向上しています。
CMS Hubの機能の中には、開発者による追加が必要な機能もあります。このような機能の一部は、新しいウェブサイトの場合とは異なる方法で実装することも可能です。このチュートリアルでは、既存のウェブサイトにこれらの機能を追加する方法を説明します。
続ける前に
* HubSpotでの構築経験がある場合も、[CMS Hubの主な概念](/cms/start-building/introduction/overview)を再確認してください。全ての要素を関連付けて理解できます。
* [CMS CLI](/developer-tooling/local-development/hubspot-cli/install-the-cli)を使用する必要もあるため、インストールがまだの場合は[設定](/developer-tooling/local-development/hubspot-cli/install-the-cli)してください。
これらの機能は個別に追加して使用できます。必要な機能の見出しを見つけて、取り組んでみてください。このチュートリアルは順序に完全に従っていただく必要はありません。
## テーマ
CMS Hub[テーマ](https://developers.hubspot.com/docs)は、テンプレート、モジュール、CSS、JSON、JSファイルのパッケージです。テーマがパッケージ化されていることは、コンテンツエディターの使いやすさの面で意味があります。
制作担当者が新しいウェブサイトまたはランディングページを作成する際には、そのアカウントに含まれるテーマのグリッドが表示されます。使用するテーマを選択すると、テーマに含まれるテンプレートのみのグリッドが表示されます。
テーマのテンプレートを使用してページを編集する場合、テーマに含まれているモジュールは、［モジュールを追加］パネル内で分かりやすく示されます。
### 1. 既存のファイルを1つのフォルダーに配置する
同じフォルダーに格納されているテンプレート、モジュール、CSS、JSファイルがあれば、テーマにします。サブフォルダーに分けるかどうかは問題ではなく、それらのアセットが1つのフォルダー内にあることのみが重要です。すでにそのように格納されていれば問題ありません。まだの場合は、フォルダーを作成し、アセットをそのフォルダーに移動します。このフォルダーに、テーマに付ける名前を付けます。名前は自由に決められますが、サイトに反映する会社のブランドと、デザインの刷新または変更の年に基づいて付けることをお勧めします。
### 2. 格納したフォルダーをテーマにする
テーマには2つのJSONファイルが必要で、実際にまずコンテンツが必要になるのはそのうちの1つのみです。
* **Theme.json** -テーマの設定が含まれます。
* **Fields.json** -サイト全体にデザインの変更を反映させるために使用するフィールドが含まれます。
JSONファイルは特殊なので、現時点ではデザインマネージャーでは作成できません。これらのファイルは[CMS CLI](/developer-tooling/local-development/hubspot-cli/install-the-cli)経由でアップロードできます。
1. 「既存のファイルを1つのフォルダーに配置する」ステップで作成したフォルダーを、自分のコンピューターに取り込みます。
2. コンピューター上のフォルダー内に、新しいファイルを作成して`theme.json`という名前を付けます。
3. [テーマドキュメントにサンプル`theme.json`ファイル](https://developers.hubspot.com/docs#theme-json)をコピーします。
4. コード例を`theme.json`ファイルに貼り付けます。
5. `"label"`の値を、制作担当者に表示するテーマの名前に変更します。
6. `"preview_path"`をホームページテンプレートまたは最も頻繁に使用するテンプレートのいずれかのパスに変更します。
7. ウェブサイトのホームページのスクリーンショットを取ります。画像に`thumb.jpg`という名前を付けます。`theme.json`ファイルと同じフォルダー内に画像を配置します。
8. theme.jsonの`"screenshot_path"`を`thumb.png`画像のパスに変更します。
9. ファイルを保存します。
10. `theme.json`と同じフォルダー内に新しいファイルを作成し、fields.jsonという名前を付けます。このファイル内に`[]`のみを入力し、ファイルを保存します。
デザインマネージャー上で変更内容を確認するには、`hs uploadコマンド`を実行します。これで基本的なテーマが作成されました。テーマに関連付けられて、テーマ内のモジュールとテンプレートが表示されます。
### 3. テーマフィールドを追加する
テーマフィールドは、制作担当者がテーマ全体のスタイルを変更できるように提供されるUIコントロールです。
これらのテーマコントロールは、新しいウェブサイトの構築時に、制作担当者によるサイト全体のブランディング設定を可能にします。開発者はサイト開発の技術的な側面に集中できるようになります。
既存のウェブサイトでは、テーマフィールドは不要な場合があります。ウェブサイトがすでにブランドに合わせて構築されている場合は実質、サイト全体の色やデザインのコントロールを追加する意味はありません。サイトのブランディングを大幅に変える場合は、過去に遡ってフィールドを追加するよりも、デザインを再度行うほうが適切と考えられます。最終的には、ウェブサイトに関わる担当者間で話し合って決断してください。
テーマにフィールドを追加するには、フィールドのJSONをfields.jsonファイルに追加します。フィールドの構造はモジュールフィールドと同様です。
テーマフィールドの値を変更するためのアクセス権が必要なユーザーに、［グローバルコンテンツおよびテーマを編集］権限があることを確認します。この設定の編集権限が必要ないユーザーについては、この権限が有効になっていないことを確認します。
## デザインマネージャーのドラッグ＆ドロップをHTMLとして複製する
[ドラッグ＆ドロップエリア](https://developers.hubspot.com/docs)および[グローバルパーシャル](/cms/start-building/building-blocks/global-content)では、[コードHTML＋HubL](https://developers.hubspot.com/docs)ファイルを使用する必要があります。これらの新しい機能を、古いドラッグ＆ドロップ デザイン マネージャー システムを使用して構築されている既存のウェブサイト上で使用する場合は、テンプレートをHTMLとして複製することが必要になる場合があります。
テンプレートをHTML＋HubLテンプレートとして複製するには、次の手順に従います。
1. デザインマネージャーを開き、ファインダーでテンプレートを見つけます。
2. テンプレートを右クリックします。
3. 表示されたコンテキストメニューで、［HTMLとして複製（Clone as HTML）］を選択します。
これで、ドラッグ＆ドロップエリアとグローバルパーシャルを追加できるようになりました。
## ドラッグ＆ドロップエリア
[ドラッグ＆ドロップエリア](https://developers.hubspot.com/docs)をテンプレートに追加すると、制作担当者がモジュールをページ上で縦横に配置できるようになります。ドラッグ＆ドロップエリアは、制作担当者に追加のスタイルコントロールも提供します。ドラッグ＆ドロップエリアのテンプレートは多様なレイアウトの作成に利用できるので、開発者はサイトの作成と更新の技術面に集中できるようになります。
ドラッグ＆ドロップエリアは新しい機能で、[デザインマネージャーのドラッグ＆ドロップテンプレート](https://developers.hubspot.com/docs)とは異なります。また、デザインマネージャーのドラッグ＆ドロップテンプレートではサポートされません。ドラッグ＆ドロップ テンプレート ビルダーを使用して以前に作成したテンプレートにドラッグ＆ドロップエリアを追加するには、「デザインマネージャーのドラッグ＆ドロップをHTMLとして複製する」を参照してください。
#### ドラッグ＆ドロップエリアを使用するために、全ての既存ページを変換する意味はありますか？
これは、ページがビジネス上の目的を満たしているかどうかによります。つまり、「使えるならそのまま使う」という考え方が当てはまります。ページのレイアウトを変更する必要がある場合は、ドラッグ＆ドロップエリアを使用するページに変換することが適切と考えられます。ページが目的を果たしていてレイアウトの変更が必要ない場合は、現状で問題ありません。
### 既存のテンプレートの変換
古いテンプレートの複製を作成して、フレキシブルカラムをドラッグ＆ドロップエリアに変更するのは比較的簡単です。制作担当者の作業の幅も広がるため、お勧めです。制作担当者は新しいページで数多くのクリエイティブなコントロールを利用できるようになります。現在のテンプレートがデザインマネージャーのドラッグ＆ドロップテンプレートの場合は、[デザインマネージャーのドラッグ＆ドロップをHTMLとして複製する](#clone-design-manager-drag-and-drop-as-html)を参照してください。
1. 最も簡単な解決法は、HubLタグ[`{% widget_container "my_unique_column_name" %}`](/cms/reference/hubl/tags/standard-tags#flexible-column)を使用しているフレキシブルカラムのインスタンスを見つけることです。
2. 必要に応じて、各インスタンスを[`{% dnd_area "my_unique_area_name" %}`](/cms/reference/hubl/tags/dnd-areas)で置き換えます。
3. 既定のモジュールを設定しない場合は、`dnd_area`を空のままにします。この領域の既定のモジュールを継承するか、新しく便利な既定モジュールを設定する場合は、`dnd_area`内に`dnd_section`を追加し、その内部に`dnd_column`を追加します。
4. 古い`widget_container`内にある各モジュールタグについて、既定で表示するモジュールへのパスが指定された`dnd_module`を含む、`dnd_row`を作成します。これで、フレキシブルカラムと同じ縦のレイアウトが作成されます。
### 既存のページを移行する方法は？
フレキシブルカラムで構築されたテンプレートを変更してドラッグ＆ドロップエリアを使用する場合は、理解しておく点があります。**フレキシブルカラムはドラッグ＆ドロップエリアと同じではありません。フレキシブルカラムのみを持つテンプレートをドラッグ＆ドロップエリアのみを持つテンプレートに交換することはできません**。安全上、この交換は認められません。コンテンツはフレキシブルカラムからドラッグ＆ドロップエリアにマッピングされません。この理由を考えてみましょう。新しいテンプレートを作成してサイドバーとメインのコンテンツエリアを設定したとします。サイドバーはフレキシブルカラムで、メインコンテンツはドラッグ＆ドロップエリアです。交換ツールはフレキシブルカラム同士をマッピングしようとします。
ページを変換してドラッグ＆ドロップエリアを使用する場合に最も安全な方法は、[コンテンツステージング](https://developers.hubspot.com/docs)を使用することです。
1. [コンテンツ ステージング ツールを開き](https://app.hubspot.com/l/content/staging/domain)、既存のページを見つけて、ステージングします。［空白ページをステージング］を選択します。
2. ドラッグ＆ドロップエリアを使用する新しいテンプレートを選択します。
3. 元のバージョンのページから情報をコピーして貼り付け、必要なレイアウトを作成します。
4. 完了したら、ステージングに公開します。
5. コンテンツ ステージング ツールの［公開］タブに進みます。ページを選択し、ステージングから公開します。
## グローバルパーシャル
[グローバルパーシャル](/cms/start-building/building-blocks/global-content)とは、ウェブサイト全体で再利用可能なHTMLおよびHubLのコンテンツ要素です。典型的なグローバルパーシャルは、ウェブサイトのヘッダー、サイドバー、フッターです。グローバルパーシャルは、制作担当者にはグローバル コンテンツ エディター上の選択可能な領域として示されます。グローバル コンテンツ エディターの外観はページエディターと同じですが、グローバルコンテンツの編集に使用します。
具体的には、ナビゲーションなどのコンテンツのモジュールを含むグローバルパーシャルとして、ヘッダーを実装してみてください。ナビゲーションへのリンクを追加する必要がある制作担当者は、ページエディターでヘッダーをクリックし、メニューモジュールをクリックして、メニューを更新します。
グローバルコンテンツを編集するためのアクセス権が必要なユーザーに、［グローバルコンテンツおよびテーマを編集］権限があることを確認します。
## コードアラート
[コードアラート](/cms/start-building/introduction/developer-environment/troubleshooting/code-alerts)によって、開発者およびITマネージャーは、CMS Hub Enterpriseのアカウントのページやアセットのパフォーマンスと表示に影響する問題の概要を1か所で確認できます。
開発者は、新しい機能を活用するためにサイトを積極的に最適化する立場にあります。アカウントのコードアラートを確認し、問題がある場合は解決することをお勧めします。