テーマ別カスタムモジュールの概要

更新日時 July 13, 2016

必要条件

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

カスタムモジュールは、HTML、CSS、Javascript、HubLを使用して作成されたサイト向けに開発者が作成できる特殊な機能です。カスタムモジュールを使用すると、コンテンツ作成者はコードに触れることなく、サイトのコンポーネントを簡単に編集できます。HubThemeには、「ホームページ」、「お問い合わせ」テンプレートの基盤となる、再利用可能な複数のカスタムモジュールが用意されており、基本のテーマ別テンプレートに追加できます。

HubThemeには、次のカスタムモジュールがあります。

  • FAQ Module(FAQモジュール)
  • Team Member(チームメンバー)
  • Well Module(よく使うモジュール)
  • Testimonial(お客様の声)
  • Tabber(複数タブ)
  • Pricing Table(価格表)
  • Icon Module(アイコンモジュール)
HubSpotのデフォルトのテーマは、新しいHubSpotアカウントでのみご利用いただけます。既存のアカウントに標準的なHubSpotテーマをインストールする場合は、こちらの手順に従ってあなたのアカウントがこれらのテーマと互換性があることを確認します。

FAQ Module(FAQモジュール)

FAQモジュールは、企業に関する訪問者からの質問に答える場合に便利です。FAQカスタムモジュールは、質問テキストフィールド、回答リッチテキストエディター、モジュールの展開または折りたたみオプションで構成されています。

FAQ Module

FAQモジュールをテンプレート(ホームページテンプレートなど)に追加すると、ページエディターから質問と回答が編集できるようになります。

  1. FAQ Question(FAQの質問) - FAQの質問入力フィールドに質問を入力します。
  2. FAQ Answer(FAQの回答) - FAQの回答リッチテキストエディターに入力します。
  3. Expanded?(展開) - チェックボックスを使用して、モジュールの初期状態を展開または折りたたみのいずれかから選択します。
FAQ module

Team Member(チームメンバー)モジュールを使用して企業情報をカスタマイズし、チームのメンバーを紹介できます。チームメンバーモジュールは、Head Shot(顔写真)、Name(名前)、Title(肩書)、Bio(略歴)、Facebookのリンク、LinkedInのリンク、Twitterのリンクの7つのフィールドから構成されています。

  1. Head Shot(顔写真) - 顔写真フィールドは画像モジュールです。LinkedInのプロフィール写真を使用することをお勧めします。
  2. Name(名前) - 名前フィールドは、姓と名を入力する単一行の入力フィールドです。
  3. Title(肩書) - 肩書入力フィールドは、チームメンバーの肩書を入力する単一行の入力フィールドです。
  4. Bio(略歴) - 略歴フィールドは、チームメンバーの略歴を入力するリッチテキストエディターフィールドです。
  5. Social Links(ソーシャルリンク) - ソーシャルリンクは、チームメンバーがソーシャルリンクを入力できる単一行の入力フィールドです。次の形式を使用してください:https://www.facebook.com/hubspot
Team member module

Well Module(よく使うモジュール)

Well Module(よく使うモジュール)を使用すると、コンテンツに注意を促すことができます。 含まれる情報のタイプに応じた設定スタイルが組み込まれています。このモジュールには、Type of Well(よく使うタイプ)、Type of Well(よく使うサイズ)、閉じる機能、Well Text Editor(よく使うテキストエディター)のフィールドがあります。

Well module
  1. Type of Well(よく使うタイプ) - ドロップダウンから、よく使うタイプに適用する各スタイルを選択します。このスタイルでは、背景、テキストの色、罫線の色など、よく使うテーマの色を制御します。使用できるスタイルは次のとおりです。
    • Default(デフォルト) - テーマのデフォルトの色
    • Danger(危険) - 赤
    • Primary(主要) - 青
    • Success(成功) - 緑
    • Info(情報) - ライトブルー
    • Plain(シンプル) - グレー
  2. Well size(よく使うサイズ) - ドロップダウンから、よく使うモジュールに適用する各パディングを選択します。使用可能なサイズオプションは次のとおりです。
    • 小 - 20ピクセル
    • 中 - 24ピクセル
    • 大 - 28ピクセル
  3. 閉じる機能 - 「閉じる機能」チェックボックスを選択すると、右上端に「X」アイコンが配置されます。これにより、訪問者がコンテンツを閉じることができるようになります。このモジュールは、警告メッセージに使用すると便利です。
  4. Well Text Editor(よく使うテキストエディター) - よく使うコンテンツを入力できます。
Well module editor
Tabber(複数タブ)カスタムモジュールは、3つのタブと3つのタブコンテンツペインを使用して構成できます。タブとタブのコンテンツペインの数を追加または削除するには、複数タブカスタムモジュールのHTMLを編集する必要があります。

Testimonial(お客様の声)

お客様の声モジュールは、顧客からの意見や感想を訪問者に伝える場合に便利です。お客様の声モジュールは、Name(名前)、Company(会社名)、Company(会社名)、Quote(引用)の各入力フィールドで構成されます。

Testimonial module
  1. Name(名前) - 名前フィールドは、姓と名を入力する単一行の入力フィールドです。
  2. Company(会社名) -会社名入力フィールドは、企業名を入力する単一行の入力フィールドです。
  3. Head shot(顔写真) - 顔写真フィールドは画像モジュールです。LinkedInのプロフィール写真を使用することをお勧めします。
  4. Quote(引用) - 吹き出しで表示される引用文です。
HubSpot Help article screenshot

Tabber(複数タブ)

Tabber(複数タブ)や複数ペインのコンテンツは、製品データや仕様の表示に適しています。Tabber(複数タブ)は、反復可能で予測可能なコンテンツタイプの製品ページによく見られます。

Tabber module
  1. Tab Header(タブヘッダー) - これは、タブに表示されるテキストです。
  2. Tab Content Pane(タブコンテンツペイン) - これは、タブに対応し、タブが選択されたときに表示されるコンテンツです。
Tabber module editor

Pricing Table(価格表)

Pricing Table(価格表)は、契約ベースの企業に適しています。価格表モジュールは、Heading(見出し)、Heading(価格)、Heading(支払い回数)(日、月、年/年間)、コンテンツ、サインアップボタンのテキストの各入力フィールドで構成されます。

Pricing table
  1. Pricing Table Header(価格表ヘッダー) - 価格表の主な見出しです。ここには、「ライト」、「ベーシック」、「プロフェッショナル」など、プラン名を表示できます。
  2. Price(価格) - 価格入力フィールドには、価格の値を入力します。
  3. Date(日付) - 日付入力フィールドには、支払い回数(日、月、年/年間)を入力します。
  4. Pricing Table Rich Text Editor(価格表リッチテキストエディター) - 価格表リッチテキストエディターには各価格プランの主な内容を入力します。箇条書きにして、主要な数値を強調表示することをお勧めします。
  5. 価格表ボタンテキスト - 価格表ボタンテキストはボタンに表示されるテキストです。よく使われるテキストは、「サインアップ」や「詳細を見る」です。
  6. Pricing Table Popular Label(価格表人気ラベル) - これは、最も人気のある価格オプションを強調表示するチェックボックスオプションです。
Pricing table editor

Icon Module(アイコンモジュール)

アイコンを使用すると、コンテンツに注意を促すことができ、可読性も高まります。Icon Custom Module(アイコンカスタムモジュール)では、Font Awesomeライブラリのショートコードを使用してアイコンを表示できます。 さまざまなテキストモジュールで、このショートコードを使用できます。

Icon module
  1. Icon Module(アイコンモジュール) - 使用するアイコンを入力する入力フィールドです。以下の例[fa icon="home"]のように、使用するアイコンを引用符に挿入します。
  2. Icon Size(アイコンのサイズ) - ピクセル単位でアイコンのサイズを編集します。
Icon module editor

利用可能なアイコンの一覧

  調整
  アンカー
  アーカイブ
  矢印
  矢印-横
  矢印-縦
  アスタリスク
  禁止
  棒グラフ-o
  バーコード
  グラフ
  ビール
  ベル
  ベル-o
  ボルト
 
  ブックマーク
  ブックマーク-o
  ブリーフケース
  バグ
  建物-o
  メガホン
  標的
  カレンダー
  カレンダー-o
  カメラ
  カメラ-レトロ
  キャレット-四角-o-下
  キャレット-四角-o-左
  キャレット-四角-o-右
  キャレット-四角-o-上
  証明
  チェック
  チェック-丸
  チェック-丸-o
  チェック-四角
  チェック-四角-o
 
  円-o
  時計-o
  クラウド
  クラウド-ダウンロード
  クラウド-アップロード
  コード
  コード-フォーク
  コーヒー
  歯車
  複数の歯車
  コメント
  コメント-o
  複数のコメント
  複数のコメント-o
  コンパス
  クレジットカード
  トリミング
  十字線
  カトラリー
  ダッシュボード(エイリアス)
  デスクトップ
  ドット-丸-o
  ダウンロード
  編集 (エイリアス)
  省略記号-横
  省略記号-縦
  封筒
  封筒-o
  消しゴム
  交換
  感嘆
  感嘆-円
  感嘆-三角
  外部リンク
  外部リンク-四角
 
  目-スラッシュ
  女性
  戦闘機
  フィルム
  フィルター
 
  消火器
  フラグ
  フラグ-格子じま
  フラグ-o
  フラッシュ (エイリアス)
  フラスコ
  フォルダ
  フォルダ-o
  フォルダ-オープン
  フォルダ-オープン-o
  しかめ面-o
  ゲームパッド
  小づち
  ギア (エイリアス)
  複数のギア (エイリアス)
  ギフト
  ガラス
  グローブ
  グループ(エイリアス)
  HDD-o
  ヘッドフォン
  ハート
  ハート-o
  ホーム
  受信箱
  情報
  情報-丸
 
  キーボード-o
  ノートパソコン
 
  リーガル(エイリアス)
  レモン-o
  レベル-ダウン
  レベル-アップ
  電球-o
  場所-矢印
  ロック
  マジック
  マグネット
  Eメール-転送(エイリアス)
  Eメール-返信(エイリアス)
  Eメール-全員に返信
  男性
  マップ-マーカー
  無関心-o
  マイク
  マイク-スラッシュ
  マイナス
  マイナス-丸
  マイナス-四角
  マイナス-四角-o
  モバイル
  携帯電話 (エイリアス)
  お金
  月-o
  音楽
  鉛筆
  鉛筆-四角
  鉛筆-四角-o
  電話
  電話-四角
  写真-o
  飛行機
  プラス
  プラス-丸
  プラス-四角
  プラス-四角-o
  電源-オフ
  印刷
  パズルのピース
  QRコード
  質問
  質問-丸
  引用-左
  引用-右
  ランダム
  更新
  返信
  全員に返信
  リツイート
  道路
  ロケット
  RSS
  RSS-四角
  検索
  検索-マイナス
  検索-プラス
  共有
  共有-四角
  共有-四角-o
  シールド
  ショッピングカート
サインイン
  サインアウト
  信号
  サイトマップ
  スマイル-o
  並べ替え
  並べ替え-アルファベット順-昇順
  並べ替え-アルファベット順-降順
  並べ替え-量別-昇順
  並べ替え-量別-降順
  並べ替え-昇順
  並べ替え-降順
  並べ替え-降順(エイリアス)
  並べ替え-数字別-昇順
  並べ替え-数字別-降順
  並べ替え-昇順(エイリアス)
  スピナー
  四角
  四角-o
 
  星-半分
  星-半分-空(エイリアス)
  星-半分-いっぱい(エイリアス)
  星-半分-o
  星-o
  下付き文字
  スーツケース
  太陽-o
  上付き文字
  タブレット
  タコメーター
  タグ
  複数のタグ
  タスク
  ターミナル
  画びょう
  親指-ダウン
  親指-o-ダウン
  親指-o-アップ
  親指-アップ
  チケット
 
  倍-円
  倍-円-o
  色合い
  トグル-下(エイリアス)
  トグル-左(エイリアス)
  トグル-右(エイリアス)
  トグル-上(エイリアス)
  ゴミ箱-o
  トロフィー
  トラック
 
  ロック解除
  ロック解除-オルト
  非ソート(エイリアス)
  アップロード
  ユーザー
  複数のユーザー
  ビデオカメラ
  ボリューム-ダウン
  ボリューム-オフ
  ボリューム-アップ
  警告(エイリアス)
  車椅子
  レンチ
  チェック-四角
  チェック-四角-o
 
  円-o
  ドット-丸-o
  マイナス-四角
  マイナス-四角-o
  プラス-四角
  プラス-四角-o
  四角
  四角-o
  ビットコイン(エイリアス)
  ビットコイン
  中国元(エイリアス)
  ドル(エイリアス)
  ユーロ
  ユーロ(エイリアス)
  英国ポンド
  インドルピー
  日本円
  ウォン
  お金
  人民元(エイリアス)
  ルーブル(エイリアス)
  ルーブル
  ルーブル(エイリアス)
  ルピー(エイリアス)
  トルコリラ
  トルコリラ(エイリアス)
  米ドル
  ウォン(エイリアス)
 (エイリアス)
  二重アングル-下
  二重アングル-左
  二重アングル-右
  二重アングル-上
  アングル-下
  アングル-左
  アングル-右
  アングル-上
  矢印-円-下
  矢印-円-左
  矢印-円-o-下
  矢印-円-o-左
  矢印-円-o-右
  矢印-円-o-上
  矢印-円-右
  矢印-円-上
  矢印-下
  矢印-左
  矢印-右
  矢印-上
  矢印
  矢印-オルト
  矢印-横
  矢印-縦
  キャレット-ダウン
  キャレット-左
  キャレット-右
  キャレット-四角-o-下
  キャレット-四角-o-左
  キャレット-四角-o-右
  キャレット-四角-o-上
  キャレット-上
  V字-円-下
  V字-円-左
  V字-円-右
  V字-円-上
  V字-下
  V字-左
  V字-右
  V字-上
  手-o-下
  手-o-左
  手-o-右
  手-o-上
  長い矢印-下
  長い矢印-左
  長い矢印-右
  長い矢印-上
  トグル-下(エイリアス)
  トグル-左(エイリアス)
  トグル-右(エイリアス)
  トグル-上(エイリアス)
  矢印-オルト
  巻き戻し
  圧縮
  取り出し
  拡張
  高速-巻き戻し
  高速-早送り
  早送り
  一時停止
  再生
  再生-丸
  再生-丸-o
  チャプター-巻き戻し
  チャプター-早送り
  停止
  YouTube-再生
 
  ADN
  Android
  Apple
  Bitbucket
  Bitbucket-四角
  ビットコイン(エイリアス)
  ビットコイン
  CSS3
  Dribbble
  Dropbox
  Facebook
  Facebook-四角
  Flickr
  Foursquare
  Github
  Github-オルト
  Github-四角
  Gittip
  Google-プラス
  Google-プラス-四角
  HTML5
  Instagram
  LinkedIn
  LinkedIn-四角
  Linux
  Maxcdn
  Pagelines
  Pinterest
  Pinterest-四角
  Renren
  Skype
  Stack Exchange
  Stack Overflow
  Trello
  Tumblr
  Tumblr-四角
  Twitter
  Twitter-四角
  Vimeo-四角
  VK
  Weibo
  Windows
  Xing
  Xing-四角
  YouTube
  YouTube-再生
  YouTube-四角

前の記事

次の記事