更新日時 2022年 6月 16日
一つのテーマは、テンプレート、モジュール、グローバルコンテンツ、およびスタイル設定のセットであり、ウェブサイトの作成に使用できます。テーマはアセットマーケットプレイスからダウンロードできますが、「CMS Hub」アカウントでは既定のHubSpotテーマを使用することもできます。ドラッグ＆ドロップ コンテンツ エディターでテーマを使用してページを編集し、ブログ設定で、テーマを使用するためのブログテンプレートを設定できます。
テーマを理解する
テーマは、次のものを含む、ウェブサイト用の一連のファイルです。
- コードテンプレート：ホームページに使用できる一連のテンプレート。ホームページ、会社概要ページ、ランディングページ、ブログなどのテンプレートがあります。これらのテンプレートは、開発者によってカスタムコーディングされるものですが、そのコンテンツとレイアウトはドラッグ＆ドロップ コンテンツ エディターでカスタマイズできます。
- モジュール：そのテーマを使用しているコンテンツに追加可能な、一連の専用のテーマモジュール。
- グローバルコンテンツ：ウェブサイトのヘッダーやフッターなど、複数のページで繰り返されるコンテンツ。ドラッグ＆ドロップ ページ エディターから直接グローバルコンテンツを編集することができます。
- テーマ設定：フォント、間隔、色などを含む、テーマを使用したテンプレートのスタイル設定。
有効なテーマを使用する
有効なテーマを設定して、新しく作成されるページの既定のオプションとしてそのテーマのページを表示できます。有効なテーマを設定または変更しても、既存のコンテンツに使用されているテーマは変更されないため、コンテンツの現在のテンプレートを交換する必要があります。追加のテーマは、アセットマーケットプレイスで購入できます。
-
コンテンツを開きます。
- ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
- ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
- 右上の［作成］ドロップダウンメニューをクリックし、ウェブサイトページまたはランディングページを選択します。
- ダイアログボックス内で、ページ名を入力し、続けて［ページを作成］をクリックします。
- テーマ選択画面で、テーマを選択します。右上の［プレビュー］をクリックしてテーマをプレビューするか、［選択して続行］をクリックしてテーマを有効に設定します。
テーマを設定すると、その後は新しいページを作成するたびにテンプレート選択画面が表示されます。この画面では、別の有効なテーマに切り替えることができます。
- ［テーマ］ドロップダウンメニューをクリックし、［テーマを変更］を選択します。
- テーマ選択画面で、テーマを選択します。右上の［プレビュー］をクリックしてテーマをプレビューするか、［選択して続行］をクリックしてテーマを有効に設定します。
テーマを使用してページを作成する
-
コンテンツを開きます。
- ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
- ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
- 右上の［作成］ドロップダウンメニューをクリックし、ウェブサイトページまたはランディングページを選択します。
- ダイアログボックス内で、ページ名を入力し、続けて［ページを作成］をクリックします。
- テンプレート選択画面で、テンプレートをクリックします。有効なテーマのテンプレートが「テーマテンプレート」セクションに表示されます。有効なテーマに含まれていないテンプレートを選択するには、［その他のテンプレート］をクリックしてからテンプレートをクリックします。
- 右上の［プレビュー］をクリックして選択したテンプレートをプレビューするか、［テンプレートを選択］をクリックしてコンテンツエディターに進みます。
- コンテンツエディターで、ドラッグ＆ドロップエディターを使用してページコンテンツを編集します。
- 右上の［更新］または［公開］をクリックして変更内容を適用します。
テーマテンプレートをブログに適用する
ブログ設定で、ブログで自分のページと同じテーマを使うように設定できます。ブログ記事とブログ リスト ページのテンプレートは個別に選択されます。
- HubSpotアカウントにて、ナビゲーションバーに表示される［設定アイコン ］をクリックします。
- 左のサイドバーメニューで、［ウェブサイト］>［ブログ］の順に進みます。
- 複数のブログがある場合は、［修正するブログを選択］ドロップダウンメニューをクリックしてブログを選択します。
- ［テンプレート］タブをクリックします。
- ［ブログ記事］および［Blog listing（ブログリスト）］セクションで、［アクション］ドロップダウンメニューをクリックして、［テンプレートを変更］を選択します。
- テーマ選択画面で［テーマ］を選択し、そのテーマを使用するテンプレートを選択します。右下の［完了］をクリックします。
- ブログ記事とブログ リスト ページのテンプレートを設定したら、左下の［保存］をクリックします。
テーマ設定を編集する
テーマ設定で、フォント、色、間隔を含むテーマのスタイルをカスタマイズできます。ここで編集したスタイルは、すべてのページとこのテーマに含まれるすべてのテーマモジュールに適用されます。テーマ設定の管理方法の詳細を確認してください。
テーマを管理する
デザインマネージャーで、テーマを編集、複製、または別のHubSpotアカウントにコピーすることができます。既定のHubSpotテーマ、複製したテーマ、カスタムテーマの削除や、子テーマの作成もできます。
テーマを複製する
デザインマネージャーで既定のテーマのコードファイルを編集するには、まず複製する必要があります。カスタムテーマとアセットマーケットプレイスから購入したテーマは複製することもできますが、直接編集することもできます。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- ファインダーで、@hubspotフォルダーをクリックします。このフォルダーには、ドラッグ＆ドロップのEメールモジュールなど、テーマと既定のモジュールがすべて含まれています。
- テーマのフォルダーを右クリックし、［テーマを複製］を選択します。
- ダイアログボックスで、テーマの名前を入力してから、［作成］をクリックします。
テーマがルートフォルダーにコピーされ、他のフォルダーと共にファインダーのリストに表示されます。
子テーマを作成する
デザインマネージャーでは、購入したアセットマーケットプレイスのテーマや既定のHubSpotテーマをベースに、子テーマ（購入したテーマのコピー）を作成することができます。
また、開発者は、カスタムテーマをベースにした子テーマを作成したり、開発者向けドキュメントを使ってCLIで子テーマを作成することができます。子テーマの使用について詳細をご確認ください。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- ファインダー内で、アセットマーケットプレイスのテーマの場合は@marketplaceフォルダーを、既定のテーマの場合は@hubspotフォルダーをクリックします。
- テーマのフォルダーを右クリックし、［子テーマを作成］を選択します。
- ダイアログボックスで、子テーマの名前を入力します。
- 子テーマの保存先を変更するには、［ファイルの場所］セクションの［変更］をクリックします。フォルダーをクリックし、［選択］をクリックします。
- テーマのCSSファイルとJSファイルの名前をカスタマイズするには、［詳細オプション］をクリックし、［CSS］と［JS］のフィールドに新しいファイル名を入力します。
- プロセスを完了するため、［子テーマを作成］をクリックします。コンテンツエディターで、子テーマのスタイルを編集できます。
テーマを別のアカウントにコピーする
1つのアカウントから別のアカウントにテーマフォルダーをコピーすることができます。両方のアカウントで「デザインツール」の権限を持っている必要があります。
注：@hubspotまたは@marketplaceのディレクトリーの中のテーマフォルダーをアカウント間でコピーすることはできません。
アカウントにテーマをコピーするには、次の手順を実行します。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- ファインダーで、コピーするテーマフォルダーの上にカーソルを置いてから、そのフォルダーを右クリックし、［別のアカウントにコピー］を選択します。
- ダイアログボックスで、アカウントを選択し、［アセットをコピー］をクリックします。コピー処理が完了するとすぐに、フォルダーが指定されたアカウントに表示されます。
テーマをアップロードする
CMS Hubアカウントのユーザーは、EnvatoのThemeForest MarketplaceからHubSpotのテーマを購入し、テーマ選択画面からHubSpotにアップロードできます。
- EnvatoのThemeForest Marketplaceの「HubSpot CMS Hub」セクションに移動します。
- マーケットプレイスからテーマを購入します。
- 購入したテーマの購入コードがEメールで届きます。購入コードをコピーします。
-
コンテンツを開きます。
- ウェブサイトページ：HubSpotアカウントにて、［マーケティング］ > ［ウェブサイト］ > ［ウェブサイトページ］の順に進みます。
- ランディングページ：HubSpotアカウントにて、［マーケティング］ > ［ランディングページ］の順に進みます。
- 右上の［作成］ドロップダウンメニューをクリックし、［ウェブサイトページ］または［ランディングページ］を選択します。
- ダイアログボックスで、ページ名を入力し、［ページを作成］をクリックします。
- テンプレート選択画面で、［テーマ］ドロップダウンメニューをクリックし、［テーマを変更］を選択します。
- 左のサイドバーメニューで［Envatoからアップロード］を選択します。
- ダイアログボックスに、Eメールに記載されている購入コードを貼り付けて、［テーマをインストール］をクリックします。
- 新しいタブで、EnvatoのThemeForest Marketplaceにログインして、インストール処理を完了します。
ログインに成功すると、HubSpotにバナーが表示されます。テーマが利用可能になるまで数分かかる場合があります。
テーマを削除する
既定のHubSpotテーマ、複製したテーマ、およびアップロードされたテーマはデザインマネージャーから削除することができます。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- ファインダーで、テーマのアセットの含まれているフォルダーをクリックします。
- ［ファイル］ドロップダウンメニューをクリックし、［［フォルダー名］を削除］を選択します。
- ダイアログボックスで［理解した上で、このフォルダーを削除します］チェックボックスを選択してオンにしてから、［このフォルダーを削除］をクリックします。
購入したテーマは、アセットマーケットプレイスからアンインストールする必要があります。
- HubSpotアカウントにて、ナビゲーションバーに表示される［マーケットプレイスアイコン ］をクリックします。
- ［購入済み］タブをクリックします。
- 該当テーマの上にカーソルを置き、［アクション］ドロップダウンメニューをクリックしてから、［アンインストール］を選択します。
- ダイアログボックスで、［アンインストール］をクリックします。
