テーマを使ってみる

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

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

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

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

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

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

• HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
• 画面右上の［作成］をクリックし、［ウェブサイトページ］を選択します。 
• ダイアログボックスで、ページを公開するドメインを選択し、ページ名を入力します。［ページを作成］をクリックします。

• テンプレート選択画面では、有効なテーマのテンプレートがページの上部に表示されます。
  • 有効なテーマを選択していない場合は、［CMSテーマボイラープレート］にカーソルを合わせ、［有効なテーマに設定］をクリックします。
  • 既に有効なテーマを設定している場合は、テーマセレクターのドロップダウンメニューをクリックして新しいテーマを選択し、［テーマを変更］を選択します。次に、CMSテーマボイラープレートにカーソルを合わせ、［有効なテーマに設定］をクリックします。次の画面で、テンプレートを選択します。

これにより、テーマのフィールドを編集できるページエディターが表示されます。

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

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

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

• エディターでfields.jsonファイルを開きます。これは、テーマエディターのサイドバーで利用可能なフィールドを制御するためのファイルです。フッターの高さを指定するための新しいフィールドを追加します。
• ファイルの末尾近くにあるfooterグループを見つけます。 
• 以下のコードをコピーして、ファイルのfooterグループの子配列の最初の項目の上にJSONを貼り付けます。 

•  fields.jsonを保存して、HubSpotのテーマプレビューアーを再読み込みします。左のサイドバーに新しいフィールドが表示されます。

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

• theme-overrides.cssを保存して、HubSpotアカウントにアップロードします。

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

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

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

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