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

ページのスタイル指定のソースを理解する

更新日時 2026年1月31日

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

すべての製品とプラン

HubSpotでコンテンツスタイル指定を追加できる複数の場所があり、それが追加された場所に基づいて特定の順序で適用されます。この記事では、スタイル指定の適用方法、公開中のページ上でスタイル指定を見つける方法、デザイン編集でヘルプを要求する方法をご紹介します。

スタイルの適用方法を理解する

スタイルは、HubSpotでのどこに追加されたかに基づいて特定の順序で適用されます。例えば、グローバルスタイルシートに追加されたスタイルは、特定のページに追加されたスタイルによって上書きされます。

このリストを使用すると、ページのスタイル設定のソースを理解できます。最初に適用されたスタイルから始まり、最後に適用されたスタイルで終わります。

カスタムモジュールCSS
- レイアウトエディターでモジュールに添付されたスタイルシート。

- CSS モジュールエディターでモジュールの module.css セクションに追加されます。

- CSS require_css block内のモジュールのHubLマークアップ内にあります。
コードエディターの require_css block を使用してテンプレートに追加されたスタイルシート。
デザインマネージャー内のHubSpotの既定のスタイルシート( layout.cssなど)。
レイアウトエディター上でテンプレートに添付されたスタイルシート。

ページの[設定]タブで添付されたスタイルシート。

全ドメインの設定に添付されるスタイルシート
特定のドメインの設定に添付されたスタイルシート
<style> CSS タグ内に追加されます。例えば、ウェブサイト設定、ページ設定、テンプレートのヘッドHTMLなどです。

ページエディターを使って追加したスタイル。これらのスタイルには、 !important タグも追加されます。!importantタグの詳細と、それらがスタイルに及ぼす影響をご確認ください。

プレビューまたは公開中のページでスタイル指定を検索する

ブラウザーの開発者ツールを使用して、公開中のウェブサイトまたはプレビューページに適用されるスタイルを検索します。ブラウザーによって、スタイル指定をトラブルシューティングする方法が若干異なります。次の例では、Google Chrome が使用されています。

目的のコンテンツに移動します。
- HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
- HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
ページの名前をクリックします。
コンテンツエディターで、右上の［プレビュー］をクリックします。
プレビューページで、[ 新しいタブで開く]をクリックします。
プレビューで、調査する要素を右クリックしてから、[検査]を選択します。
[要素 ]ペインに、ページのHTMLが表示されます。要素をクリックしてスタイルを表示します。
[スタイル ] ウィンドウで、その要素に適用されている CSS ルールを確認します。各スタイルの横にある チェックボックス をオンまたはオフにして、スタイルを一時的に削除または追加します。これは、要素に影響を与えているルールを特定するのに役立ちます。

CSSルールの右側には、そのスタイル設定の ソース名 が表示されます。これにより、スタイル設定のソースがどこにあるかを確認できます。ソース名の上にマウスポインターを置くと、完全な名称が表示されます。
- スタイル設定がCSSファイルから取得されている場合、スタイルシートの名前がCSS宣言の横に表示されます。デザインマネージャーに移動し、スタイルシートを見つけて、必要に応じて編集します。

- ソース名が moduleで始まる場合、スタイルの設定はモジュールのCSSに基づきます。ソース名 の上にマウスポインターを置き、モジュールの完全な名前を表示します。

- ソース名が User agent stylesheet の場合、スタイルはブラウザーのデフォルトのスタイルの一部です。
  - 通常、これはHTMLタグのスタイル設定( <p>、 <h1>、 <span> など)で、ブラウザーが要素のスタイルルールを見つけられない場合に表示されます。
  - ユーザーエージェントのスタイルシートは、その要素に独自のスタイルを追加することでオーバーライドできます。

- ソース名がページURLの場合、スタイルはページの <style> タグに基づきます。例えば、ページまたはテンプレートのヘッドHTMLでスタイルを設定できます。

- ソース名がページURLで、スタイルが #hs_cos_wrapper_module_numberをターゲットとしている場合、スタイルはページエディターの[ スタイル ]タブに追加されます。これらのスタイルには、HubSpotによって !important タグが追加されます。!importantタグの詳細と、それらがスタイルに及ぼす影響をご確認ください。

- ソース名が <style>の場合、スタイル設定も自動的に要素に含まれます。多くの場合、これはCTAやミーティングウィジェットなどの埋め込み可能なHubSpotアセットのエディターでのスタイル設定が原因です。

- インスペクターで宣言の横に element.style が表示される場合、CSSはインラインで設定されています。インラインスタイルとは、ページのHTMLソースコード、またはテンプレートのインラインスタイルフィールドに直接追加されるスタイルです。例えば、ソースコード内のインラインスタイルは <p style="background:purple;">Hello world</p>と表示されます。

ページの検査方法の詳細については、ウェブブラウザーのヘルプドキュメントを参照してください。

デザイン編集でヘルプを要求する

HubSpotテンプレートまたはスタイルシートを変更するための最適なリソースは、オリジナルのテンプレートデザイナーです。ただし、トラブルシューティングHTMLおよびCSSの使いやすさに応じて、コンテンツスタイル指定で追加のヘルプを要求するためのさまざまなリソースが用意されています。

テンプレート上のデザインに関する問題をトラブルシューティングするためにインスペクターツールが使いやすい場合：

- コードに関するヒント、アドバイス、トラブルシューティングが必要な場合は、コミュニティーのCMS開発フォーラムを検索し、メッセージを投稿してください。
- CMSフレームワークのチュートリアル、ガイド、概要については、CMSリファレンスドキュメントを参照してください。
- CMS開発者コミュニティーのSlackで、HubSpotの製品チームや他のHubSpotを使用している開発者とつながりましょう。

テンプレート内のHTMLとCSSの読み取りや編集がしづらい場合：

- ウェブサイトデザインの専門知識を持つHubSpotの認定パートナーと連携して、テンプレートのカスタマイズをお手伝いします。
- テーマテンプレートを使用すると、コードを記述せずにページスタイルを編集できます。
- アセットマーケットプレイスから購入したテンプレートを使用する場合、ページのデザインに関する質問についてはテンプレートのデザイナーにコンタクトしてください。

この記事はお役に立ちましたか？

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