Become a HubSpot power user — join us for HubSpot Training Day 2017.

HTMLページテンプレートとHTML Eメールテンプレートのコーディング方法

更新日時 July 1, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise
Template Builder(テンプレートビルダー)を使用すると、コンテンツ作成者はより柔軟にコンテンツを構成でき、デザイナーは何百行ものHTMLを書く時間を節約できます。また、HubSpotのDesign Manager(デザインマネージャー)を使用すると、デザイナーが、HTMLを使用したテンプレートをゼロから作成できるようになります。テンプレートをゼロから作成後は、HubLタグ(HubSpotマークアップ言語)を追加して、HubSpotのコンテンツエディターでカスタマイズできる編集可能なモジュールを作成する必要があります。
HTMLサイトまたはHTML Eメールをゼロからコーディングすることによって、自動的にテンプレートがレスポンシブになるわけではないことにご注意ください。

手順

HTML EメールテンプレートまたはHTMLページテンプレートを作成するには、次の手順に従います。

Design Manager(デザインマネージャー)に移動する

[Content(コンテンツ)] > [Design Manager(デザインマネージャー)]の順に進みます。

Navigate to Design Manager

新規コードファイルを作成する

コードファイルのフォルダーを選択し、[New Coded File(新規コードファイル)]をクリックします。

New coded file

コードファイルのタイプを選択する

選択したコードファイルタイプによって、ファイルが保存されるマスターフォルダーだけでなく、そのファイルタイプのHubLトークン要件も決まります。

Code editor

ファイルに名前を付けて保存する

ファイル拡張子.htmlを付けてファイル名を入力し、[Save(保存)]を押します。

HubSpot Help article screenshot

テンプレートのコーディングを行う

次に、ページテンプレートまたはEメールテンプレートのHTMLを記述する必要があります。HubSpotのコードエディターでは、インデント、HTML構文のハイライト、タグの閉じが自動で処理されます。また、HubSpotのIDE(連携開発環境)には、デザイナーが簡単にコーディングできるようにするための機能が他にもいろいろあります。

テンプレートを公開する

テンプレートまたはHTMLファイルを公開するには、[Publish Changes(変更を公開)]をクリックします。

HubSpot Help article screenshot

コンテンツ作成者がテンプレートを利用できるようにするかどうか確認するメッセージが表示されます。[Make this template available for new content(新しいコンテンツでこのテンプレートを利用できるようにする)]のチェックを外すと、HubSpotの必須テンプレートタグを追加せずにHTMLファイルを保存できますが、コンテンツ作成者のためのオプションとしてこのテンプレートを利用することはできなくなります。別のテンプレートファイルにインクルードするグローバルセクションがその1例です。 

Confirm Update

必要なHubLタグを追加する

HTMLを書き終わり、HTMLで作成されたテンプレートを公開しようとした場合に、必要なHubLタグがコードに含まれていないことを知らせるメッセージが表示されることがあります。HubLタグは、コードをHubSpotの設定とコンテンツエディターに接続します。必要なテンプレート変数HubLモジュールタグの詳細はリンク先をご覧ください。

ファイルに複製する

ゼロからコーディングする代わりに、HubSpotのテンプレートの1つをファイルに複製することもできます。テンプレートをファイルに複製すると、テンプレートのHTMLやHubLにアクセスできるようになります。また、作成したHubSpotテンプレートのリバースエンジニアリングとしても最適です。テンプレートをファイルに複製するには、[Actions(アクション)] > [Clone to file(ファイルに複製)]の順に選択します。 次に、ファイルに.html拡張子を付けて名前を付けます。

HubSpotのTemplate Builder(テンプレートビルダー)を利用すると、デザイナーもマーケターも時間を節約できるため、ゼロからテンプレートを作成するよりも、Template Builder(テンプレートビルダー)で作成されたスタイル設定済みのテンプレートを使用することをおすすめします。テンプレートの構成方法とスタイル設定の方法については、このガイドの前の複数のセクションで紹介しています。

前の記事

次の記事