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

テーマを使用する

更新日時 2024年 5月 29日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

すべての製品とプラン

テーマは、テンプレート、モジュール、グローバルコンテンツ、およびスタイルの一連の設定で構成され、ウェブサイトの作成に使用できます。コンテンツエディターでテーマを使用してページと投稿を編集し、ブログ設定で、テーマを使用するためのブログテンプレートを設定できます。 

全てのアカウントでは、少なくとも1つの既定のHubSpotテーマにアクセスできます。テーマはテンプレートマーケットプレイスからもダウンロードできます。

テーマを理解する

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

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

有効なテーマを使用する

有効なテーマを設定して、新しく作成されるページの既定のオプションとしてそのテーマのページを表示できます。

有効なテーマを設定または変更しても、既存のコンテンツに使用されているテーマは変更されないため、コンテンツの現在のテンプレートを交換する必要があります。追加のテーマは、HubSpotテンプレートマーケットプレイスで購入できます。 

  • コンテンツを開きます。

    • ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
  • 右上の[作成]ドロップダウンメニューをクリックし、ウェブサイトページまたはランディングページを選択します。
  • ダイアログボックスにページ名を入力し、続けて[ページを作成]をクリックします。
  • テーマ選択画面で、テーマにマウスポインターを合わせ、「テーマをプレビュー」をクリックすると、テーマのプレビューが表示されます。また、「有効なテーマに設定」をクリックすると、このテーマをページのデフォルトとして使用できます。 

有効なテーマを設定
テーマを設定すると、新しいページを作成するたびにテンプレート選択画面が表示されるようになります。この画面では、別の有効なテーマに切り替えることができます。

  • [テーマ]ドロップダウンメニューをクリックし、[テーマを変更]を選択します。

HubSpotでテーマを変更

  • テーマ選択画面で、テーマにマウスポインターを合わせ、「テーマをプレビュー」をクリックすると、テーマのプレビューが表示されます。また、「有効なテーマに設定」をクリックすると、このテーマをページのデフォルトとして使用できます。 

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

  • コンテンツを開きます。

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

テンプレートをプレビューまたは選択

  • コンテンツエディターで、ドラッグ&ドロップエディターを使用してページコンテンツを編集します。 
  • 変更内容を反映させるには、右上の[公開]または[更新]をクリックし、ダイアログボックスの[今すぐ公開]または[今すぐ更新]をクリックします。 

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

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

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

ブログテンプレートを管理

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

テーマのブログテンプレートを選択

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

注:コンテンツエディターで編集可能なブログ リスト ページの場合、この手順に従うとテーマ選択画面ではなくコンテンツエディターが開きます。 

テーマ設定を編集する

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

グローバルテーマのフォントを編集

テーマを管理する

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

親テーマに影響を与えることなく子テーマのテーマ設定を編集できますが、テーマアセットの追加的なコピーは作成されません。親テーマのアセットをコピーするには、テーマを複製することをお勧めします。 

テーマを複製する

デザインマネージャーで既定のテーマのコードファイルを編集するには、まず複製する必要があります。テンプレートマーケットプレイスから購入したテーマは複製できないため、代わりに子テーマを作成することをお勧めします。 

  • HubSpotアカウントにて、[コンテンツ]>[デザインマネージャー]の順に進みます。
  • ファインダーで、[@hubspot]フォルダーをクリックします。このフォルダーには、ドラッグ&ドロップのEメールモジュールなど、すべてのテーマと既定のモジュールが含まれています。
    デザインマネージャーのhubspotフォルダー
  • テーマフォルダーを右クリックし、[テーマを複製]を選択します。 
デザインマネージャーでテーマフォルダーを複製
  • ダイアログボックスにテーマの名前を入力し、[作成]をクリックします。

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

子テーマを作成する

デザインマネージャーでは、購入したテンプレートマーケットプレイスのテーマや既定のHubSpotテーマをベースに、子テーマ(購入したテーマのコピー)を作成することができます。親テーマに影響を与えることなく、子テーマのテーマ設定を編集することができます。 

また、開発者は、カスタムテーマをベースにした子テーマを作成したり、開発者向けドキュメントを使ってCLIで子テーマを作成することができます。子テーマの使用について詳細をご確認ください。 

  • HubSpotアカウントにて、[コンテンツ]>[デザインマネージャー]の順に進みます。
  • ファインダー内で、テンプレートマーケットプレイスのテーマの場合は[@marketplace]フォルダーを、既定のテーマの場合は[@hubspot]フォルダーをクリックします。 
  • テーマのフォルダーを右クリックし、[子テーマを作成]を選択します。 
  • ダイアログボックスに子テーマの名前を入力します。
  • 子テーマの保存先を変更するには、[ファイルの場所]セクションの[変更]をクリックします。フォルダーをクリックし、[選択]をクリックします。
  • テーマのCSSファイルとJSファイルの名前をカスタマイズするには、[詳細オプション]をクリックし、[CSS]と[JS]のフィールドに新しいファイル名を入力します。 
  • プロセスを完了するには、[子テーマを作成]をクリックします。コンテンツエディターで、子テーマのスタイルを編集できます。 

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

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

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

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

  • HubSpotアカウントにて、[コンテンツ]>[デザインマネージャー]の順に進みます。
  • ファインダーで、コピーするテーマフォルダーの上にマウスポインターを置いてから、そのフォルダーを右クリックし、[別のアカウントにコピー]を選択します。

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

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

Content Hubアカウントのユーザーは、EnvatoのThemeForest MarketplaceからHubSpotのテーマを購入し、テーマ選択画面からHubSpotにアップロードできます。 

  • EnvatoのThemeForest Marketplaceの「HubSpot CMS Hub」セクション(英語)に移動します。 
  • マーケットプレイスからテーマを購入します。
  • 購入したテーマの購入コードを含むEメールが届きます。購入コードをコピーします。 

envatoの購入コードをコピー

  • コンテンツを開きます。

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

HubSpotでテーマを変更

  • 右上の[ThemeForestからテーマをインストール]をクリックします。

テーマからテーマをインストール

  • ダイアログボックスに、Eメールに記載されている購入コードを貼り付けて、[テーマをインストール]をクリックします。 
  • 新しいタブで、EnvatoのThemeForest Marketplaceにログインして、インストール処理を完了します。 

ログインに成功すると、HubSpotにバナーが表示されます。テーマが利用可能になるまで数分かかる場合があります。 

テーマをアップロード

テーマを削除する

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

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

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

  • HubSpotアカウントにて、上部のナビゲーションバーに表示されるマーケットプレイスアイコンmarketplaceをクリックし、[テンプレートマーケットプレイス]を選択します。
  • [購入済み]タブをクリックします。 
  • 該当テーマの上にマウスポインターを置き、[アクション]ドロップダウンメニューをクリックし、[アンインストール]を選択します。 
  • ダイアログボックスで、[アンインストール]をクリックします。
この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。