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> tags on the page. タグ内にある場合、ページ URL が宣言の横に表示されます。 CSS がインラインで設定されている場合は、要素スタイル がインスペクターの宣言の横に表示されます。
つまり、CSS はスタイルシートから取得されたものではなく、ページの見出しやフッターの <style> タグ内にあるわけでもなく、モジュール自体の中に設定されているということになります。
ブラウザーからの CSS
宣言の横にユーザーエージェントスタイルシートが表示された場合、CSS はブラウザーの既定スタイルの一部です。これは <p> や <h1>, <h2>, <span>, <div> などの HTML タグのスタイルでよく見られます。
このスタイルは最後に適用され、添付されたスタイルシートや <style> タグに追加された CSS より優先されますが、より具体的な宣言があるページに適用されるスタイルシートで上書きできます。
ウェブブラウザーで開発者ツールを使用する
ウェブブラウザーの開発者ツールを使用して、ライブサイトに適用されるスタイルを調べることができます。別のタイプのブラウザーを使用している場合は、各ブラウザーのヘルプドキュメントを検索して、ウェブページ要素を調べる方法を探してください。
以下に、開発者ツールを使用する方法についての一般的なウェブブラウザーのリソースへのリンクを記載します:
別のタイプのブラウザーを使用している場合は、各ブラウザーのユーザードキュメントを検索して、ページの要素を調べる方法の詳細を参照してください。
