デザインマネージャー｜よくある質問

HubSpot のデザインマネージャーツールに関する回答と一般的な情報がすばやく見つかります。このリソースには、CMS を使用しているデザイナー向けのその他のリソースへのリンクも含まれています。

HubSpot でのデザインについての詳細はどこで学習できますか?

HubSpot でのデザインの詳細を学習するには、HubSpot アカデミーのグロースドリブンデザイン認定と HubSpot の CMS ドキュメントを確認してください。 

デザイン認定は無料の認定であり、動画トレーニングやデザイン実習が含まれています。 

HubSpot の CMS ドキュメントには次のものが含まれます。

• HubSpot CMS 参照ドキュメント
• HubL 参照ドキュメント
• HubSpot ボイラープレート CSS
• チュートリアル
• ひらめきの例
• デザイナーのブログ

カスタムコーディングされたデザインや HubL のトラブルシューティングに使用できる HubSpot リソースはありますか?

HubSpot デザイナーコミュニティーと意見を交換するのに最適な場所は、HubSpot デザインフォーラムです。このフォーラムは、デザインに関する専門知識を持つ HubSpot デザイナーおよび HubSpot ユーザーによってモニタリングされています。

HubSpot API の開発に関する質問がある場合は、開発者フォーラムを確認してください。 

HubSpot に FTP アクセスするにはどうすればよいですか?

2020年5月27日より、FTPの利用は停止し、CMS CLIに置き換えられました。この発表について詳細を確認してください。

1 つのテンプレートのグローバルグループを編集することはできますか?

グローバルモジュールをローカルモジュールに戻すことはできますが、グローバルグループを変換することはできません。1つのテンプレートのグローバルグループを編集するには、グローバルグループを複製し、テンプレートに複製を追加します。

HubSpot テンプレートビルダーで使用するブートストラップのバージョンは?

HubSpot レイアウトエディターでは、Bootstrap 2.x に基づいて 12 列グリッドシステムを使用し、テンプレートデザイナーが完全にレスポンシブな  ウェブページ  を HubSpot コンテンツプラットフォーム内で作成できるようにしています。

HubSpot テンプレートで独自のレスポンシブグリッドを使用することはできますか?

すべての HubSpot ドラッグアンドドロップレイアウトに、モジュールをレスポンシブにする layout.css が自動的に追加されます。Bootstrap 3 などの別のまたはカスタムのレスポンシブグリッドを使用する場合は、layout.css 内の CSS をオーバーライドするか、layout.css が付加されていないコード化されたテンプレートを使用する必要があります。

ブログ記事とリストのレイアウトを再構成するにはどうすればよいですか?

ブログのコンテンツモジュールを使用すると、投稿のマークアップや一覧のレイアウトを編集して、投稿アイテムのさまざまな要素をレンダリングするかどうかを制御できます。 

テンプレートを以前のバージョンに戻すことはできますか?

すべてのテンプレートレイアウト、コードファイル、及びページには変更履歴があるため、テンプレートやコンテンツの一部を以前のバージョンに戻すことができます。テンプレートやコードファイルの場合は、［アクション］ > ［変更履歴を表示］ をクリックして、変更履歴にアクセスします。 

デザインマネージャー v2

モジュールフィールドを参照するときの「ウィジェット」と「モジュール」の違いは?

v1 のモジュールフレームワークは {{ widget.field }} を使用してモジュールフィールドを参照していました。v2 のフレームワークは {{ module.field }} を使用してモジュールフィールドを参照します。

ただし、v2 のフレームワークで {{ widget.field }} を使用しても、引き続き正常に機能します。「モジュール」を参照するようにカスタムモジュールを更新する必要はありません。

「get_public_template_url」を使用せずに JS ファイルと CSS ファイルを添付するにはどうすればよいですか?

「get_public_template_url」を使用して JavaScript および CSS ファイルにアクセスするのではなく、［リンク済みファイル］ セクションでこれらのファイルをモジュールのサイドバーエディターに直接添付できるようになりました。ここに含まれる CSS ファイルと JS ファイルは、モジュールを使用するページに自動的に読み込まれます。

カスタム HTML モジュールまたはカスタム HubL モジュールをテンプレートに追加するにはどうすればよいですか?

HTML モジュールと HubL モジュールは除去されました。これらのモジュールは、開発者にとってHTMLおよびHubLのスニペットをテンプレートに簡単に追加する手段となっていました。ただし、テンプレートの理解や編集が難しくなる場合があります。テンプレートをより予測しやすくメンテナンスしやすくするために、すべてのコードをカスタムモジュールのコンテキスト内に収めることを優先して、これらのモジュールは除去されました。

ウェブサイトのページレベルで HTML を追加する必要がある場合、HubSpot マーケットプレイスで HTML モジュールを ダウンロードできます。

JS プラグインをカスタムモジュールで使用するにはどうすればよいですか?

サードパーティーのスクリプトを使用している場合、スクリプトファイルをモジュールエディターの ［リンク済みファイル］ セクションにリンクすることになります。その後、コードエディターの JS セクションでプラグインをトリガーできます。プラグインにパラメーターを渡す必要がある場合は、エディターの ［HTML + HubL］ セクションでデータ属性を使用し、これらの値を保存できます。

アップグレードするときに、このモジュールをどこで使用するのか質問されました。これらのオプションの違いは何ですか?

E メールでカスタムモジュールを使用している場合、スタイルシートおよび JavaScript はほとんどの E メールクライアントでサポートされていないため、［CSS］ セクションと ［JS］ セクションはエディターに表示されません。E メールモジュールの場合、依然として<style>タグに必要なスタイルを含めることができます。

ページまたはブログ記事でモジュールを使用している場合、［JS］ セクションと ［CSS］ セクションは正常に表示されます。

デザインマネージャーの v2 でモジュールをコード化する方法は変更されていますか?

デザインマネージャーの v2 のモジュールは<div>タグで囲まれていますが、古いデザインマネージャーのモジュールは<span>タグで囲まれています。この変更は、スタイルシートでモジュールのスパンを参照している場合のみモジュールに影響を及ぼします。たとえば、次の宣言は、新しいデザインマネージャーには適用されません。

span #hs_cos_wrapper_widget_5038393204 { Color: blue; }

<span>タグを<div>タグに置換することができます。ただし、デフォルトの HubSpot ラッパーのみを使用して CSS を記述することは推奨しません。代わりに、「my-custom-module」などのカスタム CSS クラスを使用しするとよいでしょう。

モジュールをアップグレードするときに「ネストしたモジュール」のエラーが発生します。このエラーを解決してモジュールを公開するにはどうすればよいですか?

ネストしたモジュールのエラーを識別して解決する方法について詳細を学習します。多数のテンプレートでネストしたモジュールを使用している場合、最初にモジュールを複製し、ページレベルのコンテンツが失われないようにするのが最善です。次に、複製したモジュールでエラーを解決し、それ以降はその複製をテンプレートで使用します。

モジュールにグローバルグループを追加するにはどうすればよいですか?

カスタムモジュールで {% include %} を使用してグローバルグループを追加する代わりに、モジュールにメニューフィールドを追加したり、モジュールのグローバルコンテンツを編集したりできます。

新しいデザインマネージャーで v1 のカスタムモジュールを使用できますか?

はい、モジュールエディターですべてのレガシーモジュールを編集できます。v2 のモジュールフレームワークではサポートされていないコードがある場合は認証に関する警告と提案が表示されますが、引き続き HubSpot でこれらのモジュールを編集して使用することはできます。

既存のカスタムモジュールはすべて保持できますが、以前のフレームワークを使用して新しいモジュールを作成することはできません。レガシーモジュールを複製した場合、複製したモジュールは新しいモジュールフレームワークで作成されます。