CMS-General

モジュールの作成と編集

更新日時 November 21, 2018

対象製品

Marketing Hub
marketing-basic-pro-enterprise
Professional, Enterprise
Basic

デザインマネージャーのモジュールエディターを使用してモジュールを作成し、カスタム機能や高度な機能をブログ、ページ、E メールに追加できます。一方、マーケターは引き続きコンテンツエディターでモジュールコンテンツをカスタマイズできます。

モジュールエディターには、HTML&HubL、CSS、JavaScript の 3 つの編集ペインがあります。3 つの要素をすべて含めると、管理するさまざまなポータルで、または複数のテンプレートで一貫性をもってモジュールを使用できます。たとえば、モジュールエディターを使用して次のようなものを作成できます。

  • カスタム画像ギャラリーまたは画像スライダー
  • イベントのリスト
  • 顔写真と経歴を含む従業員リスト
  • ユーザーがCSSクラスを切り替えてその表示を制御できるようにするセクション

注:モジュールを作成するには、HTML、CSS、HubL、HubSpot デザインマネージャーに関する知識が必要です。必要に応じて、ユーザーはカスタム作成したモジュールを使用して、必要なスタイルシートや関連するJavaScriptファイルをページに含めることができます。モジュールを作成する場合はデザイナーと連携することをお勧めします。

新規モジュールの作成

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ファインダー上部で[ファイル][新規ファイル]をクリックします。

new-file

  • ダイアログボックスが表示されたら、[モジュール]をクリックします。

create-new-file-module

  • ページテンプレートブログテンプレートE メールテンプレートでこのモジュールを使用するかどうかを選択します。

注:これらのモジュールタイプには技術的な違いがあり、互換性がありません。たとえば、E メールの互換性のために E メールテンプレートを選択すると、CSS と JavaScript は無効になります。

  • モジュールのコンテンツ範囲をローカルモジュールまたはグローバルモジュールのどちらにするかを選択します。グローバルモジュールを作成する場合、このモジュールのコンテンツを編集すると、モジュールが使用されているすべての場所が更新されます。
  • モジュールのファイル名を入力し、[作成]をクリックします。

set-up-your-new-module

モジュールにフィールドを追加

  • 右側のモジュールインスペクターで、[フィールド]セクションの[フィールドの追加]ドロップダウンをクリックし、モジュールに追加するフィールドを選択します。

module-add-field

  • フィールド名を編集するには、フィールド名の横にある鉛筆アイコンをクリックし、HubL 変数名を編集します。

フィールドのデフォルトのコンテンツを追加

[コンテンツオプション]セクションで、フィールドにデフォルトコンテンツを追加できます。このデフォルトのコンテンツは、モジュールがテンプレートとコンテンツエディターで使用された場合に表示され、デフォルトコンテンツのオプションは、フィールドタイプに応じて異なります。

以下の例では、フィールドタイプは画像フィールドであるため、デフォルトコンテンツオプションでは、デフォルトの画像が選択され、サイズ制御が非表示になります。

field-content-options

フィールドエディターのオプションを設定

[エディターオプション]セクションで、次のオプションを有効にできます。

  • このフィールドを必須にする:ユーザーがこのフィールドを空白のままにすることはできません。
  • コンテンツエディターでの編集を禁止する:コンテンツエディターでモジュールが選択されているとき、エンドユーザーはフィールドコンテンツを編集できません。テンプレートレベルであればフィールドコンテンツは編集可能です。このオプションは、ページレベルで編集できないグローバルモジュールでは使用できません。
  • ヘルプテキスト:フィールドにヘルプテキストを追加して、ユーザーにコンテキストや指示を提供できます。

field-editor-options

フィールド表示条件を設定

別のフィールドが特定の条件を満たしている場合にのみ、ユーザーにフィールドを表示する場合もあります。

  • In the Display Conditions section, click the HubL variable dropdownメニューをクリックしてモジュールフィールドを選択し、[が空ではない]ドロップダウンをクリックしてそのフィールドの条件を選択します。
  • 条件[次と一致する]を選択する場合、値または regex を入力します。

以下の例では、表示条件は画像フィールドに対して設定されています。この条件では、画像フィールドがモジュールに表示されるためには、image_title(テキストフィールド)の値が「Headshot」(顔写真)と等しくなければなりません。

field-display-conditions

条件を設定すると、表示条件は自動的に有効になります。表示条件を無効にするには、[表示条件]の右側にある切り替えスイッチをクリックします。

フィールドの表示条件についての詳細は、デザイナードキュメントを参照してください。

フィールドリピーターオプションを設定

最後に、フィールドのリピーターオプションを設定できます。リピーターとは、複数のオブジェクトを作成し、forループを使用して表示できるフィールドおよびグループです。

  • [リピーターオプション]セクションで、このフィールドの必須インスタンスの最小数最大を選択します。
  • モジュールにデフォルトで表示されるフィールドのインスタンス数である[規定のオブジェクト数]を設定するように選択することもできます。

以下の例では、画像フィールドは画像スライダーとして設定されています。オブジェクト数の制限が設定されています。そのためモジュールに表示されるのは最小3個、最大5個の画像フィールドです。ユーザーにはデフォルトで4個の画像フィールドがモジュールに表示され、1個の画像フィールドを追加するか、既存の画像フィールドを1個削除することを選択できます。

field-repeater-options

いずれかのオプションを変更すると、リピーターオプションは自動的に有効になります。リピーターオプションを無効にするには、[リピーターオプション]の右側にある切り替えスイッチをクリックします。

フィールドの繰り返しとループについての詳細は、デザイナードキュメントで参照してください。

フィールドスニペットをコピーして貼り付ける

  • いずれかのカスタムフィールドをモジュールに組み込む準備ができたら、フィールドスニペットをコピーしてモジュールのHTML +HubLエディターペインに貼り付けます。
    • フィールドインスペクターが表示されている場合は、フィールドの[HubL 変数名]の右側にある[スニペットをコピー]をクリックします。
    • モジュールインスペクターが表示されている場合は、フィールドにマウスカーソルを置き、[アクション]ドロップダウンをクリックして、[スニペットをコピー]を選択します。
  • HTML +HubLエディターペインでフィールドを追加する場所をクリックして、Ctrl+VまたはCmd+Vを押してスニペットを貼り付けます。

copy-paste-field-snippet

モジュールの構文を作成

モジュールを編集するとき、HTML + HubLCSS、およびJSエディターペインに追加のモジュール構文を記述できます。モジュールコードエディターモジュール構文リファレンスについての詳細は、デザイナードキュメントを参照してください。

モジュールのプレビュー

モジュールエディターの右上にある[プレビュー]ボタンをクリックすると、いつでもコンテンツエディターでのモジュールの表示および機能方法をプレビューできます。モジュールのプレビューが新しいタブで開きます。このプレビューはエディターと同期され、作業の進行に合わせて自動的に更新されます。

preview-module

モジュールを公開

フィールドの追加とモジュール構文の作成が完了し、プレビューでのモジュールの表示と機能に問題がなければ、モジュールの公開へと進むことができます。モジュールエディターの右上にある[変更を公開]をクリックします。

publish-module

モジュールをテンプレートで使用できるようにする

  • エディターの上部にある[テンプレートで使用可能にする]スイッチを[オン]に切り替えてこのモジュールをテンプレートに追加できるようにします。

content-toggle

  • モジュール機能の変更やテストを行う場合は、スイッチを[オフ]に切り替えます。この切り替えスイッチが無効になっている場合、このモジュールはテンプレートに使用できないという警告がチームに表示されます。

make-module-available

モジュールをテンプレートに追加

  • テンプレートレイアウトエディターで、レイアウトインスペクターの上部にある[追加]タブをクリックし、モジュールを検索します。作成したカスタムモジュールは、カスタムモジュールアイコンで識別できますcustomModules
  • モジュールをテンプレートの配置する場所にドラッグ&ドロップします。

add-custom-module

マーケットプレイスからモジュールを追加または購入

独自のモジュールを作成するだけでなく、他のユーザーやプロバイダーが作成したカスタムモジュールを HubSpot マーケットプレイスで追加または購入できます。

HubSpot Marketing Hub BasicProfessional、または Enterprise 版のアカウントで、[マーケティング][ファイルとテンプレート][マーケットプレイス]の順に進みます。

左側の[製品を絞り込み]セクションで、[カテゴリ]にある[すべての製品]ドロップダウンをクリックし、[モジュール]を選択します。

使用可能なモジュールを次のように絞り込むことができます。

  • 価格:モジュールが無料か有料かを選択
  • 機能モジュールに含まれる機能のタイプを選択(計算、ギャラリー、地図など)
  • 連携:モジュールを使用できるテンプレートタイプを選択
  • プロバイダー:モジュールを提供するプロバイダを選択

モジュールを決定したら、マウスカーソルを置いて[詳細を表示]をクリックします。モジュールの詳細ページで、右上にある[このモジュールをテスト]をクリックしてデザインマネージャーに追加する前にモジュール機能をテストします。たとえば、独自のカスタムコンテンツを追加して、このモジュールがサイトのデザインで機能するかどうかを確認できます。

右上にある[モジュールを無料で取得]または[$x でモジュールを購入]をクリックします。モジュールが無料の場合、自動的にデザインマネージャーに追加されます。モジュールが有料の場合、支払いの詳細入力に進んでください。支払いが処理されると、モジュールはデザインマネージャーに追加されます。

add-module-marketplace