お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

テーマを使ってみる

更新日時 2020年 10月 19日

対象製品

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise

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

テーマとは

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

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

テーマをプレビュー

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

preview%20a%20theme

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

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

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

add%20a%20common%20module%20to%20a%20page

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

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

テーマ設定を編集する

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

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

edit-global-theme-fonts

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

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

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

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ファインダーで、@hubspotフォルダーをクリックします。このフォルダーには、ドラッグ&ドロップのEメールモジュールなど、テーマと既定のモジュールがすべて含まれています。

    design-manager-hubspot-folder
  • テーマフォルダーを右クリックし、[テーマを複製]を選択します。

    design-manager-theme-folder-clone
  • ダイアログボックスで、テーマのコピーに名前を付けてから、[作成]をクリックします。
  • テーマがルートフォルダーにコピーされ、他のフォルダーと共にファインダーのリストに表示されます。

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