更新日時 2020年 10月 19日
HubSpotコンテンツにはスタイルを適用できる場所がいろいろあります。HubSpotのどこにCSS（カスケードスタイルシート）が適用されているかによって適用順序が決まります。CSSカスケードとは、最後に適用されたスタイルでその前のスタイルが上書きされるという意味です。一般的には、より具体的なスタイルが優先されます。つまり、テンプレートに設定されたスタイルや設定でドメインに適用されているスタイルよりも、特定のページまたはモジュールに適用されているCSSが優先されるということです。
この記事では、CSSスタイル設定をHubSpotコンテンツに適用する方法と、ウェブブラウザーで開発者ツールを使用してこのスタイルを探す方法を説明します。
注：CSSの読み方や編集に自信がない場合は、デザイナーと協力してウェブサイトのスタイル設定の編集を行うことを強くお勧めします。
HubSpotコンテンツにスタイルを適用する方法
HubSpotのさまざまな場所でコンテンツにスタイルを適用できます。CSSは、優先されて、最後のスタイルを降順に適用します。
注：コンテンツに適用された最後のスタイルは、CSSでそれより前に設定されたスタイルより優先されます。また、スタイルはより具体的な宣言や 重要なタグによっても上書きされます。
HubSpotページまたはブログ記事には次の順序でスタイルが適用されます。最後のスタイルが優先されます。
スタイルシートのCSS
スタイルシートのスタイル設定は、ページやブログ記事に適用される最初のCSSです。ページエディターに適用されるスタイルはテンプレートより優先され、テンプレートは設定に添付されているスタイルシートより優先されます。
CSSは次の順序で適用されます。最後のスタイルが優先されます。
- すべてのドメインの設定に添付されたスタイルシート。
- 特定のドメインの設定に添付されたスタイルシート。
- ページまたはブログ記事テンプレートに添付されたスタイルシート。
- ページの設定タブに適用されたスタイルシート。
- すべてのHubSpotページに適用される 既定のスタイルもあります。
スタイルシートのCCSが適用される場合、そのスタイルシートの名前がインスペクターのCSS宣言の横に表示されます。スタイルシート名の上にマウスポインターを置くと、ファイル名全体を確認できます。
スタイルシートの名前を確認したら、デザインマネージャー（HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。）に移動してスタイルシートを見つけて、必要に応じて編集します。
インスペクターにスタイルシートの名前が表示されている場合、CSSが別のコードファイルからスタイルシートに取り込まれている可能性もあります。これは次のように表示されます。
<style>タグに追加されたCSS
<style>タグに追加された CSSは、次のどの場所にも適用できます。最後に適用されたスタイルが優先されます。
- すべてのドメインの設定に追加されたサイトのヘッダーHTMLまたはサイトのフッターHTML。
- 特定のドメインの設定に追加されたサイトのヘッダーHTMLまたはサイトのフッターHTML。
- ページの設定タブに適用されたサイトのヘッダーHTML またはサイトのフッターHTML。
- デザインマネージャーのテンプレートに適用されたサイトのヘッダーHTMLまたはサイトのフッター HTML。
- テンプレートのモジュールに追加されたインラインスタイル。
- コンテンツエディターのモジュールに追加されたインラインスタイル。
CSSがページの<style>タグ内にある場合、ページURLが宣言の横に表示されます。CSS がインラインで設定されている場合は、「要素スタイル」がインスペクターの宣言の横に表示されます。
つまり、CSSはスタイルシートから取得されたものではなく、ページの見出しやフッターの<style>タグ内にあるわけでもなく、モジュール自体の中に設定されているということになります。
ブラウザーのCSS
宣言の横に「ユーザー エージェント スタイルシート」が表示されている場合、CSSはブラウザーの既定スタイルの一部です。これは、<p>や <h1>、<h2>、<span>、<div>などのHTMLタグのスタイルでよく見られます。
このスタイルは最後に適用され、添付されたスタイルシートや<style>タグに追加されたCSSより優先されますが、より具体的な宣言があるページに適用されるスタイルシートで上書きできます。
ウェブブラウザーで開発者ツールを使用する
ウェブブラウザーの開発者ツールを使用して、ライブサイトに適用されるスタイルを調べることができます。別のタイプのブラウザーを使用している場合は、各ブラウザーのヘルプドキュメントを検索して、ウェブページ要素を調べる方法を探してください。
以下に、開発者ツールを使用する方法についての一般的なウェブブラウザーのリソースへのリンクを記載します。
別のタイプのブラウザーを使用している場合は、各ブラウザーのユーザードキュメントを検索して、ページの要素を調べる方法の詳細を参照してください。
