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

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

始める前に

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

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

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

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

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

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

色のカスタマイズ

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

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

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

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

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

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

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

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

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

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

1. テーマエディタで、左上の「ビュー対象」ドロップダウンメニューをクリックし、「ナレッジベースの記事」を選択します。
2. 左側のサイドバーで、「記事」セクションをクリックし、「左サイドバー」や「右サイドバー」などのレイアウトオプションを選択します。

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

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

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

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

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

• フッターの幅：「全幅」または「コンテンツ幅」を選択してください。
• 背景：カラーピッカーをクリックして、色を選択してください。
• メニュー：基本フォントとホバー時のフォントを選択してください。フォントの色を変更するには、カラーピッカーをクリックしてフォントの色を選択してください。
• テキスト：フォントを選択してください。
• ソーシャルアイコン：アイコンのサイズ、形状、色、背景色、および配置を選択します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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