HubSpot開発者向け

custom.cssとcustom.jsを使って、transjtのテーマに独自のCSSとJavaScriptを追加できます。どちらも、再エクスポートしてもそのまま残ります。

変更を加える場所

transjtのテーマにはすべて、独自のコード用に2つのファイルが用意されています。

これらはtransjtが生成するすべてのファイルの後に読み込まれるため、ほとんどの場合、!importantなしでも独自のルールが優先されます。

再エクスポートしても安全：プロジェクトをもう一度エクスポートしても、transjtはcustom.cssとcustom.jsをそのまま残します。生成されたモジュールやテーマファイルは置き換えられることがあるため、調整は生成ファイルではなく、これらのファイルに書いてください。

HubSpotでContent > Design Managerに移動します。
transjt projectsフォルダーを開き、次にプロジェクトのフォルダーを開きます。フォルダー名はtj-で始まり、その後にプロジェクト名が続きます（例：tj-northbeam-claude）。
custom.cssはcssフォルダーに、custom.jsはjsフォルダーにあります。

公開中のページには、次に公開したときに変更が反映されます。すぐに確認したい場合は、HubSpotでページを開いてUpdateをクリックします。

使い慣れたコードエディターで作業したい場合は、HubSpot CLIを使います。まず、テーマをダウンロードします。

hs cms fetch "transjt projects/tj-<your-project>" ./my-theme

css/custom.cssまたはjs/custom.jsを編集してから、ファイルをアップロードします。例：

hs cms upload ./my-theme/css/custom.css "transjt projects/tj-<your-project>/css/custom.css"

または、hs cms watchを実行すると、作業中の変更がすべてアップロードされます。

ブラウザーで要素を検証して、変更したいモジュールのクラスを確認し、custom.cssでそのクラスを指定します。

/* Example: larger hero headline on mobile */
@media (max-width: 767px) {
.hero__title { font-size: 2.25rem; }
}

上のクラス名は一例です。ご自身のテーマで確認したクラスを使ってください。