メインコンテンツにスキップ
HubSpot ナレッジベース
お客さまへの大切なお知らせ：膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。

ナレッジ ベース テーマをカスタマイズ

更新日時 2026年8月25日

以下の 製品でご利用いただけます（別途記載されている場合を除きます）。

ナレッジベースの外観やコンテンツをブランドイメージに合わせてカスタマイズし、訪問者に一貫性のあるナビゲーション体験を提供しましょう。テーマエディタを使用して、色、タイポグラフィ、ホームページや記事のレイアウト、ヘッダーやフッターのスタイルを更新してください。グローバルコンテンツエディタを使用して、ロゴ、メニュー、サポートオプション、ソーシャルリンクなど、ヘッダーおよびフッターのコンテンツを更新してください。 

始める前に

ナレッジベースのテーマをカスタマイズする前に、これらの要件と注意事項を確認してください。

シートが必要 ナレッジベースのテーマをカスタマイズするには Service Hub シートが割り当てられ ている必要があります。

アクセス権限が必要 ナレッジベーステーマをカスタマイズするには、「 ナレッジベース設定 」権限と「グローバルコンテンツとテーマ設定 」権限が必要です。

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

  • これらのツールは、移行されたナレッジベースでのみ使用できます。ナレッジベースの移行について詳細をご確認ください。
  • 移行されていないナレッジベースの場合は、旧ナレッジベースの作成とカスタマイズの詳細をご確認ください。
  • ナレッジベースのカスタマイズは、デザインマネージャーでもカスタムテーマでもサポートされていません。さらに詳細なカスタマイズを行うには、からコードスニペットをナレッジベースの設定に追加できます。これには、サイトのヘッダーやフッターへの追加も含まれます。

ナレッジベースのテーマスタイルをカスタマイズする

ナレッジベースのテーマエディタを使用して、ナレッジベース全体で統一感のあるビジュアルスタイルとレイアウトを設定してください。色やタイポグラフィを更新し、トップページや記事ページのレイアウトを選択し、ヘッダーとフッターのスタイルを設定します。

  1. HubSpotアカウントで、［その他］をクリックし、［サービス］＞［ナレッジベース］に移動します。アカウントに［その他］が表示されない場合は、［サービス］＞ ［ナレッジベース］に直接移動します。
  2. 右上の「」の「」ドロップダウンメニューをクリックし、「」テーマ（）を選択します。

色のカスタマイズ

ナレッジベーステーマの色設定では、テーマのテンプレートに含まれる全ての要素にプライマリーカラー、セカンダリーカラー、アクセントカラー、本文カラーが適用されます。これらのスタイルはナレッジベースの全ての要素に適用されます。 

  1. テーマエディタで、左側のサイドバーにある「のカラー」セクションをクリックします。
  2. 各カラータイプ（例：プライマリ）について、「」カラーピッカーをクリックし、「」カラーを選択して、「」プライマリ、「」セカンダリ、「」アクセント、および「」ボディの各フィールドに設定してください。デフォルトでは、のブランドカラーが表示されます。

ナレッジベースのテーマエディターに[色]セクションが表示され、プライマリー、セカンダリー、アクセント、本文の背景色ピッカーが表示されます。

タイポグラフィをカスタマイズする

ナレッジベースの見出し、本文、およびURLリンクに適用するメインフォントとサブフォントを選択してください。 

  1. テーマエディタで、左側のサイドバーにある「Typography」をクリックします。
  2. 「」の「Primary」および「」フィールドで、「」フォントのドロップダウンメニューをクリックし、「」フォントを選択します。フォントの色を変更するには、カラーパレットをクリックして、フォントの色を選択します。選択したフォントによっては、その他のフォントスタイルのオプション（例：フォントの太さ）が利用可能な場合があります。 
  3. 見出し、本文、リンクのフォントを編集するには、「」の「見出し（H1～H6）」、「」の「本文」、または「」の「リンク」の各セクションをクリックしてください。次に、「」フォントのドロップダウンメニューをクリックし、「」フォントを選択します。フォントの色を変更するには、カラーパレットをクリックして、フォントの色を選択します。

ページレイアウトのカスタマイズ

ナレッジベースのトップページや記事ページのレイアウトを選択してください。利用可能なレイアウトオプションやスタイル設定は、ページの種類によって異なります。

ホームページのレイアウトをカスタマイズする

  1. テーマエディタで、左上の「」ドロップダウンメニューから「」ビューをクリックし、「」のナレッジベースのホームページを選択します。
  2. 左側のサイドバーで、「のホームページ（）」セクションをクリックし、「」のレイアウトオプション（）から、「Tiles（）」や「Minimal（）」などを選択します。

ナレッジベースのテーマエディタの「ホームページ」セクションには、レイアウトのオプションが表示されます。

記事ページのレイアウトをカスタマイズする

  1. テーマエディタで、左上の「」ドロップダウンメニューから「」ビューをクリックし、「」を選択してください。ナレッジベースの記事：。
  2. 左側のサイドバーで、「」の記事のセクションをクリックし、「」のレイアウトオプションから、例えば「」の左サイドバーや「」の右サイドバーなどを選択してください。

ナレッジベースのテーマエディタの「記事」セクションには、レイアウトのオプションが表示されます。

ヘッダーとフッターのスタイルをカスタマイズする

ナレッジベースのテーマのヘッダーとフッターのスタイル（幅、色、フォント、メニュー、その他の要素など）をカスタマイズします。利用可能なオプションはセクションによって異なります。

ヘッダーのスタイルをカスタマイズする

テーマエディタで、左側のサイドバーにある「ヘッダー」をクリックし、以下のオプションを設定してください：
  • ヘッダーの幅：選択全幅またはコンテンツの幅。
  • 上部バー：で、背景色、基本フォント、ホバー時のフォントを選択します。
  • 言語切り替え：「」のカラーピッカー（）をクリックし、色を選択してください。
  • メニュー：基本フォント、ホバー時のフォント、背景色、余白、ドロップダウンのスタイルを選択してください。
  • ボタン：フォント、テキストの変形、背景色、枠線のスタイル、角の丸み、ホバー時のフォントを選択します。
  • 検索バー：色や画像などの背景の種類を選択し、間隔、ラベルのテキスト、入力テキストのスタイルを設定します。

ナレッジベースのテーマエディタの「ヘッダー」セクションには、ヘッダーの幅、トップバー、言語切り替え、メニュー、ボタン、検索バーに関するオプションが表示されます。

フッターのスタイルをカスタマイズする

テーマエディタで、左側のサイドバーにある「フッター」をクリックし、以下のオプションを設定します：
  • フッターの幅：選択：全幅：またはコンテンツの幅：。
  • 背景：のカラーピッカーをクリックし、色を選択してください。
  • メニュー：で、基本フォントとホバーフォントを選択します。フォントの色を変更するには、のカラーピッカー（）をクリックし、フォントの色を選択してください。
  • テキスト：フォントを選択してください。
  • ソーシャルアイコン：アイコンのサイズ、形状、色、背景色、配置を選択します。

ナレッジベースのテーマエディタの「フッター」セクションには、フッターの幅、背景、メニュー、テキスト、ソーシャルアイコンに関するオプションが表示されます。

テーマの変更内容をプレビューして公開する

変更を公開する前に、さまざまなテンプレート、言語、デバイスでテーマをプレビューしてください。

  1. HubSpotアカウントで、［その他］をクリックし、［サービス］＞［ナレッジベース］に移動します。アカウントに［その他］が表示されない場合は、［サービス］＞ ［ナレッジベース］に直接移動します。
  2. 右上の「」の「」ドロップダウンメニューをクリックし、「」テーマを選択します。
  3. テーマエディタで、左上の「」をクリックし、「」のプレビューを表示します。
  4. サンプルコンテンツを含むテンプレートを表示するには、左上の「」のドロップダウンメニューから「Viewon」をクリックし、「」テンプレート（）を選択してください。 

ナレッジベースのテーマプレビューで、[表示場所]ドロップダウンメニューの周囲にボックスが配置されています。

  1. テンプレートを別の言語で表示するには、左上の「」の言語ドロップダウンメニューをクリックし、「」の言語を選択してください。

ナレッジベースのテーマプレビューで、言語ドロップダウンメニューを囲むボックスが配置されています。

  1. テンプレートがさまざまなデバイスでどのように表示されるかを確認するには、右上の「」のデバイスアイコン（）をクリックしてください。

ナレッジベースのテーマプレビューでは、デバイスオプションの周囲にボックスが配置されています。

  1. 完了したら、左上の「Back」をクリックしてください。

  2. 変更を反映するには、右上の「」をクリックし、「」テーマを公開してください。

グローバルヘッダーおよびフッターのコンテンツを編集する

グローバルコンテンツエディタを使用して、ナレッジベースのヘッダーとフッターに表示されるコンテンツをカスタマイズしてください。

ヘッダーの内容を編集する

ナレッジベースの各ページに表示されるヘッダーの内容（ロゴ、ナビゲーションメニュー、サポートオプション、ボタン、言語切り替え機能など）をカスタマイズできます。

  1. HubSpotアカウントで、［その他］をクリックし、［サービス］＞［ナレッジベース］に移動します。アカウントに［その他］が表示されない場合は、［サービス］＞ ［ナレッジベース］に直接移動します。
  2. 右上の「」の「」ドロップダウンメニューをクリックし、「Header」を選択します。
  3. グローバルコンテンツエディタで、左側のサイドバーにある「siteTree」Contentsアイコンをクリックします。 
  4. 左側のサイドバーで[ ウェブサイトヘッダー ]モジュールをクリックし、以下から選択します。
    • ロゴ：を切り替える デフォルトのロゴを上書きをオンにするか、をクリックする このドメインのデフォルトのロゴを編集。会社名を表示するには、[ ロゴが設定されていない場合は会社名を表示する ]スイッチをオンに切り替えます。
    • 追加のサポートオプション:[ カスタマーポータルリンクを表示]、[ 制限付きコンテンツの場合にサインインを表示]、または [サポートフォーム ]スイッチを切り替えます。
    • メニュー: [メニュー ]と [最大レベル]を選択します。
    • ボタン:[ ボタンを追加 ]チェックボックス、[ リンク先]、および [リンクタイプ]を選択します。
    • 言語切り替え機能:[ 言語切り替え機能を追加 ]チェックボックスと 表示モードを選択します。
  5. 完了したら、右上の「Publish to [#] assets」をクリックしてください。

フッターの内容を編集する

ナレッジベースの各ページに表示されるフッターの内容（ロゴ、メニュー、住所、ソーシャルメディアへのリンク、著作権表示など）をカスタマイズできます。

  1. HubSpotアカウントで、［その他］をクリックし、［サービス］＞［ナレッジベース］に移動します。アカウントに［その他］が表示されない場合は、［サービス］＞ ［ナレッジベース］に直接移動します。
  2. 右上の「」の「」ドロップダウンメニューをクリックし、「」の「Footer」を選択します。
  3. グローバルコンテンツエディタで、左側のサイドバーにある「siteTree」Contentsアイコンをクリックします。
  4. 左側のサイドバーで、「」モジュール（）をクリックして、コンテンツを編集します：
    • フッターメニュー: [メニュー ]ドロップダウンメニューをクリックし、 メニューを選択します。全てのナレッジベースページにまたがってフッターメニューを表示するには、[ メニューを表示 ]チェックボックスをオンにします。
    • ロゴ：を切り替える デフォルトのロゴを上書きをオンにするか、をクリック このドメインのデフォルトのロゴを編集。 
    • フッターアドレス: 展開したビューで[編集 ]をクリックし、 フッターアドレスを入力します。
    • のソーシャルメディアをフォロー： のソーシャルリンク にカーソルを合わせ、 の「編集」 アイコンをクリックしてください。editIcon [リンク先 ]ドロップダウンメニューをクリックし、 オプションを選択します。
    • フッターの著作権: 展開したビューで編集 をクリックし、 フッターの著作権情報を入力します。
  5. 完了したら、右上の「Publish to [#] assets」をクリックしてください。
この記事はお役に立ちましたか？
こちらのフォームではドキュメントに関するご意見をご提供ください。HubSpotがご提供しているヘルプはこちらでご確認ください。
目次 メニュー

関連記事

New to HubSpot? Use these guides to get started.