テーマ

テーマは、移植可能な形式に統合されたさまざまな開発アセットであり、マーケティング担当者にとって快適なコンテンツ編集環境の提供に役立ちます。テーマとテーマ内のすべてのファイルは、環境間およびアカウント間で移植可能な状態に設計されています。テーマを使うと、開発者はコードファイルの作業を行い、使い慣れたツール、テクノロジー、ワークフローを利用できます。同時に、マーケティング担当者に柔軟なコンテンツ作成環境を提供し、レイアウト、スタイル、コンテンツのすべての更新をコンテンツエディター内でサポートできます。 

パッケージとしてのテーマ

テーマはパッケージであり、HubSpotアプリ全体に適用されるので、効率的なコンテンツ作成が可能になります。開発者はテーマを使用して、制作担当者向けのデザインシステムを構築できます。柔軟なテーマに、一定の基準を組み込んでビジネスニーズに合わせることもできます。 

ページの作成

制作担当者が新しいページの構築を始めるとき、ページ作成の出発点にするテーマを選択し、そのテーマ内のテンプレートを選択して開始するよう指示されます。

HubSpot内でのテーマ選択これは、制作担当者が特定のHubSpotアカウント上でさまざまなサイト(またはテーマ)のテンプレートを識別し、ページ作成プロセスを整理するために役立ちます。スクリーンショットとテーマのその他の構成は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ファイルには、テーマの読み取り可能なラベル、プレビュースクリーンショット、テーマの動作のためのさまざまな構成など、テーマディレクトリーのメタ情報が含まれます。theme.jsonファイルの例を次に示します。

JSON
// theme.json
{
    "label": "Cool Theme",
    "preview_path": "./templates/home-page.html",
    "screenshot_path":"./images/templates/homepage.jpg",
    "enable_domain_stylesheets": false,
    "version":"1.0",
    "author":{
      "name":"Jon McLaren",
      "email":"noreply@hubspot.com",
      "url":"https://theme-provider.com/"
    },
    "documentation_url":"https://theme-provider.com/cool-theme/documentation",
    "example_url":"https://theme-provider.com/cool-theme/demo"
}
theme.json
パラメーター説明
label
String

テーマを示すラベル。テンプレート選択画面やテーマエディターなど、HubSpot全体にわたってテーマが表示される箇所で使用されます。 

preview_path
String

テーマ内のテンプレートファイル(必ず既定のテンプレートを使用)への相対パスまたは絶対パス。テーマエディターでテーマをプレビューする際に使用されます。 

screenshot_path
String

テーマが選択されるさまざまな箇所(テンプレート選択画面など)で、テーマの外観を示すスナップショットの提供に使用する、画像ファイルへの相対パスまたは絶対パス。 

enable_domain_stylesheets
Boolean

ウェブサイト設定でドメインに添付されたスタイルシートをテーマ内のテンプレートに含めるかどうかを指定します。既定値はfalseです。

version
String

.に対応した整数のバージョン番号。

Author
object

テーマプロバイダーとして開発者自身に関する情報を提示するオブジェクト。

name
プロバイダーの名前。
email
プロバイダーのサポート担当のEメールアドレス。
URL
プロバイダーのウェブサイト。
documentation_url
String

テーマドキュメントのリンク。

example_url
String

テーマの実例のリンク。

fields.json

fields.jsonファイルはテーマエディターで利用可能なフィールドとフィールドグループを制御します。テーマエディターとこれらのフィールドにアクセスできる機能は、「グローバルコンテンツを編集」マーケティングユーザー権限によって制御されます。開発者は調整可能なフィールドを完全に制御でき、これはエンドユーザー基準で提供するフィールドに基づいて行います。例えば、マーケットプレイスプロバイダーによっては非常に柔軟なオプションの提供を望んでいたり、利用可能なオプションの制限を検討していたりすることが考えられます。

テーマで使用できるフィールドを次に示します。

テーマフィールドで使用できるオプションに関する包括的なドキュメントについては、モジュールとテーマフィールドのドキュメントを参照してください。 

テーマに使用できるフィールドは、モジュールで利用可能なものと比べて意図的に制限されています。一般に、テーマフィールドはCSS関連の調整に最適であり、グローバルコンテンツが実際のコンテンツに適しています。これにより、制作担当者に最適な実践方法が推奨されます。

問題の例:会社にタグラインがあります。これをブランディングの一環として検討します。

問題のある解決策:タグラインをテーマフィールドに追加してすべてのブランディング箇所に表示することを検討するかもしれません。

この場合、制作担当者がコンテンツエディターからタグラインを編集できなくなり、その理由も分からないという状況になります。テーマエディターを使用しなければなりません。

より優れた解決策:グローバルモジュールを使用します。グローバルモジュールをヘッダーやフッターなどのグローバルパーシャルに配置できます。1つの場所を設定して、配置するすべての場所にわたるコンテンツを編集できるようになります。 

制作担当者はこのコンテンツがグローバルであることに気付き、直接編集できます。

テーマのフィールド値の使用

フィールド値にアクセスするには、fields.jsonの値へのパスにthemeを使用したドット表記とプレフィックスを使用します。テーマフィールド値はスタイルシートで{{ theme.path.to.value }}のような構文で使用できます。例えば、以下のフォントフィールドで説明します。

JSON
// fields.json
[{
   "type": "group",
   "name": "typography",
   "label": "Typography",
   "children": [
     {
       "type": "font",
       "name": "h1_font",
       "label": "Heading 1",
       "load_external_fonts": true,
       "default": {
         "color": "#000",
         "font": "Merriweather",
         "font_set": "GOOGLE",
         "variant": "700",
         "size": "48"
       }
     }
  ]
}]

これを次のようなCSSで参照します。

CSS
h1 {
 font-size: {{ theme.typography.h1_font.size }}px;
 font-family: {{ theme.typography.h1_font.font }};
 color: {{ theme.typography.h1_font.color }};
 text-decoration: {{ theme.typography.h1_font.styles.text-decoration }};
 font-style: {{ theme.typography.h1_font.styles.font-style }};
 font-weight: {{ theme.typography.h1_font.styles.font-weight }};
}

テーマのプレビュー

開発者は、テーマフィールドの正常な動作をテストする必要が生じる場合がありますが、実際のページに影響を与えないようにもする必要があります。ここでテーマ テスト モードを使います。

テストモード

テストモードを使用するとテーマのフィールドを操作できる安全な環境が提供され、期待どおりに機能することを確かめることができます。インターフェイスは制作担当者が表示できるテーマプレビュー/エディターとまったく同様の表示ですが、実際のウェブサイトの設定は変更されないので安心です。誤ってテーマ設定が更新されないように保護されるため、テストモードでは公開がブロックされています。テストモードになっているかどうかはアドレスバーに?testmode=trueと表示されることでわかります。また、テーマエディターのヘッダーにはテストモードアイコンが表示されます。

テーマテスト/プレビューモード

テーマのテストモードを有効にする方法

  1. デザインマネージャーのファインダーでテーマを選択します。
  2. プレビューボタンが表示されます。これを選択すると、テーマ設定のテストモードになります。

ページエディター内でテーマ設定を開く方法もあります。開いたら次に、クエリーパラメーター?testmode=trueをアドレスバーのURLに追加します。


参考になりましたか? *
こちらのフォームには開発者向けドキュメントに関するご意見をお聞かせください。なお、HubSpot製品に関するご意見は、アイデアフォーラム(英語)にお寄せください。