お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
CMS-General

テンプレートレイアウトの構成とカスタマイズ

更新日時 2019年 10月 1日

対象製品

Marketing Hub  Professional, Enterprise
Basic
HubSpot CMS

既存のドラッグ & ドロップテンプレートをセットアップしてカスタマイズし、モジュール、グループ、列をテンプレートの構成要素として使用する方法を学習します。

テンプレートを構成

デザインマネージャーのレイアウトエディターを使用すると、HTML を記述しなくても、コンテンツのレイアウトをすばやく作成できます。

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

モジュールを追加してドラッグ

レイアウトにモジュールを追加するには、レイアウトインスペクターの上部にある [+追加] をクリックします。モジュールを検索または選択して、レイアウトでモジュールを表示する場所にドラッグします。モジュールを他のモジュールの上にドラッグすると、列が作成されるか、モジュールがグループ化されます。

列の幅を変更

列の幅を変更するには、モジュールの間にカーソルを置いてクリックし、水平方向にドラッグします。

モジュールをグループ化

モジュールグループは、一定数のモジュールを 1 つの単位にまとめたものであり、これがページのセクションの構成要素となります。

2 つのモジュールをグループ化するには、最初のモジュールをクリックしてから、Control/Command キーを押しながら 2 つ目のモジュールを選択します。3 つ以上のモジュールをグループ化する場合は、この手順を繰り返します。次に、モジュールインスペクターでグループアイコン groupModule をクリックします。

注: モジュールグループは、セクションセパレーターをまたいだり、一部のみ選択されたモジュールのグループを含めたりすることはできません。

モジュールを水平方向に分割

モジュールを半分に分割して、2 つのモジュールを作成します。モジュールを分割するには、モジュールをクリックして、モジュールインスペクターでモジュールの分割アイコン splitModule をクリックします。または、レイアウトでモジュールを右クリックして、[モジュールを分割] を選択します。

フレキシブルカラムを追加

フレキシブルカラムは、コンテンツ作成者がページレベルでコンテンツを管理しやすいように設計されています。フレキシブルカラムが HubSpot ページテンプレートに追加されると、ユーザーは各ページエディター内でモジュールを追加、削除、並べ替えできます。これにより、デザイナーが作成するテンプレートは少なくてすみ、マーケターはニーズに応じて各ページを柔軟にカスタマイズすることができます。

フレキシブルカラムを追加するには、レイアウトインスペクターの上部にある [+追加] をクリックします。フレキシブルカラムを見つけて、テンプレートにドラッグ & ドロップします。

注: フレキシブルカラムはページテンプレートにのみ追加できます。E メールやブログのテンプレートには追加できません。


テンプレートのカスタマイズ

テンプレートの一般的なレイアウトを構成したら、モジュールを交換して、他のテンプレートのカスタマイズを行うことができます。

モジュールオプションを編集

モジュールのオプションを編集するには、レイアウトエディターでモジュールをクリックします。右側のモジュールインスペクターに、モジュールの編集可能なオプションが表示されます。これらのオプションには通常、スタイル、既定のコンテンツ、エディターのオプションが含まれており、特定のタイプのモジュールによっては異なる場合があります。詳細は、モジュール CSS と既定のコンテンツや設定の編集を参照してください。

オプションを編集

モジュールを交換

テンプレートにモジュールを追加したら、別のモジュールと交換することができます。レイアウトエディターでモジュールを右クリックして、[モジュールを交換] をクリックします。表示されるドロップダウンメニューで、元のモジュールと置換するモジュールを選択します。

グローバルモジュールに変換

テンプレート内のモジュールをグローバルモジュールに変換して、複数のテンプレートで使用できます。これは、特定の方法でモジュールをスタイル設定したり、他のテンプレートで再利用するモジュール内に規定のコンテンツがある場合に便利です。

  • レイアウトエディターでモジュールをクリックします。
  • モジュールインスペクターで [続き] ドロップダウンメニューをクリックし、[グローバルモジュールに変換] を選択します。
  • ダイアログボックスで、グローバルモジュール名を入力し、[作成] をクリックします。

モジュールを削除

モジュールを削除するには、レイアウトエディターでモジュールをクリックしてから、モジュールインスペクターでごみ箱アイコン delete をクリックします。または、モジュールを右クリックして [モジュールを削除] を選択します。

ファインダーでテンプレートを管理

モジュールオプションに加えて、テンプレートに固有の実行可能なアクションがいくつかあります。

  • テンプレートの右上にあるフォルダーアイコン folder をクリックします。
  • テンプレートの名前を右クリックします。ドロップダウンメニューで、以下のオプションをカスタマイズできます。
    • ポータルにコピー: 自分がユーザーである別のポータルにテンプレートをコピーします。マーケットプレイスから購入したテンプレートは他のポータルにコピーできません。
    • テンプレートを複製: これにより、テンプレートの正確な複製が作成され、既存のテンプレートのバリエーションを作成する場合に便利です。
    • HTML に複製: これは、テンプレートの個別の HTML バージョンを作成します。マークアップをより確実に管理する必要がある場合、またはテンプレートのコードについて詳しく知りたい場合は、これが役立ちます。
    • テンプレートソースを表示: テンプレートのソースコード HTML を表示します。[HTML に複製] オプションとは異なり、これはテンプレートの個別の HTML バージョンを作成しません
    • テンプレートの名前変更: テンプレートの内部名を編集します。
    • 依存項目を表示: テンプレートを現在使用しているすべてのページ、E メール、ブログを表示します。
    • 変更履歴を表示: テンプレートの変更履歴を表示して、以前に公開したバージョンにテンプレートを戻すことを選択します。
    • E メール/ページを作成: テンプレートから直接 E メールまたはランディングページ/ウェブサイトページを作成します。
    • テンプレートを削除: テンプレートを削除します。削除したら、テンプレートは 30 日間利用可能ですが、その後は永久的に削除されます。
  • これらのオプションには、上の [ファイル] および [アクション] ドロップダウンメニューからもアクセスできます。