更新日時 2023年 1月 19日
CSS（Cascading Style Sheets）は、ページの要素を選択してそれらの表示方法を制御するコードファイルです。カスタムテンプレートのHTMLはウェブサイトの骨格であり、CSSはサイトの皮膚であると考えることができます。
この記事では、HubSpotでCSSファイルを作成、公開、添付する方法について説明します。特定のページに簡単なデザイン変更を加える方法については、こちらをご覧ください。テーマテンプレートを使用している場合、テーマ設定の編集をご確認ください。
新規CSSファイルを作成する
- HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
- 左上の［フォルダーアイコン］をクリックして、サイドバーメニューを開きます。次に、［ファイル］>［新規ファイル］をクリックします。
- ダイアログボックスで、［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アカウントにて、ナビゲーションバーに表示される［設定アイコン ］をクリックします。
- サイドバーメニューで［ウェブサイト］>［ページ］をクリックします。
- ［ドロップダウンメニュー］をクリックして、設定を更新するドメインを選択します。
- ［テンプレート］タブで［CSSおよびスタイルシート］までスクロールします。スタイルシートを追加するには、［+スタイルシートを追加］をクリックします。添付されたスタイルシートを削除するには、対象のスタイルシートの横にある［X］をクリックします。
- ［保存］をクリックします。
注意: HubSpotのスターターまたは無料ツールにダウングレードすると、添付されたドメインレベルのスタイルシートが削除されるまで有効になります。すべてのスタイルシートが削除されると、ドメインレベルでスタイルシートを追加することはできなくなります。サブスクリプションのダウングレードの詳細については、こちらをご覧ください。
