質問&ディスカッション

jmatsumoto
Miembro

CSSでのクラスやID管理について

resolver

HubSpotCMSで既存のテーマをベースにCSSによる装飾でオリジナルのデザインのランディングページを作成しています。

複数の要素やセクションに同一のCSSを適用させたり、複数のセクションをひとまとまりにして同じデザインを適用したりしたいのですが、セクションや要素に任意のクラスやIDを設定することは、自作ではない既存テーマを使っている場合は難しいのでしょうか?

何か方法がありましたらお教えいただければ幸いです。

0 Me gusta
1 Soluciones aceptada
mikemura
Solución
Moderador de HubSpot
Moderador de HubSpot

CSSでのクラスやID管理について

resolver

@jmatsumoto さん、ご質問の投稿ありがとうございます。

CSSの追加は可能となっております。下記2パターンにてご提案させていただきます。

 

1. HubSpotのデザインツールにCSSファイルを作成

  • HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインツール]からCSSファイルを作成
  • ランディングページの[編集]>[設定]>[詳細オプション]>[ページスタイルシート]に上記で作成したCSSファイルを添付

詳細はCSSファイルを作成、編集、添付して、サイトのスタイルを設定をご参考ください。

 

ただ、HubSpotの既存テーマを使用しているため、一部CSSが効かない可能性もあり、その場合は下記方法もご検討いただけますでしょうか。

 

2. ランディングページに直接CSSを追記

  • ランディングページの[編集]>[設定]>[詳細オプション]>[追加のコードスニペット]>[Headの HTML]に直接CSSを追加

mikemura_1-1690532789128.png

 

少しでも参考になれば幸いです。

 

@yoshisegawa さん、@assi さん、他にベストプラクティスあれば共有いただければと思います!

Ver la solución en mensaje original publicado

2 Respuestas 2
jmatsumoto
Miembro

CSSでのクラスやID管理について

resolver

ご回答ありがとうございます。

ページの方に独自のIDやクラスをつけるのはやはり難しそうですね。

HTMLファイルを編集できるリッチテキストをうまく使うのがいいのかもしれませんね。

0 Me gusta
mikemura
Solución
Moderador de HubSpot
Moderador de HubSpot

CSSでのクラスやID管理について

resolver

@jmatsumoto さん、ご質問の投稿ありがとうございます。

CSSの追加は可能となっております。下記2パターンにてご提案させていただきます。

 

1. HubSpotのデザインツールにCSSファイルを作成

  • HubSpotアカウントにて、[マーケティング]>[ファイルとテンプレート]>[デザインツール]からCSSファイルを作成
  • ランディングページの[編集]>[設定]>[詳細オプション]>[ページスタイルシート]に上記で作成したCSSファイルを添付

詳細はCSSファイルを作成、編集、添付して、サイトのスタイルを設定をご参考ください。

 

ただ、HubSpotの既存テーマを使用しているため、一部CSSが効かない可能性もあり、その場合は下記方法もご検討いただけますでしょうか。

 

2. ランディングページに直接CSSを追記

  • ランディングページの[編集]>[設定]>[詳細オプション]>[追加のコードスニペット]>[Headの HTML]に直接CSSを追加

mikemura_1-1690532789128.png

 

少しでも参考になれば幸いです。

 

@yoshisegawa さん、@assi さん、他にベストプラクティスあれば共有いただければと思います!