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

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から来ている可能性があります。ソース名 の上にマウスポインターを置き、モジュールの完全な名前を表示します。
    
    
    
    
  • ソース名が ユーザー エージェント スタイルシート の場合、CSS はブラウザーの既定のスタイルの一部です。これは、 <p>、 <h1>、 <h2>、 <span>、 <div>などの一般的なHTMLタグスタイルでよく見られます。このスタイルは、ブラウザーが要素の一般的なスタイル規則を見つけられない場合に適用されますが、その要素に独自のスタイルを追加することで上書きできます。
    
    
    
    
  • ソース名がページURLの場合、CSSはページに <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> として表示されます。
    
    

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

• Chrome
• ファイアフォックス
• Microsoftエッジ
• サファリ

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

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

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

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

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

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