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

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

更新日時 2024年 3月 11日

以下の 製品でご利用いただけます(別途記載されている場合を除きます)。

すべての製品とプラン

CSS(Cascading Style Sheets)ファイルは、ページの要素を選択してそれらの表示方法を制御するコードファイルです。CSSファイルをEメールやEメールテンプレートに添付することはできません。 

この記事では、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」のみ)でスタイルシートを添付または削除する

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

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

  • 以下の操作でコンテンツを開きます。

    • ウェブサイトページ:HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
    • ランディングページ:HubSpotアカウントにて、[マーケティング]>[ランディングページ]の順に進みます。
  • 対象のページの上にマウスポインターを合わせて、[編集]をクリックします。
  • コンテンツエディターで[設定]メニューをクリックし、[詳細]を選択します。 
  • ダイアログボックスの[ページスタイルシート]セクションで、[スタイルシートを添付]ドロップダウンメニューをクリックし、目的のスタイルシートを選択します。スタイルシートを削除するには、削除するスタイルシートの横にある[X]をクリックします。
  • テンプレートまたはドメインから継承されたスタイルシートを無効にするには、そのスタイルシートの横にあるドロップダウンメニューをクリックし、[無効]を選択します。 

remove-or-turn-off-stylesheets-1

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

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

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

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

注:HubSpotのStarterまたは無料ツールにダウングレードした場合、添付されたドメインレベルのスタイルシートは、ユーザーが削除するまでアクティブなままです。全てのスタイルシートが削除された後は、ドメインレベルでのスタイルシートの添付はできなくなります。サブスクリプションのダウングレードについての詳細 .

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

この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。