と
Skip to content
気ままに、ちまちま。テックと日常。

HubSpot でカスタムモジュールを作ってみよう 🎨

HubSpot でカスタムモジュールを作ってみよう 🎨
10:07
目次

はじめに

HubSpot ページを作ってる中で、よくさわるのが「モジュール」。デフォルトやテーマで用意されているものも多いけど、なんかやりたいことができるモジュールがない…という時もありますよね。

そんな方に向けて、今回はHubSpotでカスタムモジュールを作成する方法を詳しく解説します。カスタムモジュールを使えば、ページのデザインや機能を自由にアレンジでき、より魅力的なコンテンツを提供することが可能になります。

今回はシンプルな内容&ステップバイステップで進めていきますので、一緒にチャレンジしてみましょう！

モジュールって何？

この記事を読んでいる方には今更だと思いますが、HubSpot ページにおける「モジュール」はページを構成するためのパーツにあたるものです。（マーケティングEメールや見積もりテンプレートでも使われますが…今回はページにフォーカスします）

例えば、テキストブロックや画像ギャラリー、フォームなど、ページに必要な要素をモジュールとして組み込むことで、簡単にカスタマイズが可能になります。

📖 詳しく解説されているサイト : HubSpotのCMSテンプレート、テーマとは？モジュールの違いや使用方法など解説

モジュールを作ってみよう

さっそくモジュール作りをはじめましょう！今回はチーム紹介に使えるモジュールを作ってみます。

【完成図】

会社のHPによくあるチーム紹介に使えるようなモジュールを作ってみます👯

custom_module-24

＊基本的にはナレッジベース/Dev Docと似た内容になりますが、ドキュメントではHubSpot CLIなどの難しい部分にも触れています。ここではそういった複雑なことは気にせず、シンプルに進めていきましょう！

📖 公式ドキュメント

モジュールのガワとナカミ

モジュールを作成する前に、押さえておきたい重要な概念を説明します。（これを知っておくと、手順がスムーズに進むかなと！）

モジュールにはガワとナカミがあります。

  • ガワはユーザーがページエディターで操作する部分（UIの部分）
    custom_module-25
  • ナカミはモジュールの動作を決める部分（コードの部分）
    custom_module-26

モジュールはガワとナカミどちらか、では動かなくて、合わせて設定してあげることでやりたいことができるようになります。これらをそれぞれ次のステップで作っていきます💪

ステップ 1 : モジュールをデザインマネージャーで作成する

まず最初にモジュールそのものを作りましょう。

  1. HubSpot の［コンテンツ］> ［デザインマネージャー］をクリックして、デザインマネージャーの画面に移動します
  2. ［ファイル］> ［新規ファイル］をクリック
    image-png
  3. ［モジュール］を選びます
    custom_module-2
  4. モジュールを使う場所や名前を指定します。今回はページに使いたいので［サイトページ］を選択。名前は好きなお名前をつけましょう
    custom_module-3
  5. ファイルの場所は（ルートフォルダー内）のままで大丈夫です。カスタムテーマを作ってたら、そこの moduleフォルダを指定してもOK
  6. ［作成］ボタンを押します

モジュールのファイルができました！

custom_module-4

まだ中身は空っぽですが、ここからがスタートです！

補足）モジュールファイルの構成

モジュールファイルは

  • module.html
  • module.css
  • module.js

の３つで構成されています。

💡ざっくり理解

  • module.html 👉 モジュールのコンテンツを指定する
  • module.css 👉 モジュールの見た目を指定する
  • module.js 👉 モジュールに動きをつける

📖ちゃんと学びたい方はこっち見てね :   モジュールファイル

ステップ 2 : モジュールができることを指定する

では次にモジュールのナカミ（とガワ）を作っていきます。

今回のモジュールでは
① 顔写真
② 名前
③ 役職
④ 自己紹介
⑤ 関連リンクに飛ばすためのリンク
の５つの要素が設定できるようにしましょう。

① 顔写真

  1. モジュールエディターの右にある［フィールド］> ［フィールドを追加］をクリック
  2. 候補が表示されるので、［画像］を選択
    custom_module-5
  3. 2. の操作で"フィールド" （＝ページエディターで触れるガワの方）ができました。ただ、この状態では実際のナカミがないのでナカミも設定します
  4. フィールド作成後の状態で：［HubL変数］の下にある［コピー］をクリック > ［スニペットをコピー］を選択
    custom_module-6
  5.  コピーしたスニペットを［module.html］の欄にペーストします
    custom_module-7
  6. これで、モジュールの動きを指定するナカミも設定ができました
  7. 最後にわかりやすいように名前をつけておきます。✏マークをクリックして、「顔写真」と入力します
    custom_module-10

② 名前

  1. 基本的な手順は①と同じ。②は［テキスト］フィールドを追加します
  2. 今回③でも［テキスト］フィールドを使うため、HubL変数名は "name_field" とします
  3. スニペットは①で貼り付けたコードの次の行に貼り付けましょう
  4. フィールドの名前は「名前」に変更しましょう
    custom_module-11

③ 役職

  1. ②と同じ手順で、［テキスト］フィールドをもう１つ追加します
  2. HubL変数名を"role_field" に変更し、スニペットを貼り付けます
  3. フィールドの名前は「役職」に変更しましょう
    custom_module-12

④ 自己紹介

  1. 自己紹介は複数行入力したいので、［リッチテキスト］フィールドを追加します
    custom_module-12
  2. 同様にスニペットを貼り付けて、名前は「自己紹介」とします

⑤ リンク

    1. ［URL］フィールドを追加します
    2. 以下内容を追加します（"実績紹介" やクラスの部分は好きな文言でOK、フィールドの名前を変えていたら 内の値を更新しておきましょう）
      <a href="" class="module_button" target="_blank" rel="noopener">
        実績紹介
      </a>

ここまでできたら一旦編集画面右上にある［変更を公開］ボタンを押しておきましょう！
custom_module-17

＊応用編：既定値を設定しよう

ここでは、ページの編集者がそのフィールドにどんな画像/テキストを指定したらいいかイメージがつきやすいように既定値を設定することができます。

例：画像フィールドの場合）

［コンテンツオプション］> ［デフォルトの画像］の部分で、任意の画像を指定します。
custom_module-8

（子猫はかわいいなあ…）

custom_module-14

モジュールをプレビューすると、デフォルトに指定した子猫ちゃんが何も設定せずとも表示されていることがわかります。（かわいい）

custom_module-15

ステップ 3 : モジュールをプレビューしてみる

一旦モジュールをプレビューして、どんな動きになるか見てみましょう🔍

エディター右上の［プレビュー］をクリックします。

custom_module-17

左側にさっきステップ2で設定したフィールドが表示されるので、画像を選んだりテキストを設定してみたりしましょう。👇の感じで右側にコンテンツが表示されたら、成功✨✨

custom_module-18

ステップ 4 : モジュールをおめかしする

ここまでのステップで充分モジュールとして機能します！
が、今の状態だと見た目としては殺風景なので、CSS を指定しておめかしをしましょう🎀

【CSS の指定方法】

CSS の指定方法としては、モジュールの module.css に追記する <style> タグに書く などありますが、今回は require_cssブロック と scope_cssタグ を使った方法で書いてみます。

💡  require_cssブロック と scope_cssタグ を使った方法だと、CSS をモジュールのみ に適用させることができるのでページ自体のCSSに影響を受けないのがおすすめポイントです

【CSS を設定しよう】

  1. モジュールの module.html の最後に を追加します
  2. 追加したタグの中に、<style> タグを追加
  3. <style> と </style> の間に、 を追加
    custom_module-20
  4.   の間にCSSを指定していきます
  5. 今回はHTMLタグ含めて👇の設定で指定してみましたが、好きなデザインに調整してみましょう
{# 画像 #} <div class="module_img"> {% if module.image_field.src %} {% set sizeAttrs = 'width="{{ module.image_field.width|escape_attr }}" height="{{ module.image_field.height|escape_attr }}"' %} {% if module.image_field.size_type == 'auto' %} {% set sizeAttrs = 'width="{{ module.image_field.width|escape_attr }}" height="{{ module.image_field.height|escape_attr }}" style="max-width: 100%; height: auto;"' %} {% elif module.image_field.size_type == 'auto_custom_max' %} {% set sizeAttrs = 'width="{{ module.image_field.max_width|escape_attr }}" height="{{ module.image_field.max_height|escape_attr }}" style="max-width: 100%; height: auto;"' %} {% endif %} {% set loadingAttr = module.image_field.loading != 'disabled' ? 'loading="{{ module.image_field.loading|escape_attr }}"' : '' %} <img src="{{ module.image_field.src|escape_url }}" alt="{{ module.image_field.alt|escape_attr }}" {{ loadingAttr }} {{ sizeAttrs }}> {% endif %} </div> {# 名前 #} <div class="module_name"> {% inline_text field="name_field" value="{{ module.name_field }}" %} </div> {# 役職 #} <div class="module_role"> {% inline_text field="role_field" value="{{ module.role_field }}" %} </div> {# 自己紹介 #} <div class="module_description"> {% inline_rich_text field="richtext_field" value="{{ module.richtext_field }}" %} </div> {# URL #} <a href="{{ module.url_field }}" class="module_button" target="_blank" rel="noopener"> 実績紹介 </a> {# CSS #} {% require_css %} <style> {% scope_css %} .module_img img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border-color:#EFBC9B; margin-bottom: 10px; } .module_name { font-size: 2rem; font-weight: bold; color: #EFBC9B; margin-bottom: 10px; /* 名前下の区切り線 */ border-bottom: 2px solid #FBF3D5; padding-bottom: 4px; width: fit-content; } .module_role { font-size: 1.5rem; font-weight: semi-bold; color: #9CAFAA; margin-bottom: 10px; } .module_description { margin-bottom: 10px; } .module_button { display: inline-block; padding: 10px 20px; background-color: #9CAFAA; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; text-align: center; } .module_button:hover { background-color: #D6DAC8; } {% end_scope_css %} </style> {% end_require_css %}

 

＊応用編：［スタイル］タブを定義しよう

普段モジュールを使っていると、ページエディター上の［スタイル］タブでボタンの色や文字の大きさなどを自由に指定できるものがあるかと思います。

これには、スタイルフィールドをモジュール内で指定する必要があります。今回の記事では省きますが、👇のサイトが詳しく説明されているので興味がある方はみてみてください。

📖【HubSpot】オリジナルのモジュールにスタイルグループを定義する

 

ステップ 5 : 作ったモジュールをページに追加する

テストページを作成して、今までに作ったモジュールが出てくるか見てみましょう！

＊ルートフォルダにおいてた場合は［その他のモジュール］、テーマの中に置いてる場合は［テーマモジュール］に出てくるはずです🕵

custom_module-22

早速ページに追加して、いろいろとさわってみましょう～（我が家のにゃんずを設定してみました😺）

custom_module-23

おわりに

カスタムモジュールの作成は、最初は少しハードルが高く感じるかもしれませんが、その分、ページのデザインや機能を自由にカスタマイズできる力を手に入れることができます。今回のステップバイステップガイドを通じて、基本的なモジュールの作成方法を学びましたが、これを基にさらに複雑なカスタマイズにも挑戦してみてください。自分だけのオリジナルなページを作り上げる楽しさを、ぜひ体験してみてくださいね！🏆
Reina

Written by Reina

HubSpot CMS (現 Content Hub) をメインに 気になったことをまとめます。猫が好きです

Read On