CSSファイルを作成、編集、添付して、サイトのスタイルを設定します。
更新日時 2023年 1月 19日
CSS(Cascading Style Sheets)は、ページの要素を選択してそれらの表示方法を制御するコードファイルです。カスタムテンプレートのHTMLはウェブサイトの骨格であり、CSSはサイトの皮膚であると考えることができます。
この記事では、HubSpotでCSSファイルを作成、公開、添付する方法について説明します。特定のページに簡単なデザイン変更を加える方法については、こちらをご覧ください。テーマテンプレートを使用している場合、テーマ設定の編集をご確認ください。
新規CSSファイルを作成する
- HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
- 左上の[フォルダーアイコン]folderをクリックして、サイドバーメニューを開きます。次に、[ファイル]>[新規ファイル]をクリックします。


- ダイアログボックスで、[CSSスタイルシート]をクリックします。次に、CSSスタイルシートの名前を入力して[作成]をクリックします。
CSSファイルを編集する
CSSファイルを作成するか、既存のCSSファイルを開いたら、コードエディターで編集します。標準のCSSに加えて、コードエディターではCSSの管理を容易にするためのHubL変数とマクロがサポートされています。HubLがどのように表示されるかをプレビューするには、エディター上部の[出力を表示]スイッチをクリックしてオンに切り替えます。レンダリングされたプレビューのパネルが右側に開きます。

HubSpotテンプレートで使用できる標準CSSセレクターのリストについては、ボイラープレートCSSを参照してください。
公開する前に、コードにHubLエラーがないかどうかを確認してください。次の3つの場所でカスタムモジュールまたはコードファイルのHubLエラーまたは警告を確認できます。
- コードエディターの下部にあるエラーコンソール。
- コードエディターの左側にあるエラー領域。
- エディターの右側にあるスクロールバー。
公開を妨げるエラーは赤で示され、一般的な警告は黄色で示されます。コードエディターの下部にある[詳細を表示]をクリックすると、エラーコンソールにエラーの詳細が表示され、[詳細を非表示]をクリックすると、エラーコンソールが折りたたまれます。
エラーコンソールには、コードまたはカスタムモジュール内のHubLエラーまたは警告の場所へのリンクがあります。コードエディターの左側にある赤いエラーインジケーターにマウスポインターを合わせると、コードのエラーまたは警告が表示されます。コードエディターの左側にある赤いエラーインジケーターにマウスポインターを合わせると、コードのエラーまたは警告が表示されます。スクロールバーの注釈をクリックすると、ファイルの該当の部分に移動します。
また、必要に応じてコードエディター内の行番号をクリックし、ファイルのURLを更新することもできます。これにより、コードへのリンクを他のユーザーと共有し、ファイル内の目的の場所を他のユーザーに正確に示すことができます。
ファイルを編集したら、右上の[変更を公開]をクリックします。別のコードテンプレートでこのスタイルシートを呼び出す場合、左のサイドバーメニューで[アクション]>[公開URLをコピー]をクリックして、シートのURLをコピーします。


テンプレートに添付する
HubSpotでは、いくつかの異なる方法でスタイルシートをコンテンツに添付することができます。添付されたスタイルシートはサイトで次の順序でリンクされます。
- public_common.css * - HubSpotのアプリで主に使用されるほか、特定のサイト機能でも使用されるスタイルシート。
- [ウェブサイト]>[ページ]の設定のヘッダーHTML - サイトのグローバル<head>に追加されたリンクタグ。
- Layout.css ** - ドラッグ&ドロップ式のすべてのテンプレートレイアウトに添付された既定のレスポンシブCSSファイル。
- [ウェブサイト]>[ページ]の設定で添付されたスタイルシート - サイト全体に添付されたスタイルシート。
- [ウェブサイト]>[ブログ]の設定で添付されたスタイルシート - ブログに添付されたスタイルシート(サイトのグローバルシートを上書きします)。
- リンク済みスタイルシート*** - テンプレートレイアウトで添付されたスタイルシート。
- テンプレート内の追加の<head>マークアップ - 特定のテンプレートレイアウト<head>に追加されたリンクタグ。
- ページ固有のスタイルシート - ページの設定で添付されたスタイルシート。
- ページ見出しHTML - ページの設定で特定のページの<head>に追加されたリンクタグ。
*必須
** ドラッグ&ドロップレイアウトで必須
*** テンプレートレイアウトでの推奨のスタイルシート添付方法
テンプレートにスタイルシートを添付するには、デザインマネージャーでテンプレートを開きます。[Headおよび本文のオプション]の右側のサイドバーメニューで、[リンク済みスタイルシート]の横にある[追加]ドロップダウンメニューからファイルを選択します。
すでに添付されているスタイルシートを編集または削除するには、そのスタイルシートの上にマウスポインターを合わせて、[編集]をクリックしてスタイルシートを変更するか、[X]をクリックして削除します。
スタイルシートを追加したら、右上の[変更を公開]をクリックし、テンプレートを使用して公開中のページに変更を適用します。


特定のページのスタイルシートを添付または削除する(Marketing Hub ProfessionalおよびEnterpriseのみ)
注:このオプションはテーマテンプレートでは選択できません。テーマ設定の編集をご確認ください。
ページエディターの設定セクションからページ固有のスタイルシートを追加または削除するには、次の手順に従います。
- ウェブサイトページまたはランディングページに移動します。
- 対象のページの上にマウスポインターを合わせて、[編集]をクリックします。
- ページエディターの上部にある[設定]をクリックします。
- ページの下までスクロールし、[詳細オプション]をクリックします。
- [ページスタイルシート]で[スタイルシートを添付]ドロップダウンメニューをクリックし、添付するシートを選択します。削除するスタイルシートの横にある[X]をクリックします。
- 右上の[保存]および[公開]をクリックします。
テンプレートまたはドメインからページによって継承されたスタイルシートを無効にすることもできます。無効にすると、そのスタイルシートはページに適用されません。
- ページエディターの同じ[設定]タブで、含まれているスタイルシートの横にあるドロップダウンメニューから[無効]を選択します。
- 右上の[保存]および[公開]をクリックします。
ドメインレベルでスタイルシートを添付または削除する(Marketing Hub ProfessionalおよびEnterpriseのみ)
注:ドメインレベルのスタイルシートを使用するには、テーマテンプレートに注釈「enableDomainStylesheets: true」を含める必要があります。テンプレートの注釈について詳細をご確認ください。
ドメイン上のすべてのコンテンツについてスタイルシートを追加または削除するには、次の手順に従います。
- HubSpotアカウントにて、ナビゲーションバーに表示される[設定アイコン settings]をクリックします。
- サイドバーメニューで[ウェブサイト]>[ページ]をクリックします。
- [ドロップダウンメニュー]をクリックして、設定を更新するドメインを選択します。
- [テンプレート]タブで[CSSおよびスタイルシート]までスクロールします。スタイルシートを追加するには、[+スタイルシートを追加]をクリックします。添付されたスタイルシートを削除するには、対象のスタイルシートの横にある[X]をクリックします。
- [保存]をクリックします。
注意: HubSpotのスターターまたは無料ツールにダウングレードすると、添付されたドメインレベルのスタイルシートが削除されるまで有効になります。すべてのスタイルシートが削除されると、ドメインレベルでスタイルシートを追加することはできなくなります。サブスクリプションのダウングレードの詳細については、こちらをご覧ください。