テーマ設定を編集
更新日時 2023年 1月 19日
対象製品
すべての製品とプラン |
テーマは、HubSpotのウェブサイトのページやブログに適用できるスタイルとテンプレートのセットです。ウェブサイトの外観に一貫性を持たせるには、すべてのページに同じテーマを使用し、ページのスタイル設定をテーマ設定で管理します。テーマの設定をカスタマイズするには、ページエディターの左側のパネルにある [デザイン] タブをクリックします。トグル、スイッチ、カラーピッカーなどの直感的なコントロールを使用して簡単にテーマ設定を調整できます。
始める前に
テーマ設定は、テーマテンプレートを使用してページのメインカラー、フォント、ボタンスタイルを制御します。
注意:テーマ設定で使用できるスタイリングオプションは、テーマを作成したWeb開発者が含まれるテーマフィールドオプションによって異なります。
ウェブサイトのコンテンツによっては、アカウント設定の別の部分で管理します。このようなコンテンツには以下が含まれます。
- 会社ロゴ: 会社ロゴを更新するには、[ブランディング] タブの [アカウントの既定値] を使用します。
- ナビゲーションメニュー:メニューの色はテーマ設定で設定しますが、ナビゲーションメニューのコンテンツとリンクは [ナビゲーション] 設定で管理します。ページエディター内でグローバルヘッダーまたはグローバルフッターのコンテンツに追加できるナビゲーションメニューを作成する方法を確認してください。
- 公開するドメイン:接続できるサブドメイン、ブランドドメイン、トップレベルドメインの数は、サブスクリプションによって異なります。ドメインのサブスクリプション制限とドメインをHubSpotに接続する方法について詳しくは、こちらをご覧ください。
テーマ設定を編集する
テーマ設定を編集するには、まず、テーマテンプレートを使用してページを作成する必要があります。左側のテーマタブをクリックすると、コンテンツエディター内でテーマ設定にアクセスできます。次に、[テーマ設定を編集]をクリックします。
色、フォント、間隔をカスタマイズすると、ページ上のすべての要素に適用される既定のスタイルが設定されます。リンクの色、ボタンの色、既定のフォームの色といった特定の詳細を編集するには、[詳細設定] の横にある [編集] をクリックして、テンプレートに使用できる追加のテーマ設定を表示します。
色
テーマの色の設定により、プライマリー色、セカンダリー色、背景色がテーマテンプレートに含まれるすべての要素に適用されます。これらのスタイルは、ウェブサイトのすべての要素に適用されます。見出し、フォント、リンクの詳細設定をカスタマイズするには、[その他の設定]の横にある[編集]をクリックします。
フォント
ウェブサイトの見出し、フォーム、ボタン、本文テキストに適用するプライマリーフォントとセカンダリーフォントを選択します。すべてのGoogleフォントに対応しています。プライマリーフォントまたはセカンダリーフォントの色をカスタマイズするには、カラーバブルをクリックします。単純な色の値を選択することも、[詳細] タブをクリックして、カラーピッカーで特定の 16 進値を選択することもできます。
間隔
間隔のテーマ設定では、ページコンテンツの最大幅と、ページ上の異なる要素間の垂直方向の間隔を制御します。
その他の設定
テーマ設定には、ページのより具体的なスタイルに応じたその他の詳細設定が含まれていることがあります。テーマに含まれるスタイルオプションは、テーマのコード化されたテンプレートに含まれるテーマフィールドに基づきます。探している設定が見つからない場合は、テンプレートデザイナーに連絡して、テンプレートにどのようなオプションが含まれているのかを確認してください。
以下の例は、テーマに含めることができる他のオプションの種類に関する一般的なガイドです。テンプレートで含めることができるテーマフィールドの完全なリファレンスについては、デザイナードキュメントをご覧ください。
注:フォント、色、スタイルは、ページ上のリッチテキストモジュール内でをカスタマイズすることも、ページエディター内で既定のスタイルをオーバーライドしてカスタマイズすることもできます。これらのスタイルの変更は、このテーマを使用しているすべてのページに適用する場合に限って行ってください。
タイポグラフィー
タイポグラフィー設定では、テンプレートに含まれている特定の要素に適用されるフォントを制御できます。すべてのGoogleフォントに対応しています。また、テーマに含まれている特定の見出し、フォント、リンクに適用するカスタムの色を選択することもできます。
- 見出し:テーマに含まれている任意の見出しに適用するフォント、色、スタイルを精密にカスタマイズできます。
- 本文:ページの本文のみのフォント、色、またはテキストサイズをカスタマイズします。
- リンク:ウェブサイト上のリンクの既定の色をカスタマイズします。また、訪問者がリンクの上にカーソルを重ねた時点またはリンクをクリックした時点で適用するリンクの色と動作もカスタマイズできます。
ボタン
ページとブログ上のボタンにカスタムの色、フォント、スタイルを設定できます。ウェブサイト開発者がテーマをどのように作成したかによっては、ページエディター内で特定のページのボタンのサイズやタイプを交換できる場合もあります。
- サイズ:ページ上のボタンのサイズを小、通常、大で指定します。
- プライマリー:プライマリーボタンは、訪問者がページ上で行う最も重要なアクションに使用されます。このボタンには目立った色を使用して、訪問者の注意を引くようにします。
- セカンダリー:ページ上にすでに 1 つのプライマリーボタンがある場合、比較的重要性が低いアクションにはセカンダリーボタンを使用します。セカンダリーボタンは通常、ページに対して優先度の低いアクションに適用されます。
- シンプル:ページ内のシンプルなボタンモジュールに適用される、既定のフォントとスタイルです。
フォーム
フォームの既定の色、フォント、テキストスタイル、ボタンスタイルをカスタマイズします。
- タイトル:フォームの上に表示されるテキストフィールドに適用されるスタイルです。ここには通常、挨拶やフォームを入力する際の手順が含まれます。フォームに設定されるこれらのスタイルは、テーマの設定のこの部分でのみ管理できます。
- ラベル:フォームフィールドの上に表示されるラベルに適用されるスタイルです。
- フィールド:フォームフィールド自体の名前に適用されるスタイルです。
- ヘルプテキスト:各フォームフィールド内に表示される、訪問者に送信する情報のタイプを伝えるためのサンプルコンテンツです。
- 送信:フォームに適用するボタンのスタイルとサイズを選択します。
- 背景色:フォームに適用される背景色です。
- 境界線:フォームフィールドを囲む境界線の色です。
- パディング:ページ上のフォーム周囲に設ける間隔の料です。
表
ページに追加されているテーブルの既定の色、フォント、間隔、境界線を設定します。
- テーブルヘッダー:テーブルヘッダーのフォントに適用される色と、テーブルの最初の行の全幅に適用される既定の背景色です。テーブルヘッダーの下側に沿って、アクセントカラーとして境界線を設定することもできます。
- 文字色:テーブル内のフォントに使用する既定の色です。
- 背景色:テーブルのセルの背景に使用する既定の背景色です。
- 境界線:テーブルの既定の境界線の色、幅、スタイルです。
- パディング:ページ上のテーブルの上下に設ける間隔の料です。
ページ上のリッチテキストモジュールにテーブルを挿入する方法の詳細を確認してください。
ウェブサイトヘッダー
これらの設定は、ナビゲーションメニューを含むページヘッダーに表示される色とフォントを制御します。アカウント設定でナビゲーションメニューをセットアップする方法を確認してください。テーマテンプレートに会社ロゴを設定するには、[ブランディング] セクションでアカウントの規定値にロゴ画像を追加します。
- メニュー:訪問者が表示したとき、カーソルを重ねたとき、メニュー項目をクリックしたときにナビゲーションメニューに適用するフォントの色とスタイルを選択します。これらのスタイルは、テーマの設定のこの部分でのみ管理できます。
- 背景色:ウェブサイトヘッダーの背景に使用する既定の色を選択します。
- 下境界線:必要に応じて、ウェブサイトヘッダーの下に境界線として水平線を追加できます。スタイルを選択して下境界線を有効にしてから、境界線の色と幅を選択します。
フッター
これらの設定は、ナビゲーションメニューを含むページフッターに表示される色とフォントを制御します。アカウント設定でナビゲーションメニューをセットアップする方法を確認してください。
- メニュー:テーマのフッター内のナビゲーションメニューに適用するフォントの色とスタイルを選択します。訪問者が表示したとき、カーソルを重ねたとき、メニュー項目をクリックしたときに適用する色をカスタマイズできます。これらのスタイルは、テーマの設定のこの部分でのみ管理できます。
- 背景色:ウェブサイトフッターの背景に使用する既定の色を選択します。
- 下境界線:必要に応じて、ウェブサイトフッターの下に境界線として水平線を追加できます。スタイルを選択して下境界線を有効にしてから、境界線の色と幅を選択します。
ブログ
これらの設定は、リストページテンプレートとブログ記事テンプレートのスタイルを制御します。
バナー画像:ブログテンプレートのヘッダーの背景で使用する画像をアップロードします。ブログのホームページに使用する画像と、すべてのブログ記事に適用する画像をそれぞれ 1 つ選択できます。
タグ:ブログ記事の上部に表示されるブログタグに使用する既定の色、フォント、スタイルを設定します。
関連記事
-
ページを作成し、カスタマイズする
HubSpotでは、ウェブサイトとランディングページを作成できます。ページのコンテンツと設定をカスタマイズしたり、検索エンジンのページを最適化したりできます。 始める前に 作成するページタイプの書き込み権限...
ナレッジベース -
非公開コンテンツにアクセスするためのメンバー登録を必須にする
を持つユーザーパブリッシュ権限は、HubSpotがホスティングする特定のページ、ブログ、ナレッジベース記事にアクセスできるコンタクトを制御できます。閲覧用のパスワード登録が必要な特定のコンテンツに、特定の...
ナレッジベース -
HubSpotコンテンツに動画を追加する
HubSpot動画を使用すると、ファイルツールに動画をアップロードし、ページ、マーケティングEメール、ブログ記事、ナレッジベース記事に動画を追加できます。 HubSpot動画は、ドラッグ&ドロップ マーケティングEメール
ナレッジベース