テーマを使用する

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

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

テーマを理解する

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

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

有効なテーマを使用する

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

1. 目的のコンテンツに移動します。
   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
2. [作成]または[開始する]をクリックします。
3. テーマ選択ページで、目的のテーマカードの[ 有効なテーマに設定]をクリックします。テーマをプレビューするには、[ テーマをプレビュー]をクリックします。
4. テンプレート選択ページで、目的のテンプレートカードの [テンプレートを選択 ]をクリックします。次に 、HubSpotのドラッグ&ドロップエディターを使用してページの作成を続けます

有効なテーマを変更

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
2. 右上の[ 作成]または [開始する]をクリックします。 
3. テーマをウェブサイトページから変更するには、[ テーマ ]ドロップダウンメニューをクリックし、[ テーマを変更]を選択します。次に、目的のテーマカードで [有効なテーマに設定 ]をクリックします。

4. テーマをランディングページから変更するには、左側のメニューでテーマ の名前 をクリックします。次に、目的のテーマカードで [有効なテーマに設定 ]をクリックします。

5. テーマ選択画面で、テーマにマウスポインターを合わせ、[ テーマをプレビュー ]をクリックするとテーマのプレビューが開くか、 有効なテーマに設定]をクリックします。
6. 次に、テーマからテンプレートを選択して、HubSpotのドラッグ＆ドロップエディターを使用してページの作成を続行できます。

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

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
2. 右上の[ 作成]または [開始する]をクリックします。
3. 以前にテーマを選択したことがない場合、テーマ選択画面に移動します。目的のテーマカードで、[ 有効なテーマに設定]をクリックします。テーマをプレビューするには、[ テーマをプレビュー]をクリックします。
4. テンプレート選択画面で、有効なテーマのテンプレートが［テーマテンプレート］セクションに表示されます。アクティブなテーマの一部でないテンプレートを表示するには、「他のテンプレート」をクリックします。
5. テーマからテンプレートを選択するには、[ テンプレートを選択 ]または [使用]をクリックします。
6. コンテンツエディターで、ドラッグ＆ドロップエディターを使用してページコンテンツを編集します。

7. 変更内容を公開するには、右上の [公開 ]または [更新 ]をクリックします。

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

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

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

6. テーマ選択画面で、目的のテーマカードをクリックしてから、テンプレート カードをクリックします。右下の［完了］をクリックします。

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

テーマ設定を編集する

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

テーマを管理する

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

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

テーマを複製する

デザインマネージャーでデフォルトのテーマのコードファイルを編集するには、まず複製する必要があります。

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、［@hubspot］フォルダーをクリックします。このフォルダーには、 ドラッグ&ドロップEメールモジュールを含む全てのテーマとデフォルトのモジュールが含まれています。
3. テーマ フォルダーをクリックします。
4. [ファイル ]ドロップダウンメニューをクリックし、[ テーマを複製]を選択します。
5. ダイアログボックスにテーマ の名前を入力します 。
6. 複製したテーマのファイルの場所を変更するには、[ ファイルの場所 ]フィールドで[ 変更 ]をクリックします。次に、場所を選択します。既定では、ルートフォルダーが選択されています。
7. 完了したら、[ 作成]をクリックします。

子テーマを作成する

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

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

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

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

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

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

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

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、コピーする テーマフォルダー の上にマウスポインターを置いてから、 そのフォルダー を右クリックし、[ 別のアカウントにコピー]を選択します。
3. ダイアログボックスで[ コピー先アカウント]ドロップダウンメニューをクリックし、 アカウントを選択します。次に、[ アセットをコピー]をクリックします。コピー処理が完了するとすぐに、フォルダーがコピー先アカウントに表示されます。
   
   

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

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

1. EnvatoのThemeForest Marketplaceの「HubSpot CMS Hub」セクション（英語）に移動します。
2. マーケットプレイスからテーマを購入( 英語)します。
3. 購入したテーマの購入コードが記載されたEメールが届きます。購入コードをコピーします。
4. HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
5. 右上にある［作成］をクリックします。
6. [ テンプレートを選択 ]ページで、[ テーマ]ドロップダウンメニューをクリックして、[ テーマを変更]をクリックします。

7. [ テーマを選択 ]ページで、ページの下部にある[ ThemeForestからテーマをインストール ]をクリックします。
8. ダイアログボックスに、Eメールに記載されている購入コードを貼り付けて、［テーマをインストール］をクリックします。
9. 新しいタブで、EnvatoのThemeForest Marketplaceにサインインして、インストールプロセスを完了します。
10. サインインすると、HubSpotにバナーが表示されます。テーマが利用可能になるまで数分かかる場合があります。

テーマを削除する

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

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。
2. ファインダーで、テーマのアセットを含む フォルダー をクリックします。
3. [ファイル]ドロップダウンメニューをクリックし、[ [フォルダー名]を削除]を選択します。
4. ダイアログボックスで チェックボックスをオンにして依存項目を確認したことを確認してから、[ このフォルダーを削除]をクリックします。

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

1. HubSpotアカウントにて、上部のナビゲーションバーに表示されるマーケットプレイスアイコン marketplaceをクリックし、［マーケットプレイスでのダウンロード］を選択します。
2. [テーマ]タブで、[ アクション ]ドロップダウンメニューをクリックし、該当するテーマの [アンインストール ]を選択します。 
3. アンインストールする前に、ブログ記事またはページのテンプレートの変更が必要になる場合があります。ページまたは記事テンプレートの変更について詳細をご確認ください。 
4. ダイアログボックスで、［アンインストール］をクリックします。