CSS ファイルの作成、編集、および添付

カスケードスタイルシート（CSS）は、ページ内の要素を選択してスタイルを設定することで、サイトの各ページの表示を制御します。デザインマネージャーを使用して、新しいCSSファイルを作成したり、既存のファイルを編集したり、それらをテンプレート、特定のページ、またはドメイン全体に紐付けたりすることができます。

特定のページのデザインを簡単に変更する場合は、コンテンツエディタでのページコンテンツの編集方法について詳しくご覧ください。テーマテンプレートを使用している場合は、テーマ設定の編集方法について詳しくご確認ください。

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

1. HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［デザインマネージャー］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［デザインマネージャー］に直接移動します。
2. Finderで、左上の「ファイル」→「> 」→「新規ファイル」をクリックします。
3. ダイアログボックスで、ドロップダウンメニューをクリックし、「CSS + HubL」を選択します。 
4. ［次へ］をクリックします。
5. 「ファイル名」フィールドにファイル名を入力してください。
6. ファイルの保存場所を変更するには、「変更」をクリックしてください。ポップアップボックスで、新しいファイルの保存先を選択してください。 
7. 完了したら、［作成］をクリックします。

CSSファイルを編集

CSS ファイルを作成するか、既存のファイルを開いたら、コードエディタで編集を行ってください。このコードエディタは、標準のCSSに加え、HubL変数やマクロにも対応しており、CSSのメンテナンスを容易にします。

HubSpotテンプレート用の標準CSSセレクタの一覧を確認するには、「Boilerplate CSS」をご覧ください。

1. { local.navDesignManager }}
2. Finderで、「ファイル」→「> 」を選択し、新しいファイルを作成するか、既存のCSSファイルを開きます。
3. コードエディタで、CSSを入力または更新して編集を行ってください。 

HubLがどのように表示されるかを確認するには、エディタ上部の「出力を表示」スイッチをクリックしてください。レンダリングされたプレビューのパネルが右側に開きます。

エラーがないか確認してください

公開する前に、コードにHubLエラーがないかどうかを確認してください。エラーは、画面下部のコンソール、コードエディタの左側にあるエラーガター、および右側のスクロールバーに表示されます。

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

CSS ファイルを公開する

CSS ファイルを編集したら、右上の [ 変更を公開 ] をクリックしてください。別のコーディング済みテンプレートでこのスタイルシートを呼び出すには、ファインダーの「アクション」ドロップダウンメニューをクリックし、「パブリックURLをコピー」を選択してください。 

アセットにスタイルシートを添付する

スタイルシートをテンプレート、個々のページ、またはドメイン全体に適用します。スタイルシートは、配置された場所に基づいて、特定の順序で適用されます。以下のリストは、サイト上で適用される順序を示しています：

1. public_common.css (必須): 主にHubSpotのアプリで使用されるスタイルシートですが、特定のサイト機能でも使用されます。
2. ヘッダーのHTML：コンテンツの「xml-ph-0000@deepl.internal」ページ設定で、サイトのグローバル<head> > にリンクタグが追加されました。
3. Layout.css（ドラッグ＆ドロップレイアウトに必須）：すべてのドラッグ＆ドロップテンプレートレイアウトに添付されている、デフォルトのレスポンシブCSSファイル。
4. 添付されたスタイルシート（ページ）：[ コンテンツ]> の [ ページ設定 ] で、サイト全体に添付されたスタイルシート。
5. 添付スタイルシート（ブログ）：「コンテンツ」> の「ブログ設定」で、ブログに添付されたスタイルシート（サイトのグローバルスタイルシートを上書きします）。
6. リンクされたスタイルシート（テンプレートレイアウトに推奨）：テンプレートレイアウトに組み込まれたスタイルシート。
7. テンプレート内の追加の<head>マークアップ：特定のテンプレートレイアウトの<head>にリンクタグが追加されました。
8. ページ固有のスタイルシート：ページの設定に紐付けられたスタイルシート。
9. ページのヘッダーHTML：特定のページの<head>にリンクタグが追加されました。

テンプレートにスタイルシートを紐付ける

デザインマネージャー内のインスペクターでは、ドラッグ＆ドロップテンプレートにスタイルシートを紐付けることができます。コード化されたテンプレートの場合、スタイルシートはコードエディタに直接追加されます。

テンプレートのドラッグ＆ドロップ

1. HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［デザインマネージャー］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［デザインマネージャー］に直接移動します。
2. Finderで、ドラッグ＆ドロップ用テンプレートファイルの名前をクリックします。
3. インスペクタの「リンクされたスタイルシート」セクションにある「追加」ドロップダウンメニューをクリックし、使用するスタイルシートを選択します。スタイルシートを削除するには、「X」をクリックしてください。
4. 完了したら、右上の「変更を公開」をクリックして、テンプレートを使用している本番ページに変更を反映させてください。

コードテンプレート

コード化されたテンプレートの場合、スタイルシートは、<link>タグまたはHubL タグを使用して、ファイルの<head>にHubLタグを使用して、コードエディタに直接スタイルシートを埋め込むことができます。コード化されたテンプレートに関する詳細は、開発者向けドキュメントをご覧ください。

特定のページにスタイルシートを適用する

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

コンテンツエディタの「設定」セクションから、ページ固有のスタイルシートを適用するには：

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［ウェブサイトページ］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［ウェブサイトページ］に直接移動します。
   • ランディングページ：HubSpotアカウントで、［その他］をクリックし、［コンテンツ］＞［ランディングページ］に移動します。アカウントに［その他］が表示されない場合は、［コンテンツ］＞［ランディングページ］に直接移動します。
2. ページの名前をクリックします。
3. コンテンツエディターで［設定］メニューをクリックし、［詳細］を選択します。 
4. ダイアログボックスの「スタイルシート」セクションで、「スタイルシートを添付」ドロップダウンメニューをクリックし、スタイルシートを選択します。スタイルシートを削除するには、そのスタイルシートの横にある「X 」をクリックしてください。
5. テンプレートやドメインから継承されたスタイルシートを無効にするには、スタイルシートの横にあるドロップダウンメニューをクリックし、「無効」を選択してください。

ドメインのスタイルシートを添付する

ご注意：テーマテンプレートには、ドメインレベルのスタイルシートを使用するために、enableDomainStylesheets: trueドメインレベルスタイルシートを含める必要があります。テンプレートの注釈について詳しくはこちらをご覧ください。

ドメイン全体にスタイルシートを適用するには：

1. HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンをクリックします。
2. サイドバーメニューで、[ 「コンテンツ」 > ページをクリックします。
3. ドロップダウンメニューをクリックして、設定を更新したいドメインを選択してください。
4. [ テンプレート ] タブの [CSS& スタイルシート] セクションで、[+ スタイルシートを追加 ] をクリックします。スタイルシートを削除するには、添付されているスタイルシートの横にある「X」をクリックしてください。
5. ［保存］をクリックします。

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