更新日時 2021年 7月 27日
テーマは、テンプレート、モジュール、グローバルコンテンツ、およびスタイル設定のセットであり、これを使用すれば誰でもウェブサイト全体を作成できます。テーマは、CMS開発者ドキュメントを使用して開発者の作成するコードファイルです。CMS Hubアカウントには、どんな業務にも合わせてカスタマイズできる既定のHubSpotテーマが含まれています。アセットマーケットプレイスにも利用可能なテーマがあります。
テーマとは
テーマは、次のものを含む、ウェブサイト用の一連のファイルです。
- コードテンプレート：ホームページに使用できる一連のテンプレート。ホームページ、会社概要ページ、ランディングページ、ブログなどのテンプレートがあります。これらのテンプレートは、開発者によってカスタムコーディングされるものですが、そのコンテンツとレイアウトはドラッグ＆ドロップ ページ エディターで簡単にカスタマイズできます。
- モジュール：所定のテーマに含まれるページテンプレートに追加してカスタマイズできる、テーマに固有の一連のモジュールです。
- グローバルコンテンツ：ウェブサイトのヘッダーやフッターなど、複数のページで繰り返されるコンテンツ。ドラッグ＆ドロップ ページ エディターから直接グローバルコンテンツを編集することができます。
- テーマ設定：フォント、間隔、色など、テーマのテンプレートのための既定の設定。テーマテンプレートを使用している新しいページは、スタイルの点で一貫性のあるものになります。
テーマをプレビュー
テーマのデザインをプレビューする最も簡単な方法は、新しいページを作成することです。コンテンツクリエイターでは、次の2種類のテーマから選択できます。
- HubSpotテーマ：CMS Hub ProfessionalおよびEnterpriseのアカウントに含まれる既定のHubSpotテーマ。
- 自分のテーマ：チームのウェブ開発者、ソリューションパートナー、HubSpot移行チーム、アセットマーケットプレイスのプロバイダーなど、CMSリファレンスドキュメントを使用してウェブ開発者が作成するカスタムテーマ。CMS Hubアカウントの場合、ページの作成に使用したHubSpotテーマは、自分のテーマにも表示されます。
テーマを使用してページのコンテンツを編集する
各テーマには、フォント、色、スタイルのためのテーマ設定に従うモジュールの独自セットが含まれています。これらのモジュールは水平方向の行と垂直方向の列としてグループ化されています。これらの行または列は、さまざまなセクションにグループ化することができます。これらの要素を移動したり再配置したりして、ページレイアウトの構造をカスタマイズすることができます。
テーマテンプレートを使用してページのコンテンツを編集する方法の詳細を確認してください。
テーマテンプレートをブログに適用する
HubSpotでブログコンテンツもホストしている場合、視覚的に一貫させるために、ブログテンプレートをウェブサイトと同じテーマに更新することをおすすめします。ブログ設定でテーマをブログに適用する方法を確認してください。
テーマ設定を編集する
ビジュアルデザインに関するベストプラクティスに従ったウェブサイトにするために、テンプレート上のボタン、フォーム、およびモジュールには、テーマの一貫した色、フォント、スタイルが適用されます。
ページエディター内のテーマ設定にアクセスするには、左側のパネルで［デザイン］タブをクリックします。ここで編集したスタイルは、すべてのページとこのテーマに含まれるすべてのテーマモジュールに適用されます。テーマ設定の管理方法の詳細を確認してください。
テーマを削除する
既定のHubSpotテーマと複製したテーマを、デザインマネージャーから削除することができます。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- ファインダーで、テーマのアセットの含まれているフォルダーをクリックします。
- ［ファイル］ドロップダウンメニューをクリックし、［［フォルダー名］を削除］を選択します。
- ダイアログボックスで［理解した上で、このフォルダーを削除します］チェックボックスを選択してオンにしてから、［このフォルダーを削除］をクリックします。
- HubSpotアカウントにて、ナビゲーションバーに表示される［マーケットプレイスアイコン ］をクリックします。
- ［購入済み］タブに移動します。
- 該当テーマの上にカーソルを置き、［アクション］ドロップダウンメニューをクリックしてから、［アンインストール］を選択します。
- ダイアログボックスで、［アンインストール］をクリックします。
ウェブサイト開発者向けの機能
CMS Hubで作成されたウェブサイトには、開発者とITチームがセキュリティーとパフォーマンスの機能を活用できます。開発者は、コードアラートでウェブサイトのパフォーマンスをすばやく簡単にモニタリングできます。また、コンテンツ監査APIエンドポイントを使用して、ウェブサイトのコンテンツに加えたすべての変更が記録されたログにアクセスすることもできます。CMSでのウェブサイト開発と開発者向けCMS APIの詳細を確認してください。
HubSpot CLIでテーマを構築することに加えて、HubSpotデザインマネージャーで既存のテーマを複製したり編集したりすることもできます。テーマを複製するには、次の手順を実行します。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- ファインダーで、@hubspotフォルダーをクリックします。このフォルダーには、ドラッグ＆ドロップのEメールモジュールなど、テーマと既定のモジュールがすべて含まれています。
- テーマのフォルダーを右クリックし、［テーマを複製］を選択します。
- ダイアログボックスで、テーマのコピーに名前を付けてから、［作成］をクリックします。
- テーマがルートフォルダーにコピーされ、他のフォルダーと共にファインダーのリストに表示されます。
テーマが複製されると、他のコードファイルを編集するのと同じ要領で編集することができ、ユーザーはテーマからランディングページやウェブサイトページを作成することができるようになります。
テーマを別のアカウントにコピーする
1つのアカウントから別のアカウントにテーマフォルダーをコピーすることができます。テーマフォルダーを別のアカウントにコピーするには、そのアカウントのユーザーでなければならず、両方のアカウントで「デザインツール」の権限を持っている必要があります。
注：@hubspotまたは@marketplaceのディレクトリーの中のテーマフォルダーをアカウント間でコピーすることはできません。
アカウントにテーマをコピーするには、次の手順を実行します。
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- 左のサイドバーで、コピーするテーマフォルダーの上にカーソルを置きます。フォルダーを右クリックし、［別のアカウントにコピー］を選択します。
- ダイアログボックスで、テーマのコピー先のアカウントを選択し、［アセットをコピー］をクリックします。
コピーの処理が完了すると、指定されたアカウントにテーマフォルダーが表示されます。
