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

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

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

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

1. カスタムモジュールCSS
   1. モジュールに添付されたスタイルシート。
   2. モジュールのCSSセクションに追加されたCSS。
   3. require_cssブロック内のモジュールのHubLマークアップ内のCSS
2. require_cssブロックを介してテンプレートに追加されたスタイルシート
3. HubSpotの既定のスタイルシート（例：layout.css）
4. テンプレートに添付されたスタイルシート
   
   
5. ページの設定タブで添付されたスタイルシート
   
   
6. すべてのドメインの設定で添付されたスタイルシート
7. 特定のドメインの設定で添付されたスタイルシート
8. <style>タグ内で追加されたCSS。たとえば、ウェブサイト設定、ページ設定、またはテンプレートのヘッドHTML。
   
   
9. ページエディターを介して追加されたスタイル。HubSpotは、これらのスタイルに「!important」タグを追加することもあります。!importantタグとスタイル指定に影響を及ぼす方法の詳細を確認してください。

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

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

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

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

  

• 右側の［スタイル］ペインに、その要素に適用されるすべてのスタイルが表示されます。各スタイルの横にあるチェックボックスをオンにしてからオフにすると、スタイルを削除して適用できます。これにより、変更するスタイルルールを絞り込むことができます。
  
  
• CSSルールの右側に、そのスタイルのソース名が表示されます。これにより、スタイル指定がどこから来ているかがわかります。ソース名の上にカーソルを置くと、完全な名称が表示されます。
  • スタイル指定がスタイルシートから来ている場合は、そのスタイルシートの名前がインスペクター内のCSS宣言の横に表示されます。その場合は、デザインマネージャーに移動して、スタイルシートを探し、必要に応じて編集することができます。
    
    
  • ソース名が「module」で始まっている場合は、スタイル指定がモジュールのCSSから来ている可能性があります。ソース名の上にカーソルを置き、モジュールの完全な名前を表示します。
    
    
  • ソース名が「User agent stylesheet」である場合は、CSSがブラウザーの既定のスタイル指定の一部です。これは、<p>、<h1>、<h2>、<span>、<div>などの一般的なHTMLタグスタイル指定の場合に最もよく見られます。このスタイル指定は、ブラウザーが要素の一般的なスタイル指定ルールを見つけられない場合に適用されますが、その要素に独自のスタイルを追加することで上書きできます。
    
    
  • ソース名がページURLである場合は、CSSがページ上の<style>タグ内から来ています。たとえば、ページまたはテンプレートのヘッドHTMLでスタイル指定を設定できます。
    
    
  • ソース名がページURLであり、スタイル指定が「#hs_cos_Reppar_module_number_number」を対象にしている場合は、スタイル指定がページエディターの［スタイル］タブで設定されている可能性があります。HubSpotは、このようなスタイルに「!important」タグを追加します。!importantタグとスタイル指定に影響を及ぼす方法の詳細を確認してください。
     
    
  • ソース名がの場合<style>、スタイリングは要素に自動的に含まれる可能性があります。多くの場合、これはCTAや会議ウィジェットなど、埋め込み可能なHubSpotアセットのエディタで設定されたスタイリングに起因します。
    
    
  • CSSがインラインで設定されている場合は、「element.style」がインスペクターの宣言の横に表示されます。インラインスタイル指定は、ページのHTMLソースコードまたはテンプレートの［インラインスタイル］フィールドに直接追加されるスタイル指定です。たとえば、ソースコード内のインラインスタイル指定は、「<p style="background:purple;">Hello world</p>」として表示されます。
    
    

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

• Chrome
• Firefox
• Microsoft Edge
• Safari

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

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

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

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

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

• • ウェブサイトデザインの専門知識を所有する認定HubSpotパートナーに連絡して、テンプレートのカスタマイズに関するヘルプを依頼してください。
  • スターターテンプレートまたはテーマテンプレートを使用して、コードを書き込むことなくページスタイルを編集します。
  • アセットマーケットプレイスで購入したテンプレートを使用している場合は、ページのデザインに関する質問をテンプレートのデザイナーにお問い合わせください。