テーマ設定を編集する

テーマは、HubSpotのウェブサイトページやブログに適用できるスタイルとテンプレートのセットです。ウェブサイトの外観に一貫性を持たせるには、すべてのページに同じテーマを使用し、ページのスタイル設定をテーマ設定で管理します。

始める前に

テーマ設定は、テーマテンプレートを使用するページのメインカラー、フォント、ボタンスタイルをコントロールします。

ご注意：テーマ設定で利用可能なスタイリングオプションは、あなたのテーマを作成したウェブ開発者によって含まれるテーマフィールドオプションに依存します。

ウェブサイトのコンテンツによっては、アカウント設定の別の部分で管理します。このようなコンテンツには以下が含まれます。

• 会社のロゴ:会社のロゴを更新するアカウントのデフォルトブランディングタブにあります。
• ナビゲーションメニュー：メニューの色はテーマ設定で設定しますが、ナビゲーションメニューのコンテンツとリンクは [ナビゲーション] 設定で管理します。ナビゲーションメニューの作成方法ページエディター内のグローバルヘッダーまたはグローバルフッターコンテンツに追加できます。
• 公開用ドメイン：接続できるサブドメイン、ブランドドメイン、トップレベルドメインの数は、サブスクリプションによって異なります。ドメインのサブスクリプション制限およびHubSpotへのドメインの接続について詳しくはこちらをご覧ください。 

テーマ設定を編集する

テーマの設定は、そのテーマを使用しているページや投稿のコンテンツエディターから編集できます： 

• コンテンツを開きます。

  • ウェブサイトページ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ウェブサイトページ］の順に進みます。
  • ランディングページ：HubSpotアカウントにて、［マーケティング］＞［ランディングページ］の順に進みます。
  • ブログ：HubSpotアカウントにて、［マーケティング］＞［ウェブサイト］＞［ブログ］の順に進みます。
• コンテンツの上にカーソルを重ねて［編集］をクリックします。 
• コンテンツエディターで、Editメニューをクリックし、Themeを選択する。 

色

テーマの色の設定により、プライマリー色、セカンダリー色、背景色がテーマテンプレートに含まれるすべての要素に適用されます。これらのスタイルは、ウェブサイトのすべての要素に適用されます。見出し、フォント、リンクなど、より具体的な設定をカスタマイズするには、その他の設定の隣にある編集をクリックします。

フォント

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

間隔 

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

その他の設定

テーマ設定には、ページのより具体的なスタイルに応じたその他の詳細設定が含まれていることがあります。あなたのテーマのスタイルオプションは、あなたのテーマのコード化されたテンプレートに含まれているテーマフィールドに基づいています。探している設定が見つからない場合は、テンプレートデザイナーに連絡して、テンプレートにどのようなオプションが含まれているのかを確認してください。

以下の例は、テーマに含めることができる他のオプションの種類に関する一般的なガイドです。テンプレートに含めることができるテーマフィールドの完全なリファレンスについては、デザイナーのドキュメントを参照してください。

注意：リッチテキストモジュールの中で、フォント、色、スタイルをカスタマイズすることができます。これらのスタイルの変更は、このテーマを使用しているすべてのページに適用する場合に限って行ってください。

タイポグラフィー

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

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

ボタン

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

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

フォーム

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

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

テーブル

ページに追加されているテーブルの既定の色、フォント、間隔、境界線を設定します。

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

、ページ上のリッチテキストモジュールにテーブルを挿入する方法について詳しく説明します。

ウェブサイトヘッダー

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

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

フッター

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

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

ブログ

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

バナー画像：ブログテンプレートのヘッダーの背景で使用する画像をアップロードします。ブログのホームページに使用する画像と、すべてのブログ記事に適用する画像をそれぞれ 1 つ選択できます。 

タグ：ブログ記事の上部に表示されるブログタグに使用する既定の色、フォント、スタイルを設定します。