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

CSSファイルを作成、編集、添付して、サイトのスタイルを設定します。

更新日時 2022年 6月 28日

対象製品

Marketing Hub Professional, Enterprise
CMS Hub Starter, Professional, Enterprise
Marketing Hub Basic(旧製品)

CSS(Cascading Style Sheets)は、ページの要素を選択してそれらの表示方法を制御するコードファイルです。カスタムテンプレートのHTMLはウェブサイトの骨格であり、CSSはサイトの皮膚であると考えることができます。

この記事では、HubSpotでCSSファイルを作成、公開、添付する方法について説明します。特定のページに簡単なデザイン変更を加える方法については、こちらをご覧ください。テーマテンプレートを使用している場合、テーマ設定の編集をご確認ください。

新規CSSファイルを作成する

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • 左上の[フォルダーアイコン]folderをクリックして、サイドバーメニューを開きます。次に、[ファイル]>[新規ファイル]をクリックします。
新規コードファイル
  • ダイアログボックスで、[CSSスタイルシート]をクリックします。次に、CSSスタイルシートの名前を入力して[作成]をクリックします。

CSSファイルを編集する

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


design-manager-show-output-toggle

HubSpotテンプレートで使用できる標準CSSセレクターのリストについては、ボイラープレートCSSを参照してください。

公開する前に、コードにHubLエラーがないかどうかを確認してください。次の3つの場所でカスタムモジュールまたはコードファイルのHubLエラーまたは警告を確認できます。

  • コードエディターの下部にあるエラーコンソール。
  • コードエディターの左側にあるエラー領域。
  • エディターの右側にあるスクロールバー。

公開を妨げるエラーは赤で示され、一般的な警告は黄色で示されます。コードエディターの下部にある[詳細を表示]をクリックすると、エラーコンソールにエラーの詳細が表示され、[詳細を非表示]をクリックすると、エラーコンソールが折りたたまれます。

エラーコンソールには、コードまたはカスタムモジュール内のHubLエラーまたは警告の場所へのリンクがあります。コードエディターの左側にある赤いエラーインジケーターにマウスポインターを合わせると、コードのエラーまたは警告が表示されます。コードエディターの左側にある赤いエラーインジケーターにマウスポインターを合わせると、コードのエラーまたは警告が表示されます。スクロールバーの注釈をクリックすると、ファイルの該当の部分に移動します。

また、必要に応じてコードエディター内の行番号をクリックし、ファイルのURLを更新することもできます。これにより、コードへのリンクを他のユーザーと共有し、ファイル内の目的の場所を他のユーザーに正確に示すことができます。

ファイルを編集したら、右上の[変更を公開]をクリックします。別のコードテンプレートでこのスタイルシートを呼び出す場合、左のサイドバーメニューで[アクション]>[公開URLをコピー]をクリックして、シートのURLをコピーします。

CSSを編集する

テンプレートに添付する

HubSpotでは、いくつかの異なる方法でスタイルシートをコンテンツに添付することができます。添付されたスタイルシートはサイトで次の順序でリンクされます。

  1. public_common.css * - HubSpotのアプリで主に使用されるほか、特定のサイト機能でも使用されるスタイルシート。
  2. [ウェブサイト]>[ページ]の設定のヘッダーHTML - サイトのグローバル<head>に追加されたリンクタグ。
  3. Layout.css ** - ドラッグ&ドロップ式のすべてのテンプレートレイアウトに添付された既定のレスポンシブCSSファイル。
  4. [ウェブサイト]>[ページ]の設定で添付されたスタイルシート - サイト全体に添付されたスタイルシート。
  5. [ウェブサイト]>[ブログ]の設定で添付されたスタイルシート - ブログに添付されたスタイルシート(サイトのグローバルシートを上書きします)。
  6. リンク済みスタイルシート*** - テンプレートレイアウトで添付されたスタイルシート。
  7. テンプレート内の追加の<head>マークアップ - 特定のテンプレートレイアウト<head>に追加されたリンクタグ。
  8. ページ固有のスタイルシート - ページの設定で添付されたスタイルシート。
  9. ページ見出しHTML - ページの設定で特定のページの<head>に追加されたリンクタグ。

*必須

** ドラッグ&ドロップレイアウトで必須

*** テンプレートレイアウトでの推奨のスタイルシート添付方法

テンプレートにスタイルシートを添付するには、デザインマネージャーでテンプレートを開きます。[Headおよび本文のオプション]の右側のサイドバーメニューで、[リンク済みスタイルシート]の横にある[追加]ドロップダウンメニューからファイルを選択します。

すでに添付されているスタイルシートを編集または削除するには、そのスタイルシートの上にマウスポインターを合わせて、[編集]をクリックしてスタイルシートを変更するか、[X]をクリックして削除します。

スタイルシートを追加したら、右上の[変更を公開]をクリックし、テンプレートを使用して公開中のページに変更を適用します。

HubSpotのヘルプ記事のスクリーンショット

特定のページのスタイルシートを添付または削除する(Marketing Hub ProfessionalおよびEnterpriseのみ)

注:このオプションはテーマテンプレートでは選択できません。テーマ設定の編集をご確認ください。

ページエディターの設定セクションからページ固有のスタイルシートを追加または削除するには、次の手順に従います。

  • ウェブサイトページまたはランディングページに移動します
  • 対象のページの上にマウスポインターを合わせて、[編集]をクリックします。
  • ページエディターの上部にある[設定]をクリックします。
  • ページの下までスクロールし、[詳細オプション]をクリックします。
  • [ページスタイルシート][スタイルシートを添付]ドロップダウンメニューをクリックし、添付するシートを選択します。削除するスタイルシートの横にある[X]をクリックします。

  • 右上の[保存]および[公開]をクリックします。

テンプレートまたはドメインからページによって継承されたスタイルシートを無効にすることもできます。無効にすると、そのスタイルシートはページに適用されません。

  • ページエディターの同じ[設定]タブで、含まれているスタイルシートの横にあるドロップダウンメニューから[無効]を選択します。
  • 右上の[保存]および[公開]をクリックします。

ドメインレベルでスタイルシートを添付または削除する(Marketing Hub ProfessionalおよびEnterpriseのみ)

注:ドメインレベルのスタイルシートを使用するには、テーマテンプレートに注釈「enableDomainStylesheets: true」を含める必要があります。テンプレートの注釈について詳細をご確認ください。

ドメイン上のすべてのコンテンツについてスタイルシートを追加または削除するには、次の手順に従います。

  • HubSpotアカウントにて、ナビゲーションバーに表示される[設定アイコン settings]をクリックします。
  • サイドバーメニューで[ウェブサイト]>[ページ]をクリックします。
  • [ドロップダウンメニュー]をクリックして、設定を更新するドメインを選択します。
  • [テンプレート]タブで[CSSおよびスタイルシート]までスクロールします。スタイルシートを追加するには、[+スタイルシートを追加]をクリックします。添付されたスタイルシートを削除するには、対象のスタイルシートの横にある[X]をクリックします。
  • [保存]をクリックします。

注意: HubSpotのスターターまたは無料ツールにダウングレードすると、添付されたドメインレベルのスタイルシートが削除されるまで有効になります。すべてのスタイルシートが削除されると、ドメインレベルでスタイルシートを追加することはできなくなります。サブスクリプションのダウングレードの詳細については、こちらをご覧ください

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.