カスタムモジュールを使用してカスタムサイト機能を追加する方法

更新日時 July 1, 2016

必要条件

ソフトウェア: HubSpot マーケティング
サブスクリプション: Basic, Pro, & Enterprise

デザインマネージャーには、ページに高度な機能を追加するために使用できるカスタムモジュールのコーディング機能が用意されています。また同時に、マーケターがこれらのモジュールのコンテンツを簡単にカスタマイズすることも可能です。カスタムモジュールは、HTML、CSS、Javascript、およびHubLをサポートしています。カスタムモジュールには、たとえば以下のようなものがあります。

  • カスタム画像ギャラリーまたは画像スライダー
  • イベントのリスト
  • 画像およびプロフィールを備えた従業員リストモジュール
  • ユーザーがCSSクラスを切り替えてその表示を制御できるセクション

手順

以下では、カスタムモジュールを作成する手順を説明します。

デザインマネージャーに移動

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

Navigate to Design Manager

新しいカスタムモジュールを作成

新しいカスタムモジュールを作成します。

New custom module
Custom module select

カスタムモジュールに名前を付ける

カスタムモジュールに名前を付けて保存します。カスタムモジュールの名前を変更すると、エディターに入力したコンテンツが失われることに注意してください。 このモジュールを現在使用しているページが新しい名前を参照するように更新されることはなく、既存のコンテンツは失われます。
Name custom module

マークアップを記述

編集可能なフィールドを囲むマークアップを記述します。既に説明したように、カスタムモジュールはHTML、CSS、およびJavascriptをサポートしています。

フィールドを追加

コンテンツ作成者用として編集可能なフィールドを追加する場合は[Add new field(新しいフィールドを追加)]をクリックします。
Add custom module field

新しいフィールドを追加するには[Add new field(新しいフィールドを追加)]をクリックします。また、フィールドを並べ替え/削除するには[Arrange fields(フィールドを整理)]をクリックします。カスタムモジュールでは現在、以下のフィールドタイプをサポートしています。

  • Text(テキスト)テキストフィールドを使用して、ユーザーがコンテンツエディターでテキストの文字列を挿入できるようにします。
  • Rich text(リッチテキスト)リッチテキストエリアでは、HubSpotのリッチテキストエディターで使用可能なすべてのオプションをユーザーに提供します。
  • Boolean(ブール)ブールフィールドでは、ユーザーがカスタムモジュール内のコードの特定のセクションを切り替えるためのチェックボックスを作成します。
  • Image(画像)画像フィールドでは、マーケターがコンテンツエディターからアップロードした画像を選択できる画像を追加します。
  • Choice(選択肢)選択肢フィールドでは、ユーザーが値を選択できるドロップダウンを作成します。
Set-up-custom-field.png

スニペットをコピーしてペースト

コードにカスタムフィールドの1つを組み込む準備が整ったら、[Copy snippet(スニペットをコピー)]をクリックし、そのスニペットをコードに貼り付けます([Ctrl]+[V]または「Cmd V」)。 カスタムモジュールの構文について詳しくは、こちらの記事をご覧ください。

カスタムモジュールを公開

[Update(更新)]を押して、カスタムモジュールを公開します。

HubSpot Help article screenshot

テンプレートに追加

これで、任意のランディングページまたはサイトページのテンプレートにモジュールを追加する準備が整いました。テンプレートにカスタムモジュールを追加するには、任意のモジュールのギアアイコンをクリックし、[Swap module(モジュールを交換)]を選択します。

Swap module

次に、カスタムモジュール別にフィルター処理できます。追加したいカスタムモードを選択し、[Select(選択)]をクリックします。

Add to template
注意:現時点では、ブログテンプレートにカスタムモジュールを追加することはできません

前の記事

次の記事