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

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

更新日時 2月 14, 2019

対象製品

Marketing Hub Professional, Enterprise
Basic

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

この記事では、HubSpot で CSS ファイルを作成、公開、添付する方法について説明します。特定のページに簡単なデザイン変更を加える方法については、こちらをご覧ください。

: HubSpot の技術サービスチームが HubSpot に移行している場合は、いくつかの既定の CSS ファイルがすでに作成されています。必要に応じて、デザイナーと協力してこれらのファイルを変更し、サイトの外観を調整してください。

新規 CSS ファイルの作成

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

CSS ファイルの編集

CSS ファイルを作成するか、既存の CSS ファイルを開いたら、コードエディターで編集を行います。標準 CSS に加えて、コードエディターでは CSS の管理を容易にするための HubL 変数とマクロがサポートされています。 

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

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

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

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

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

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

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

CSS の編集

テンプレートへの添付

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

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

* 必須

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

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

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

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

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

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

特定のページでのスタイルシートの添付または削除

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

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

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

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

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

ドメインレベルでのスタイルシートの添付または削除

ドメイン上のすべてのコンテンツにスタイルを追加または削除するには、次の手順を実行します。 

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