テーマ設定を編集する

テーマとは、HubSpotのページやブログ記事に適用できるスタイルとテンプレートからなるセットです。ウェブコンテンツの外観に一貫性を持たせる目的で、同じテーマを使用する全てのページと記事のスタイルがテーマ設定で管理されます。

始める前に

この機能を使い始める前に、事前に必要な手順と、この機能を使用する場合の制限事項と潜在的な結果について十分に理解しておいてください。

制限事項と考慮事項について

• テーマ設定でどんなスタイルオプションを使用できるかは、テーマを作成したウェブ開発者がテーマに含めたテーマ フィールド オプションによって異なります。
• ナレッジベースでは、テーマの修正バージョンが使用されます。ナレッジベースのテーマ設定の編集について詳細をご確認ください。 
• ウェブコンテンツの要素の中には、以下のように、アカウント設定の他の部分で管理されるものもあります。
  • 会社ロゴ：会社ロゴを更新するにはブランドキットを使用します。
  • ナビゲーションメニュー：メニューの色はテーマで設定できますが、ナビゲーションメニューのコンテンツとリンクは［ナビゲーション］設定で管理されます。ページエディター内でグローバルヘッダーまたはグローバルフッターのコンテンツに追加できるナビゲーションメニューを作成する方法について、ご確認ください。

テーマ設定を編集する

テーマの設定を編集するには、そのテーマを使用する任意のページや記事で完全なテーマエディターを使用できます。また、スーパー管理者がアカウントでユニバーサル テーマ エディター（ベータ版）をオプトインした場合は、コンテンツエディターでウェブサイトやランディングページのテーマ設定を編集できます。 

1. 目的のコンテンツに移動します。

   • ウェブサイトページ：HubSpotアカウントにて、［コンテンツ］＞［ウェブサイトページ］の順に進みます。
   • ランディングページ：HubSpotアカウントにて、［コンテンツ］＞［ランディングページ］の順に進みます。
   • ブログ：HubSpotアカウントにて、［コンテンツ］＞［ブログ］の順に進みます。
2. コンテンツの名前をクリックします。 
3. ページや記事で完全なテーマエディターを使用するには：
   • コンテンツエディターで［編集］メニューをクリックし、エディターツールバーで［テーマ］を選択します。例えばElevateテーマを使用している場合は、［編集］メニューをクリックし、［テーマ：Elevate］を選択します。

• • テーマエディターで、該当するセクション（例：［色］または［ボタン］）をクリックして展開し、テーマ設定を編集します。 
  • 完了したら、［テーマを公開］をクリックします。自動的にコンテンツエディターに戻ります。
    

4. ページでユニバーサル テーマ エディター（ベータ版）を使用するには：
   • ページのコンテンツエディターで、左側のサイドバーにある［グローバル テーマ スタイル］アイコンをクリックします。 
   • 左側のサイドバーで、該当するセクション（例：［色］または［ボタン］）をクリックして展開し、テーマ設定を編集します。変更内容は、そのテーマを使用する全てのページとテンプレートに適用されます。

テーマのスタイルについて

テーマ設定内には通常、フォント、色、ボタン、リンクなどのスタイルオプションがあります。また、ページのスタイルをより具体的に設定するための追加の詳細設定が存在することもあります。テーマのスタイルオプションは、コーディングされたテーマテンプレートに含まれるテーマフィールドに基づいています。目的の設定が見つからない場合は、テンプレートデザイナーに問い合わせて、テンプレートに含まれるオプションを確認してください。

以下の例は、どんな種類のスタイルオプションがテーマに含まれる可能性があるかについての一般的なガイドです。テンプレートに含まれる可能性のあるテーマフィールドの完全な参照資料については、デザイナーのドキュメントを参照してください。

注：フォント、色、スタイルについては、ページ上のリッチ テキスト モジュール内でこれらをカスタマイズすることも、ページエディター内でテーマのデフォルトスタイルをオーバーライドすることもできます。これらのスタイルの変更は、このテーマを使用している全てのページに適用する場合に限って行ってください。

色

テーマの色の設定により、プライマリー色、セカンダリー色、背景色がテーマテンプレートに含まれるすべての要素に適用されます。これらのスタイルは、ウェブサイトのすべての要素に適用されます。 

フォント

ウェブサイトの見出し、フォーム、ボタン、本文テキストに適用するプライマリーフォントとセカンダリーフォントを選択します。すべての Google フォントがサポートされています。プライマリーフォントまたはセカンダリーフォントの色をカスタマイズするには、カラーバブルをクリックします。単純な色の値を選択することも、［詳細］タブをクリックして、カラーパレットで特定の 16 進値を選択することもできます。 

間隔 

テーマの間隔設定では、ページまたは記事のコンテンツの最大幅と、さまざまな要素間の垂直方向の間隔を制御します。

タイポグラフィー

タイポグラフィー設定では、テンプレートに含まれている特定の要素に適用されるフォントを制御できます。全ての Googleフォントがサポートされています。また、テーマに含まれている特定の見出し、フォント、リンクに適用するカスタムの色を選択することもできます。

• 見出し：テーマに含まれている任意の見出しに適用するフォント、色、スタイルを精密にカスタマイズできます。
• 本文：ページの本文のみのフォント、色、またはテキストサイズをカスタマイズします。 
• リンク：ウェブサイト上のリンクのデフォルトの色をカスタマイズします。また、訪問者がリンクの上にカーソルを重ねた時点またはリンクをクリックした時点で適用するリンクの色と動作もカスタマイズできます。

ボタン

ページとブログ上のボタンにカスタムの色、フォント、スタイルを設定できます。ウェブサイト開発者がテーマをどのように作成したかによっては、ページエディター内で特定のページのボタンのサイズやタイプを交換できる場合もあります。

• サイズ：ページ上のボタンのサイズを小、通常、大で指定します。 
• プライマリー：プライマリーボタンは、訪問者がページ上で行う最も重要なアクションに使用されます。このボタンには目立った色を使用して、訪問者の注意を引くようにします。
• セカンダリー：ページ上にすでに 1 つのプライマリーボタンがある場合、比較的重要性が低いアクションにはセカンダリーボタンを使用します。セカンダリーボタンは通常、優先度の低いアクション用にページに適用されます。 
• シンプル：ページ内のシンプルなボタンモジュールに適用される既定（デフォルト）のフォントとスタイルです。

フォーム

フォームの既定の色、フォント、テキストスタイル、ボタンスタイルをカスタマイズします。

• タイトル：フォームの上に表示されるテキストフィールドに適用されるスタイルです。ここには通常、挨拶やフォームを入力する際の手順が含まれます。フォームに設定されるこれらのスタイルは、テーマの設定のこの部分でのみ管理できます。
• ラベル：フォームフィールドの上に表示されるラベルに適用されるスタイルです。
• フィールド：フォームフィールド自体の名前に適用されるスタイルです。
• ヘルプテキスト：各フォームフィールド内に表示される、訪問者に送信する情報のタイプを伝えるためのサンプルコンテンツです。
• 送信：フォームに適用するボタンのスタイルとサイズを選択します。
• 背景色：フォームに適用される背景色です。
• 境界線：フォームフィールドを囲む境界線の色です。
• パディング：ページ上のフォーム周囲に設ける間隔の料です。

表

ページに追加されているテーブルの既定の色、フォント、間隔、境界線を設定します。ページ上のリッチ テキスト モジュールにテーブルを挿入する方法について詳しくご確認ください。

• テーブルヘッダー：テーブルヘッダーのフォントに適用される色と、テーブルの最初の行の全幅に適用されるデフォルトの背景色です。テーブルヘッダーの下側に沿って、アクセントカラーとして境界線を設定することもできます。
• 文字色：テーブル内のフォントに使用するデフォルトの色です。
• 背景色：テーブルのセルの背景に使用するデフォルトの背景色です。
• 境界線：テーブルのデフォルトの境界線の色、幅、スタイルです。
• パディング：ページ上のテーブルの上下に設ける間隔の料です。 

ウェブサイトヘッダー

これらの設定は、ナビゲーションメニューを含むページヘッダーに表示される色とフォントを制御します。アカウント設定でナビゲーションメニューを設定する方法をご確認ください。テーマテンプレートで会社のロゴを設定するには、［ブランディング］セクション内のアカウントデフォルトにロゴ画像を追加します。

• メニュー：訪問者がメニュー項目を表示したり、カーソルを置いたり、クリックしたりしたときのナビゲーションメニューのフォントの色とスタイルを選択します。これらのスタイルは、テーマの設定のこの部分でのみ管理できます。
• 背景色：ウェブサイトヘッダーの背景に使用するデフォルトの色を選択します。
• 下境界線：必要に応じて、ウェブサイトヘッダーの下に境界線として水平線を追加できます。スタイルを選択して下境界線を有効にしてから、境界線の色と幅を選択します。

フッター

これらの設定は、ナビゲーションメニューを含むページフッターに表示される色とフォントを制御します。アカウント設定でナビゲーションメニューを設定する方法をご確認ください。

• メニュー：テーマのフッターにあるナビゲーションメニューのフォントの色とスタイルを選択します。訪問者が表示したとき、カーソルを重ねたとき、メニュー項目をクリックしたときに適用する色をカスタマイズできます。これらのスタイルは、テーマの設定のこの部分でのみ管理できます。
• 背景色：ウェブサイトフッターの背景に使用するデフォルトの色を選択します。
• 下境界線：必要に応じて、ウェブサイトフッターの下に境界線として水平線を追加できます。スタイルを選択して下境界線を有効にしてから、境界線の色と幅を選択します。

ブログ

これらの設定は、リストページテンプレートとブログ記事テンプレートのスタイルを制御します。

• バナー画像：ブログテンプレートのヘッダーの背景で使用する画像をアップロードします。ブログのホームページに使用する画像と、すべてのブログ記事に適用する画像をそれぞれ 1 つ選択できます。 
• タグ：ブログ記事の上部に表示されるブログタグに使用するデフォルトの色、フォント、スタイルを設定します。