複数のテンプレートにわたってグローバルコンテンツを使用する方法

グローバルコンテンツでは、ヘッダーやフッターなど、コンテンツのセクションを複数のページにわたって再利用できます。グローバルコンテンツが更新されると、そのグローバルモジュールまたはグローバルグループが使用される全ての場所に変更が適用されます。 

グローバルコンテンツはデザインマネージャーで作成・編集でき、コンテンツエディターから編集できます。 

始める前に

複数のテンプレートでグローバルコンテンツを使用する前に、次の要件と制限を確認してください。

制限事項と考慮事項について

• フレキシブルカラム、 ドラッグ&ドロップエリア、 およびコードモジュールは 、グローバルグループには使用できません。
• グローバルコンテンツの変更は、同じグローバルモジュールまたはグループを参照する全てのテンプレートとアセットに適用されます。 
• ドラッグ&ドロップテンプレート と コードテンプレート では、グローバルコンテンツの方法が異なります。

デザインマネージャーでグローバルコンテンツを作成する

グローバルコンテンツは、新しいモジュールとして作成することも、既存のモジュールまたはグループから変換することもできます。

グローバルモジュールを作成する

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。。
2. ファインダーで、［ファイル］ドロップダウンメニューをクリックし、［新規ファイル］を選択します。
3. ダイアログボックスで、[ 今日は何を作成しますか?]をクリックします。 ドロップダウンメニューをクリックし、[ モジュール]を選択して[次へ]をクリックします 。
4. [ このモジュールをどこで使用しますか? セクションで、このグローバルモジュールを使用する各コンテンツのタイプの横にある チェックボックスをオンにします 。Eメールに使用されるグローバルモジュールにCSSやJavascriptを含めることはできません。
5. [モジュールコンテンツ範囲]セクションで、[ グローバルモジュール]を選択します。
6. ファイル名を入力し 、[ 作成]をクリックします 。
7. モジュールエディターで、 モジュールの編集を続けます。

既存のローカルモジュールまたはグループを変換

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。。
2. ファインダーでテンプレートをクリックして内容 を編集します。
3. グローバルグループを作成する場合は、複数のモジュールのオプションを編集できます。Control キー/ Commandキーを押し、グループ化する モジュール をクリックしてから、 インスペクターーで groupModuleグループアイコンをクリックします 。
4. モジュール または モジュールグループ をクリックして、レイアウトエディターで選択します。
5. インスペクターーで [その他 ]ドロップダウンメニューをクリックし、[ グローバルモジュールに変換]/[グローバルグループに変換]を選択します。

グローバルモジュールまたはグローバルグループをドラッグ&ドロップテンプレートに追加する

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。。
2. ファインダーで、ドラッグ&ドロップ テンプレート をクリックして内容を編集します。
3. インスペクターで、［+追加］をクリックします。
4. ［検索］フィールドにテキストを入力するか、［カテゴリーまたはタグによる絞り込み］ドロップダウンメニューをクリックして、グローバルモジュール／グループを見つけます。
5. 追加したい グローバルモジュールまたはグローバルグループ をクリックし、テンプレートレイアウトの中にドラッグします。
6. 完了したら、右上の [公開 ]をクリックします。

コードテンプレートでグローバルコンテンツを使用する

コードテンプレートには、[ グローバルモジュールに変換] オプションは含まれません。代わりに、グローバルモジュールを手動で作成して参照する必要があります。

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。。
2. ファインダーで、[ ファイル ]ドロップダウンメニューをクリックし、[ 新規ファイル]を選択します。
3. ダイアログボックスで、[ 今日は何を作成しますか?]をクリックします。 ドロップダウンメニューをクリックし、[ モジュール]を選択して[次へ]をクリックします 。
4. [モジュールコンテンツ範囲]セクションで、[ グローバルモジュール]を選択します。
5. ファイル名を入力し 、[ 作成]をクリックします 。
6. 元のモジュールに一致する必須フィールドを作成してください。 
7. モジュールの HubLスニペットをコピーします。 
8. グローバルモジュールを参照するように HubLスニペット をコードテンプレートに貼り付けます。
9. 完了したら、右上の [公開 ]をクリックします。

注:開発者は、テンプレートを更新してそのモジュールを使用する前に、CLIを使用してモジュールを複製し、複製されたモジュールの meta.json ファイルに "global": true を設定することもできます。詳しくは、開発者ドキュメントをご覧ください。

コンテンツエディターでグローバルコンテンツを編集する

グローバルコンテンツは、 コンテンツエディターでページや投稿から直接編集できます。更新は、同じグローバルモジュールまたはグループを使用しているすべてのアセットに適用されます。

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
   • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
2. コンテンツの名前をクリックします。
3. コンテンツエディターでsiteTreeIconコンテンツアイコンをクリックした後、グローバルモジュールのglobalGroupグローバル コンテンツ アイコンをクリックします。 
4. 表示されるダイアログボックスで、［グローバル コンテンツ エディターで開く］をクリックします。
5. グローバル コンテンツ エディターで siteTreeIcon コンテンツ アイコン をクリックし、 ドラッグ&ドロップツールを使用してグローバルグループ内のモジュールを編集します。
6. 以前にロゴを追加していない場合は、ロゴモジュールのグローバルヘッダーにロゴを追加できます。ブランディングの設定について詳細をご確認ください。ロゴを追加するには、 ロゴ モジュールをクリックし、 次に[ブランド設定]をクリックします。
   • ダイアログボックスで[ 追加]をクリックします。
   • [ アップロード ]をクリックしてパソコンからイメージをアップロードするか、[ 画像を参照 ]をクリックしてファイルツールから画像を選択します。
   • [ロゴ名]フィールドにロゴの名前を入力するためのテキストを入力してください。
   • [ロゴのaltテキスト]フィールドと[ロゴのURL]フィールドにテキストを入力します。
   • 完了したら、［保存］をクリックします。次に、[ [#]アセットに公開]をクリックします。
7. ナビゲーションメニューを編集するには、モジュールをクリックします。サイドバーエディターで、メニューの[編集]をクリックします。ダイアログボックスで、 引き続きナビゲーションメニューをカスタマイズします。
8. 既存のページや記事でグローバルコンテンツをプレビューするには、左上の[ 表示場所 ]ドロップダウンメニューをクリックし、グローバルコンテンツを表示する ページ や 記事 を選択します。グローバルコンテンツを単独で表示するには、代わりに［グループのみ］を選択します。
9. 多言語バージョンのグローバルコンテンツを作成するには、左上の [言語 ]ドロップダウンメニューをクリックし、[ 多言語バリエーションを追加/編集]を選択します。多言語グローバルコンテンツの作成について詳細をご確認ください。

10. 完了したら、右上の［［X］件のアセットに公開］をクリックします。これらの変更は、グローバルコンテンツを含むテンプレートを使用しているすべてのページと記事に適用されます。

デザインマネージャーでグローバルコンテンツを編集する

開発者はデザインマネージャーでグローバルモジュール／グループを編集できます。グローバルコンテンツの変更内容は、同じグローバルコンテンツが入っているテンプレートを使用する全てのコンテンツに適用されます。

1. HubSpotアカウントにて、［コンテンツ］＞［デザインマネージャー］の順に進みます。。
2. ファインダーでテンプレートをクリックして内容 を編集します。
3. 特定のページ、ブログ記事、またはEメールのみを対象にグローバルコンテンツのコンテンツを編集するには、グローバルコンテンツの ローカルコピーを作成して デザインマネージャーで編集できます。
4. レイアウトエディターでグローバルグループを編集するには、テンプレートのグローバル グループ をクリックします。インスペクターで[ その他 ]ドロップダウンメニューをクリックし、[ グローバルグループを編集]を選択します。 

5. 完了したら、[ 変更を公開]をクリックします。