レイアウトエディターでページ、Eメール、ブログのテンプレートを作成する
更新日時 2023年 4月 6日
以下の 製品でご利用いただけます(別途記載されている場合を除きます)。
|
|
Marketing Hub Basic(旧製品) |
テンプレートを使用すると、ブログ、ページ、またはEメールでさまざまなタイプのコンテンツの構造を制御できます。デザインマネージャーでは、モジュールをドラッグ&ドロップすることでテンプレートを作成することができます。HubSpotのテンプレート構成に関するさらに詳しい説明は、こちらのアカデミー講座(英語)を参照してください。
注:Eメールテンプレートを作成するには、Marketing Hub ProfessionalまたはEnterpriseのサブスクリプションが必要です。CMS Hubアカウントの場合は、ドラッグ&ドロップで操作できるEメールエディターを使用してEメールを作成できます。
HubSpotテンプレートについて
HubSpotのテンプレートは、ユーザーがコンテンツエディターで作成するブログ、ページ、E メールの構造を設定するもので、。コンテンツモジュールをドラッグ&ドロップしてレイアウトを作成することで、テンプレートを構築することができます。HTMLを使用してテンプレートを作成する場合は、カスタムコード化されたテンプレートの作成について詳しく説明します。
レイアウトエディターを使えば、アイデア、スケッチ、プロトタイプをコンテンツ作成のためのレスポンシブテンプレートに変換することができます。

新規テンプレートを作成する
- HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインツール]の順に進みます。
- ファインダー上部で[ファイル]>[新規ファイル]をクリックします。
- ダイアログボックスで、[今日は何を作成しますか?]ドロップダウンメニューをクリックし、[ドラッグ&ドロップ]を選択します。[次へ]をクリックします。
- [テンプレートタイプ]ドロップダウンメニューをクリックしてタイプを選択します。ほとんどのデフォルトモジュールはどのテンプレートでも利用可能ですが、一部のモジュールは特定のテンプレートタイプに限定されています。テンプレートのタイプは、次の中から選択します。
- ブログ:個別のブログ記事およびブログリストページのテンプレート。
- Eメール:Eメールのテンプレート。
- ページ:ウェブサイトとランディングページのテンプレート。
- システム:エラー、パスワードプロンプト、 Eメール購読ページのテンプレート。
- ファイル名を入力します。完了したら、[作成] をクリックします。

テンプレートの構成とカスタマイズ
デザインマネージャーの右側にあるインスペクターを使用して、テンプレートにモジュールを追加することができます。インスペクターの[+追加]をクリックして、追加したいモジュールを検索し、ドラッグ&ドロップのテンプレートレイアウトに追加します。テンプレートの構造の編集について、詳しくはこちらをご覧ください。
テンプレートのスタイルは、インスペクターのオプションを利用してカスタマイズできます。特定のモジュールを選択しない場合、テンプレートのHeadに直接スタイルを追加することができます。モジュールまたはグループをクリックすると、そのコンポーネントに固有のスタイルオプションにアクセスできます。インスペクタを使ってテンプレートをスタイリングする方法について、詳しくはこちらをご覧ください。
ご注意: CSSやJavascriptファイルをEメールテンプレートに添付することはできませんが、、カスタムHTMLマークアップ、ボディクラス、インラインスタイリングをテンプレートに追加することができます。
テンプレートをプレビューして公開する
- 右上の [プレビュー] をクリックして、ウェブブラウザーにテンプレートのプレビューを表示します。表示オプション付きライブプレビューを選択した場合、他のデバイスで表示されるようにテンプレートを表示することができます。
- テンプレートが完成したら、右上の [変更を公開] をクリックします。
新しいテンプレートが公開されると、そのテンプレートを使って新しいページを作成したり、Eメールを作成したりすることができるようになります。ブログテンプレートは、ブログの設定で、既存のブログに適用することができます。
関連記事
-
スマート コンテンツ ルールを作成して管理する
スマート コンテンツ モジュールには、閲覧者カテゴリーに基づいて異なるバージョンのコンテンツが表示されます。例えば、特定の国からの訪問者またはモバイルデバイスで閲覧している訪問者に代替案を作成することができます。 また、
ナレッジベース -
コンテンツをパーソナライズする
...
ナレッジベース -
カスタム コード テンプレートを作成する
開発者は、HTMLを使用することで、ブログ、ウェブサイトページ、ランディングページ、Eメールのテンプレートをゼロから作成することができます。または、ドラッグ&ドロップテンプレートのレイアウトをHTMLに複製...
ナレッジベース