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

テーマを使用

更新日時 2021年 8月 19日

対象製品

Marketing Hub Professional, Enterprise
CMS Hub Professional, Enterprise

一つのテーマは、テンプレート、モジュール、グローバルコンテンツ、およびスタイル設定のセットであり、ウェブサイトの作成に使用できます。テーマはアセットマーケットプレイスからダウンロードできますが、「CMS Hubアカウントでは既定のHubSpotテーマを使用することもできます。ドラッグ&ドロップ コンテンツ エディターでテーマを使用してページを編集し、ブログ設定で、テーマを使用するためのブログテンプレートを設定できます。 

テーマを理解する

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

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

有効なテーマを使用する

有効なテーマを設定して、新しく作成されるページの既定のオプションとしてそのテーマのページを表示できます。テーマを設定または変更しても、既存のコンテンツに使用されているテーマは変更されません。追加のテーマは、アセットマーケットプレイスで購入できます。 

有効なテーマを設定する

  • コンテンツに移動します。

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
  • 右上の[作成]ドロップダウンメニューをクリックし、ウェブサイトページまたはランディングページを選択します。
  • ダイアログボックス内で、ページ名を入力し、続けて[ページを作成]をクリックします。
  • テーマ選択画面で、テーマを選択します。右上の[プレビュー]をクリックしてテーマをプレビューするか、[選択して続行]をクリックしてテーマを有効に設定します。 

select-a-new-active-theme

別の有効なテーマに切り替える

  • コンテンツに移動します。

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
  • 右上の[作成]ドロップダウンメニューをクリックし、ウェブサイトページまたはランディングページを選択します。
  • ダイアログボックス内で、ページ名を入力し、続けて[ページを作成]をクリックします。
  • テンプレート選択画面で、[テーマ]ドロップダウンメニューをクリックし、[テーマを変更]を選択します。 

switch-active-themes

  • テーマ選択画面で、テーマを選択します。右上の[プレビュー]をクリックしてテーマをプレビューするか、[選択して続行]をクリックしてテーマを有効に設定します。 

select-new-active-theme

テーマを使用してページを作成する

  • コンテンツに移動します。

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
  • 右上の[作成]ドロップダウンメニューをクリックし、ウェブサイトページまたはランディングページを選択します。
  • ダイアログボックス内で、ページ名を入力し、続けて[ページを作成]をクリックします。
  • テンプレート選択画面で、テンプレートをクリックします。有効なテーマのテンプレートが「テーマテンプレート」セクションに表示されます。有効なテーマに含まれていないテンプレートを選択するには、[その他のテンプレート]をクリックしてからテンプレートをクリックします。 
  • 右上の[プレビュー]をクリックして選択したテンプレートをプレビューするか、[テンプレートを選択]をクリックしてコンテンツエディターに進みます。 

select-template-from-active-theme

  • コンテンツエディターで、ドラッグ&ドロップエディターを使用してページコンテンツを編集します。 
  • 右上の[更新]または[公開]をクリックして変更内容を適用します。 

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

ブログ設定で、ブログで自分のページと同じテーマを使うように設定できます。ブログ記事とブログ リスト ページのテンプレートは個別に選択されます。  

  • HubSpotアカウントにて、ナビゲーションバーに表示される[設定アイコン settings]をクリックします。
  • 左のサイドバーメニューで、[ウェブサイト]>[ブログ]の順に進みます。
  • 複数のブログがある場合は、[修正するブログを選択]ドロップダウンメニューをクリックしてブログを選択します。 
  • [テンプレート]タブをクリックします。
  • [ブログ記事]および[Blog listing(ブログリスト)]セクションで、[アクション]ドロップダウンメニューをクリックして、[テンプレートを変更]を選択します。

select-blog-template

  • テーマ選択画面で[テーマ]を選択し、そのテーマを使用するテンプレートを選択します。右下の[完了]をクリックします。 

select-a-theme-blog-template

  • ブログ記事とブログ リスト ページのテンプレートを設定したら、左下の[保存]をクリックします。 

テーマ設定を編集する

テーマ設定で、フォント、色、間隔を含むテーマのスタイルをカスタマイズできます。ここで編集したスタイルは、すべてのページとこのテーマに含まれるすべてのテーマモジュールに適用されます。テーマ設定の管理方法の詳細を確認してください。

edit-global-theme-fonts

テーマを管理する

デザインマネージャーで、テーマを編集、複製、または別のHubSpotアカウントにコピーすることができます。既定のHubSpotテーマ、複製したテーマ、カスタムテーマを削除することもできます。 

テーマを複製する

デザインマネージャーで既定のテーマのコードファイルを編集するには、まず複製する必要があります。アセットマーケットプレイスから購入したカスタムテーマとテーマは複製できますが、直接編集することもできます。 

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

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

    design-manager-theme-folder-clone
  • ダイアログボックスで、テーマの名前を入力してから、[作成]をクリックします。

テーマがルートフォルダーにコピーされ、他のフォルダーと共にファインダーのリストに表示されます。 

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

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

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

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

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

    copy-theme-folder-to-different-account
  • ダイアログボックスで、アカウントを選択し、[アセットをコピー]をクリックします。コピー処理が完了するとすぐに、フォルダーが指定されたアカウントに表示されます。 

テーマをアップロードする

CMS Hub」アカウントのユーザーは、EnvatoのThemeForest MarketplaceからHubSpotのテーマをダウンロードし、HubSpotにアップロードできます。 

  • EnvatoのThemeForest Marketplaceの「HubSpot CMS Hub」セクションに移動します。
  • マーケットプレイスからテーマを購入しダウンロードします
  • ダウンロードしたファイルをダブルクリックして、圧縮ファイルを展開します。これにより、新しいテーマとそのドキュメントが含まれるフォルダーが作成されます。 
  • HubSpotアカウントにて、ナビゲーションバーに表示される[設定アイコン settings]をクリックします。
  • 左のサイドバーメニューで、[ウェブサイト]>[テーマ]の順に進みます。
  • 右上の[テーマをアップロード]をクリックします。 
  • コンピューターのファイル内で新しいフォルダーを開き、テーマを選択します。 

select-theme-file

  • テーマのアップロードが完了したら、ページの上部にバナーが表示されます。テーマがHubSpotで利用可能になるまで数分かかる場合があります。 

upload-theme

テーマを削除する

既定のHubSpotテーマ、複製したテーマ、およびアップロードされたテーマはデザインマネージャーから削除することができます。

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ファインダーで、テーマのアセットの含まれているフォルダーをクリックします。
  • [ファイル]ドロップダウンメニューをクリックし、[[フォルダー名]を削除]を選択します。 
  • ダイアログボックスで[理解した上で、このフォルダーを削除します]チェックボックスを選択してオンにしてから、[このフォルダーを削除]をクリックします。 

購入したテーマは、アセットマーケットプレイスからアンインストールする必要があります。 

  • HubSpotアカウントにて、ナビゲーションバーに表示される[マーケットプレイスアイコンmarketplace ]をクリックします。
  • [購入済み]タブに移動します。
  • 該当テーマの上にカーソルを置き、[アクション]ドロップダウンメニューをクリックしてから、[アンインストール]を選択します。
  • ダイアログボックスで、[アンインストール]をクリックします。