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

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アセットのエディターでスタイル設定が設定されていることが原因です。
    
    
    
    
  • 「element.style」がインスペクターの宣言の横に表示される場合は、CSSがインラインで設定されています。インラインスタイルとは、ページの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の認定パートナーと連携して、テンプレートのカスタマイズをお手伝いします。
  • テーマテンプレートを使用すると、コードを記述せずにページスタイルを編集できます。
  • アセットマーケットプレイスから購入したテンプレートを使用している場合、ページのデザインに関する質問については、そのテンプレートのデザイナーにお問い合わせください。