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

テーマを使用

更新日時 2021年 7月 27日

対象製品

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

テーマを削除する

既定のHubSpotテーマと複製したテーマを、デザインマネージャーから削除することができます。

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ファインダーで、テーマのアセットの含まれているフォルダーをクリックします。
  • [ファイル]ドロップダウンメニューをクリックし、[[フォルダー名]を削除]を選択します。 
  • ダイアログボックスで[理解した上で、このフォルダーを削除します]チェックボックスを選択してオンにしてから、[このフォルダーを削除]をクリックします。 
購入済みのテーマは、アセットマーケティングプレースからアンインストールする必要があります。
  • HubSpotアカウントにて、ナビゲーションバーに表示される[マーケットプレイスアイコンmarketplace ]をクリックします。
  • [購入済み]タブに移動します。
  • 該当テーマの上にカーソルを置き、[アクション]ドロップダウンメニューをクリックしてから、[アンインストール]を選択します。
  • ダイアログボックスで、[アンインストール]をクリックします。

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

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

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

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

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

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

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

テーマを別のアカウントにコピーする

1つのアカウントから別のアカウントにテーマフォルダーをコピーすることができます。テーマフォルダーを別のアカウントにコピーするには、そのアカウントのユーザーでなければならず、両方のアカウントで「デザインツール」の権限を持っている必要があります。

注:@hubspotまたは@marketplaceのディレクトリーの中のテーマフォルダーをアカウント間でコピーすることはできません。

アカウントにテーマをコピーするには、次の手順を実行します。

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • 左のサイドバーで、コピーするテーマフォルダーの上にカーソルを置きます。フォルダーを右クリックし、[別のアカウントにコピー]を選択します。 

    copy-theme-folder-to-different-account
  • ダイアログボックスで、テーマのコピー先のアカウントを選択し、[アセットをコピー]をクリックします。 

コピーの処理が完了すると、指定されたアカウントにテーマフォルダーが表示されます。