テーマ
テーマは、移植可能な形式に統合されたさまざまな開発アセットであり、柔軟なコンテンツ編集環境の提供に役立ちます。HubSpot CLIを使用してローカル環境でテーマを作成する際には、使い慣れたツール、テクノロジー、ワークフローを使用できます。テーマと、テーマ内の全てのファイルも、環境間およびアカウント間で移植可能です。テーマの開発方法に関する動画については、以下のHubSpotアカデミーの動画をご覧ください。
テーマはパッケージであり、HubSpotアプリ全体に適用されるので、効率的なコンテンツ作成が可能になります。開発者はテーマを使用して、制作担当者向けのデザインシステムを構築できます。柔軟なテーマに、一定の基準を組み込んでビジネスニーズに合わせることもできます。
-
Theme
-
Theme Fields
Inputs for content creators to control style settings for themes
-
Templates
Files that define the markup and style of various page types
-
Markup, CSS, JS
-
Modules
Reusable objects that can be placed as instances on pages, partials, and drag and drop areas
-
Markup, CSS, JS
-
制作担当者が新しいページの構築を始めるとき、ページ作成の出発点にするテーマを選択し、そのテーマ内のテンプレートを選択して開始するよう指示されます。
テーマのプレビュー画像などのテーマ設定はtheme.jsonファイルに設定されています。
開発者はテーマを使ってモジュールフィールドに類似したテーマフィールドのセットを作成できます。これにより制作担当者は、開発者がデザインしたさまざまなノブやダイヤルを調整し、CSSを編集せずにウェブサイト全体のスタイルを制御できます。開発者はCSS全体のテーマフィールドの値にHubLを使用してアクセスします。制作担当者はテーマエディターを使用して、テーマフィールドの値を変更し、テーマに含まれる既存のテンプレートに対する変更をプレビューしてから、その変更を公開します。
テーマフィールドはテーマのfields.jsonファイルで決まります。
テーマ内のモジュールは、テーマ内のテンプレート内で使用するように設計する必要があります。テーマモジュールはコンテンツエディター上で強調表示されるので、制作担当者は作成しているページにそのページのコンテキストで正しく機能するようにデザインされたモジュールを素早く簡単に追加できます。既定のモジュールおよび残りのモジュールは引き続きHubSpotアカウントで利用できます。
テーマはファイルを含む1つのディレクトリーです。親テーマフォルダーのサブディレクトリー内にはHTML、CSS、JavaScriptファイル、モジュールなどのファイルを含めることができ、任意の方法で整理できます。テーマを作成するには2つのJSONファイル（theme.jsonとfields.json）が必要です。これらのファイルをルート テーマ フォルダーに含める必要があります。
サンプルから始めるには、HubSpot CMS Boilerplateを参照してください。
現時点では、.jsonファイルの作成とHubSpotアカウントへのアップロードはローカル開発ツールを通じてのみ行えます。
theme.jsonファイルには、テーマの読み取り可能なラベル、プレビュースクリーンショット、テーマの動作のためのさまざまな設定など、テーマディレクトリーのメタ情報が含まれます。theme.jsonファイルの例を次に示します。
| Parameter | Type | Description |
|---|---|---|
label
| String | テーマを示すラベル。テンプレート選択画面やテーマエディターなど、HubSpot全体にわたってテーマが表示される箇所で使用されます。 |
preview_path
| String | テーマ内のテンプレートファイル（必ず既定のテンプレートを使用）への相対パスまたは絶対パス。テーマエディターでテーマをプレビューする際に使用されます。 |
screenshot_path
| String | テーマが選択されるさまざまな箇所（テンプレート選択画面など）で、テーマの外観を示すスナップショットの提供に使用する、画像ファイルへの相対パスまたは絶対パス。 |
enable_domain_stylesheets
| Boolean | ウェブサイト設定でドメインに添付されたスタイルシートをテーマ内のテンプレートに含めるかどうかを指定します。既定値は |
version
| String |
|
Author
| object | テーマプロバイダーとして開発者自身に関する情報を提示するオブジェクト。
|
documentation_url
| String | テーマドキュメントのリンク。 |
example_url
| String | テーマの実例のリンク。 |
license
| String | 有効なSPDX IDまたはテーマ内のライセンスの相対パス。 このライセンスは、テーマの作成者に対してどのような使用と変更を許可するかを規定します。マーケットプレイスに提出する場合に便利です。 |
is_available_for_new_content
| Boolean | 制作担当者のページにテーマが選択対象として表示されるかどうかを指定するブール値。既定値は |
fields.jsonファイルは、テーマエディターで利用可能なフィールドとフィールドグループ（スタイルフィールドを含む）を制御します。含めるフィールドは、ページエディターでの制作担当者による制御をどの程度可能にするかに応じて異なります。テーマ内で利用可能なフィールドの数は、モジュールと比べて限られています。これは、グローバルコンテンツがテーマのコンテンツに適している一方、テーマフィールドはスタイルオプションとして最適なためです。
例えば、テーマのfield.jsonにサイトのタグラインのテキストフィールドを追加する代わりに、それをグローバルモジュールとして追加します。これにより、制作担当者はテーマエディターではなくページエディター内でタグラインを更新できるようになります。
テーマ内で使用できるフィールドを次に示します。
テーマフィールドで使用できるオプションに関する包括的なドキュメントについては、モジュールとテーマフィールドのドキュメントを参照してください。
フィールド値にアクセスするには、fields.jsonの値へのパスにthemeを使用したドット表記とプレフィックスを使用します。テーマフィールド値はスタイルシートで{{ theme.path.to.value }}のような構文で使用できます。例えば、以下のフォントフィールドで説明します。
これを次のようなCSSで参照します。
開発者は、テーマフィールドの正常な動作をテストする必要が生じる場合がありますが、実際のページに影響を与えないようにもする必要があります。ここでテーマ テスト モードを使います。
テストモードを使用するとテーマのフィールドを操作できる安全な環境が提供され、期待どおりに機能することを確かめることができます。インターフェイスは制作担当者が表示できるテーマプレビュー／エディターとまったく同様の表示ですが、実際のウェブサイトの設定は変更されないので安心です。誤ってテーマ設定が更新されないように保護されるため、テストモードでは公開がブロックされています。テストモードになっているかどうかはアドレスバーに?testmode=trueと表示されることで分かります。また、テーマエディターのヘッダーにはテストモードアイコンが表示されます。
貴重なご意見をありがとうございました。