テーマを使ってみる

テーマとは、開発者向けのアセットからなる、移植可能で自己完結型のパッケージであり、これらのアセットを連動させて柔軟なコンテンツ編集操作を可能にするように設計されています。テーマには、テンプレート、モジュール、CSSファイル、JavaScriptファイル、画像などを組み込むことができます。開発者はテーマを使用することで、モジュールフィールドと似た一連のテーマフィールドを作成できます。制作担当者はこのテーマフィールドを使用して、CSSを編集せずにウェブサイト全体のスタイルを制御できるようになります。

HubLは、テーマのCSS全体のテーマフィールドの値にアクセスする際に活用できます。次に制作担当者はテーマエディターを使用して、テーマフィールドの値を変更し、テーマに含まれる既存のテンプレートに対する変更をプレビューしてから、その変更を公開できます。

テーマの要素の色の選択を示す、テーマ設定の編集UIのアニメーション

このドキュメントでは、HubSpot CMS Boilerplate(ボイラープレート)に基づいて最初のテーマを作成する方法について説明します。テーマの詳細については、テーマのリファレンスドキュメントを参照してください。

CMS Hubを使って初めて開発する場合には、こちら(英語)をお勧めします。

Quick start to CMS Hub development

注:開始する前に、HubSpot CLIをインストールする必要があります。

1. ボイラープレート テーマ プロジェクトを開始する

hs create website-theme my-website-themeを実行して、CMS theme boilerplate(テーマボイラープレート)のファイルが設定されたmy-website-themeディレクトリーを作成します。

2. CMSボイラープレートをHubSpotアカウントにアップロードする

hs upload my-website-theme my-website-themeを実行します。これにより、ボイラープレートがアカウントのデザインマネージャーにアップロードされ、「my-website-theme」というタイトルのフォルダーにアップロードされます。

3. ページを作成する

アップロードしたテーマからページを作成するには、次の手順に従います。

  • HubSpotアカウントにて、[マーケティング]>[ウェブサイト]>[ウェブサイトページ]の順に進みます。
  • 右上の[作成]をクリックします。 
  • [自分のテーマ]で、CMSテーマボイラープレートのテーマを選択してから、任意のテンプレートを選択します。 
テーマ内のテンプレートのページ作成操作のスクリーンキャプチャー

4. テーマフィールドを編集する

  • ページエディターの左のサイドバーで、[デザイン]タブをクリックします。
  • [テーマ設定を編集]を選択します。ここで、既存のテーマ設定を変更できます。テーマ設定への変更を公開すると、この更新したテーマが使用されている全てのページのスタイルが更新されます。 
ページエディターからテーマ設定を開く

5. ローカルの変更を準備する

ターミナルに戻り、hs watch my-website-theme my-website-themeを実行します。このコマンドは、ローカルディレクトリーを監視し、以後、ファイルが保存されると変更内容をHubSpotアカウントに自動的にアップロードします。

6. テーマフィールドを追加する

ローカルでの変更が監視されるようになりました。新しいテーマフィールドを追加します。

  • エディターでfields.jsonファイルを開きます。これは、テーマエディターのサイドバーで利用可能なフィールドを制御するためのファイルです。フッターの高さを指定するための新しいフィールドを追加します。
  • ファイルの末尾近くにあるfooterグループを見つけます。 
  • 以下のコードをコピーして、ファイルのfooterグループの子配列の最初の項目の上にJSONを貼り付けます。 
// fields.json { "id" : "", "name" : "height", "label" : "Footer height", "required" : false, "locked" : false, "display" : "text", "step" : 1, "type" : "number", "min" : 10, "max" : 900, "help_text":"This footer will expand in height to accomodate any content added to the footer. You are setting the minimum height in px", "default" : 100 },
  •  fields.jsonを保存して、HubSpotのテーマプレビューアーを再読み込みします。左のサイドバーに新しいフィールドが表示されます。

7. CSSでフィールドを参照する

  • コードエディターで、theme-overrides.cssファイルを開きます。.footerのCSSセレクターを見つけます。このセレクターにmin-heightを追加します。
  • テーマの値にアクセスするには、themeオブジェクトを使用します。例えば、{{ theme.footer.height }}を使用して、heightフィールドに設定される高さの値にアクセスします。
  • theme-overrides.css内の.footer宣言を以下のように置き換えます。
.footer { background-color: {{ footer_bg_color }}; min-height: {{theme.footer.height}}px; }
  • theme-overrides.cssを保存して、HubSpotアカウントにアップロードします。

8. 変更をテストする

テーマエディターに戻り、新しいフィールドをフッターに表示するためページを再読み込みします。高さの値を変更すると、プレビューに直ちに反映されます。フッターに背景色を設定すると、変化が分かりやすくなります。

次のステップ

テーマの作成、更新ができました。次にテーマフィールドをさらに作成してプロジェクト用にカスタマイズできます。他のカスタマイズオプションについては、テーマの概要を参照してください。テーマを作成する際には、HubSpotのCMS上のウェブサイトを最適化する方法を確認すると役立ちます。

HubSpotのCMS Hubには既定のテーマが複数用意されています。これらのテーマを表示、複製、更新するなどして、テーマの具体的な使用方法について学習できます。

テーマについて把握したら、最初のカスタムモジュールを作成する方法を確認してください。


参考になりましたか?
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。