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

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

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

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

1. カスタムモジュールのCSS
   1. モジュールに添付されたスタイルシート。
   2. モジュールのCSS セクション に追加されたCSS。
   3. CSS require_cssブロック内のモジュールのHubLマークアップ内
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> として表示されます。
    
    

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

• クロム
• Firefoxの
• マイクロソフトエッジ
• サファリ

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

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

• インスペクターツールを使用してテンプレートのデザインの問題をトラブルシューティングするのが快適な場合は、次の手順に従います。

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

• テンプレートでHTMLやCSSを読み、編集することに不安がある場合:

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