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

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

更新日時 2023年 1月 18日

対象製品

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

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

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

HubSpot内のCSSスタイル指定は、後述するように、それがHubSpotで設定されている場所に基づいて順序正しく適用されます。たとえば、グローバルスタイルシートで設定されたスタイル指定は、特定のページで設定されたスタイル指定によって上書きされます。 

  1. カスタムモジュールCSS
    1. モジュールに添付されたスタイルシート。
    2. モジュールのCSSセクションに追加されたCSS。
    3. require_cssブロック内のモジュールのHubLマークアップ内のCSS
  2. require_cssブロックを介してテンプレートに追加されたスタイルシート
  3. HubSpotの既定のスタイルシート(例:layout.css)
  4. テンプレートに添付されたスタイルシート

    design-manager-linked-stylesheet
  5. ページの設定タブで添付されたスタイルシート

    page-editor-attach-stylesheet
  6. すべてのドメインの設定で添付されたスタイルシート
  7. 特定のドメインの設定で添付されたスタイルシート
  8. <style>タグ内で追加されたCSS。たとえば、ウェブサイト設定ページ設定、またはテンプレートのヘッドHTML。

    page-editor-head-html
  9. ページエディターを介して追加されたスタイル。HubSpotは、これらのスタイルに「!important」タグを追加することもあります。!importantタグとスタイル指定に影響を及ぼす方法の詳細を確認してください。

page-editor-styles-tab

プレビューまたはライブページでスタイル指定を検索する

ブラウザーで開発者ツールを使用して、ライブウェブサイトまたはプレビューページに適用されるスタイルを調べることができます。ブラウザーによって、スタイル指定をトラブルシューティングする方法が若干異なります。

Google Chromeでスタイル指定を見つけるには、次の手順を実行します。

  • プレビューまたはライブページで、調査する要素を右クリックしてから、[検査]を選択します。
  • 左側の[要素]ペインに、ページのHTMLが表示されます。要素をクリックしてそのスタイルを表示することも、ペイン左上にあるカーソルアイコンを使用してオンページ要素をクリックすることもできます。

    inspect-live-page-cursor

  • 右側の[スタイル]ペインに、その要素に適用されるすべてのスタイルが表示されます。各スタイルの横にあるチェックボックスをオンにしてからオフにすると、スタイルを削除して適用できます。これにより、変更するスタイルルールを絞り込むことができます。

    inspect-live-page
  • CSSルールの右側に、そのスタイルのソース名が表示されます。これにより、スタイル指定がどこから来ているかがわかります。ソース名の上にカーソルを置くと、完全な名称が表示されます。
    • スタイル指定がスタイルシートから来ている場合は、そのスタイルシートの名前がインスペクター内のCSS宣言の横に表示されます。その場合は、デザインマネージャーに移動して、スタイルシートを探し、必要に応じて編集することができます。

      inspect-css-stylesheet-name
    • ソース名が「module」で始まっている場合は、スタイル指定がモジュールのCSSから来ている可能性があります。ソース名の上にカーソルを置き、モジュールの完全な名前を表示します。

      inspect-css-module-name
    • ソース名が「User agent stylesheet」である場合は、CSSがブラウザーの既定のスタイル指定の一部です。これは、<p>、<h1>、<h2>、<span>、<div>などの一般的なHTMLタグスタイル指定の場合に最もよく見られます。このスタイル指定は、ブラウザーが要素の一般的なスタイル指定ルールを見つけられない場合に適用されますが、その要素に独自のスタイルを追加することで上書きできます。

      inspect-css-user-agent
    • ソース名がページURLである場合は、CSSがページ上の<style>タグ内から来ています。たとえば、ページまたはテンプレートのヘッドHTMLでスタイル指定を設定できます。

      inspect-css-page-url
    • ソース名がページURLであり、スタイル指定が「#hs_cos_Reppar_module_number_number」を対象にしている場合は、スタイル指定がページエディターの[スタイル]タブで設定されている可能性があります。HubSpotは、このようなスタイルに「!important」タグを追加します。!importantタグとスタイル指定に影響を及ぼす方法の詳細を確認してください。
       

      inspect-css-styles-tab
    • ソース名がの場合<style>、スタイリングは要素に自動的に含まれる可能性があります。多くの場合、これはCTAや会議ウィジェットなど、埋め込み可能なHubSpotアセットのエディタで設定されたスタイリングに起因します。

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

      inspect-css-element-style

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

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

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

  • テンプレート上のデザインに関する問題をトラブルシューティングするためにインスペクターツールが使いやすい場合:
    • コードに関するヒント、アドバイス、トラブルシューティングが必要な場合は、コミュニティーのCMS開発フォーラムを検索し、メッセージを投稿してください。
    • CMSフレームワークのチュートリアル、ガイド、概要については、CMSリファレンスドキュメントを参照してください。
    • CMS開発者コミュニティーSlackで、HubSpotのプロダクトチームやHubSpotのその他の開発者とつながります。
  • テンプレート内のHTMLとCSSの読み取りや編集がしづらい場合:
この記事はお役に立ちましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。