テーマを使ってみる

テーマは、テンプレート、モジュール、グローバルコンテンツ、およびスタイル設定のセットであり、これを使用すれば誰でもウェブサイト全体を作成できます。テーマは、CMS開発者ドキュメントを使用して開発者の作成するコードファイルです。CMS Hubアカウントには、どんな業務にも合わせてカスタマイズできる既定のHubSpotテーマが含まれています。アセットマーケットプレイスにも利用可能なテーマがあります。

テーマとは

テーマは、次のものを含む、ウェブサイト用の一連のファイルです。

• コードテンプレート：ホームページに使用できる一連のテンプレート。ホームページ、会社概要ページ、ランディングページ、ブログなどのテンプレートがあります。これらのテンプレートは、開発者によってカスタムコーディングされるものですが、そのコンテンツとレイアウトはドラッグ＆ドロップページエディターで簡単にカスタマイズできます。
• モジュール：所定のテーマに含まれるページテンプレートに追加してカスタマイズできる、テーマに固有の一連のモジュールです。 
• グローバルコンテンツ：ウェブサイトのヘッダーやフッターなど、複数のページで繰り返されるコンテンツ。ドラッグ＆ドロップページエディターから直接グローバルコンテンツを編集することができます。
• テーマ設定：フォント、間隔、色など、テーマのテンプレートのための既定の設定。テーマテンプレートを使用している新しいページは、スタイルの点で一貫性のあるものになります。

テーマをプレビュー

テーマのデザインをプレビューする最も簡単な方法は、新しいページを作成することです。コンテンツクリエイターでは、次の2種類のテーマから選択できます。

• HubSpotテーマ：CMS Hub ProfessionalおよびEnterpriseのアカウントに含まれる既定のHubSpotテーマ。
• 自分のテーマ：チームのウェブ開発者、ソリューションパートナー、HubSpot移行チーム、アセットマーケットプレイスのプロバイダーなど、CMSリファレンスドキュメントを使用してウェブ開発者が作成するカスタムテーマ。CMS Hubアカウントの場合、ページの作成に使用したHubSpotテーマは、自分のテーマにも表示されます。

テーマを使用してページのコンテンツを編集する

各テーマには、フォント、色、スタイルのためのテーマ設定に従うモジュールの独自セットが含まれています。これらのモジュールは水平方向の行と垂直方向の列としてグループ化されています。これらの行または列は、さまざまなセクションにグループ化することができます。これらの要素を移動したり再配置したりして、ページレイアウトの構造をカスタマイズすることができます。

テーマテンプレートを使用してページのコンテンツを編集する方法の詳細を確認してください。

テーマテンプレートをブログに適用する

HubSpotでブログコンテンツもホストしている場合、視覚的に一貫させるために、ブログテンプレートをウェブサイトと同じテーマに更新することをおすすめします。ブログ設定でテーマをブログに適用する方法を確認してください。

テーマ設定を編集する

ビジュアルデザインに関するベストプラクティスに従ったウェブサイトにするために、テンプレート上のボタン、フォーム、およびモジュールには、テーマの一貫した色、フォント、スタイルが適用されます。

ページエディター内のテーマ設定にアクセスするには、左側のパネルで［デザイン］タブをクリックします。ここで編集したスタイルは、すべてのページとこのテーマに含まれるすべてのテーマモジュールに適用されます。テーマ設定の管理方法の詳細を確認してください。

ウェブサイト開発者向けの機能

CMS Hubで作成されたウェブサイトには、開発者とITチームがセキュリティとパフォーマンスの機能を活用できます。開発者は、コードアラートでウェブサイトのパフォーマンスをすばやく簡単にモニタリングできます。また、コンテンツ監査APIエンドポイントを使用して、ウェブサイトのコンテンツに加えたすべての変更が記録されたログにアクセスすることもできます。CMSでのウェブサイト開発と開発者向けCMS APIの詳細を確認してください。

HubSpot CLIでテーマを構築することに加えて、HubSpotデザインマネージャーで既存のテーマを複製したり編集したりすることもできます。テーマを複製するには、次の手順を実行します。

• HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
• ファインダーで、@hubspotフォルダーをクリックします。このフォルダーには、ドラッグ＆ドロップのEメールモジュールなど、テーマと既定のモジュールがすべて含まれています。
  
  
• テーマのフォルダーを右クリックし、［テーマを複製］を選択します。
  
  
• ダイアログボックスで、テーマのコピーに名前を付けてから、［作成］をクリックします。
• テーマがルートフォルダーにコピーされ、他のフォルダーと共にファインダーのリストに表示されます。

テーマが複製されると、他のコードファイルを編集するのと同じ要領で編集することができ、ユーザーはテーマからランディングページやウェブサイトページを作成することができるようになります。