質問&ディスカッション

jmatsumoto
メンバー

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

解決

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

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

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

0 いいね!
1件の承認済みベストアンサー
mikemura
解決策
HubSpot進行役
HubSpot進行役

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

解決

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

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

 

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

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

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

 

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

 

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

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

mikemura_1-1690532789128.png

 

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

 

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

元の投稿で解決策を見る

2件の返信
jmatsumoto
メンバー

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

解決

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

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

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

0 いいね!
mikemura
解決策
HubSpot進行役
HubSpot進行役

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

解決

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

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

 

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

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

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

 

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

 

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

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

mikemura_1-1690532789128.png

 

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

 

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