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

テーマを使用

更新日時 2022年 9月 13日

対象製品

すべての製品とプラン

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

テーマを理解する

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

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

有効なテーマを使用する

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

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

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング] > [ランディングページ]の順に進みます。
  • 右上の[作成]ドロップダウンメニューをクリックし、ウェブサイトページまたはランディングページを選択します。
  • ダイアログボックス内で、ページ名を入力し、続けて[ページを作成]をクリックします。
  • テーマ選択画面で、テーマにカーソルを合わせ、[テーマのプレビュー]をクリックしてテーマのプレビューを開くか、[アクティブなテーマとして設定]をクリックして、このテーマをページのデフォルトとして使用します。  

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

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

change - theme - in - hubspot

  • テーマ選択画面で、テーマにカーソルを合わせ、[テーマのプレビュー]をクリックしてテーマのプレビューを開くか、[アクティブなテーマとして設定]をクリックして、このテーマをページのデフォルトとして使用します。  

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

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

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

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

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

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

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

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

変更ブログテンプレート

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

select-a-theme-blog-template

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

注意:コンテンツエディターで編集できるブログリストページの場合、これらの手順はテーマ選択画面の代わりにコンテンツエディターにつながります。 

テーマ設定を編集する

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

edit-global-theme-fonts

テーマを管理する

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

テーマを複製する

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

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

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

子テーマを作成する

デザインマネージャーでは、購入したアセットマーケットプレイスのテーマや既定のHubSpotテーマをベースに、子テーマ(購入したテーマのコピー)を作成することができます。 

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

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

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

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

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

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

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

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

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

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

copy-your-envato-purchase-code

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

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

change - theme - in - hubspot

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

install - a - theme - from - themeforest

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

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

upload-theme

テーマを削除する

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

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

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

  • HubSpotアカウントにて、ナビゲーションバーに表示される[マーケットプレイスアイコンmarketplace ]をクリックします。
  • [購入済み]タブをクリックします。
  • 該当テーマの上にカーソルを置き、[アクション]ドロップダウンメニューをクリックしてから、[アンインストール]を選択します。
  • ダイアログボックスで、[アンインストール]をクリックします。
Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.