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

レイアウトの選択、テーマのスタイルの変更、テーマエディターでのヘッダーまたはフッターコンテンツの編集を通じて、ナレッジベースの外観をカスタマイズできます。ナレッジベースのテーマがテンプレートでどのように表示されるかを、さまざまな言語や画面サイズでプレビューすることもできます。

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

• これらのツールは、移行されたナレッジベースでのみ使用できます。ナレッジベースの移行について詳細をご確認ください。
• 移行されていないナレッジベースの場合は、旧ナレッジベースの作成とカスタマイズの詳細をご確認ください。
• デザインマネージャーでナレッジベースをカスタマイズすることや、カスタムテーマを使用することはできません。

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

ナレッジベースのテーマエディターでは、配色、タイポグラフィー、レイアウトのほか、ヘッダーやフッターのスタイルを設定できます。

色

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

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. [色 ]セクションをクリックして展開し、[ プライマリー]、[ セカンダリー]、[ アクセント]、[ 本文 ]の各 フィールドの色を選択します 。デフォルトでは、yの ブランドカラー が表示されます。
4. 完了したら、右上の [テーマを公開]をクリックします。

タイポグラフィー

ナレッジベースの見出し、本文、リンクに適用するプライマリーフォントとセカンダリーフォントを選択します。 

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. 左のサイドバーで[ タイポグラフィー]をクリックします。
4. [プライマリー ー]セクションと [セカンダリー] セクションで、 フォント ドロップダウンメニューをクリックして フォントを選択します。フォントの色を変更するには、カラーパレットをクリックして、フォントの色を選択します。その他のフォントスタイル設定オプション(フォントの太さ、サイズ、大文字と小文字の変換など)は、選択したフォントによって異なります。 
5. 見出し、本文、またはリンクのフォントを編集するには、[ 見出し(H1-H6)]、[ 本文]、または[ リンク ]セクションをクリックして展開し、[ フォント ]ドロップダウンメニューをクリックして、 フォントを選択します。フォントの色を変更するには、カラーパレットをクリックして、フォントの色を選択します。
6. 完了したら、右上の [テーマを公開]をクリックします。

レイアウト

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. [レイアウト ]セクションをクリックして展開し、 オプションを選択します ( [タイル ]や [ミニマル]など)。レイアウトオプションによって、サポートされるスタイル設定オプションが異なります。
4. 完了したら、右上の［テーマを公開］をクリックします。

ヘッダー

ナレッジベーステーマのヘッダースタイル(ヘッダー幅、トップバー、言語切り替え機能、メニュー、ボタン、検索バーなど)をカスタマイズできます。これらの要素内で色、フォント、ホバースタイルを編集することもできます。

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. 左側のサイドバーで [ヘッダー ]をクリックし、以下から選択します。
   
   • [ヘッダー幅]: [全幅 ]または [コンテンツ幅]を選択します。
   • トップバー: [背景色]、[ ベースフォント]、 および[ホバー時フォント]を選択します。
   • 言語切り替え: カラーパレット をクリックして 色を選択します。
   • メニュー: [ベースフォント]、[ ホバー時フォント]、[ 背景色]、および [ドロップダウン スタイル]を選択します。
   • ボタン: [フォント]、[ テキスト変換]、[ 背景色]、[ 境界線のスタイル]、[ 角の半径]、 および[ホバー時のフォント スタイル]を選択します。
   • 検索バー: 「背景色」、「 ラベルテキスト」、 および「入力テキスト」スタイルを選択します。
4. 完了したら、右上の [テーマを公開]をクリックします。

フッター

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. 左側のサイドバーで [フッター ]をクリックし、以下から選択します。
   1. フッターの幅:[全幅]または[コンテンツの幅]を選択します。 
   2. 背景:カラーパレットをクリックして色を選択します。
   3. メニュー: [ベースフォント ]と [ホバー時]フォントを選択します。フォントの色を変更するには、カラーパレットをクリックして、フォントの色を選択します。
   4. テキスト: フォントを選択します。 
   5. ソーシャルアイコン: アイコンサイズ、 アイコンの形状、 アイコンの色、 背景色、 配置を選択します。
4. 完了したら、右上の [テーマを公開]をクリックします。

ナレッジベースのヘッダーコンテンツを編集

ナレッジベースのヘッダーコンテンツをカスタマイズして、ブランドやナビゲーションリンクを目立たせることができます。公開された更新は、すべてのナレッジベースページに自動的に表示されます。

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

ナレッジベースのフッターコンテンツを編集する

ナレッジベースのフッターコンテンツをカスタマイズして、ブランドやナビゲーションリンクを目立たせましょう。公開された更新は、すべてのナレッジベースページに自動的に表示されます。

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上にある［設定］ドロップダウンメニューをクリックし、［フッター］を選択します。
3. グローバル コンテンツ エディターで、 siteTree Cコンテンツアイコン をクリックし、以下から選択します。
   • フッターメニュー: [メニュー ]ドロップダウンメニューをクリックし、 メニューを選択します。全てのナレッジベースページにまたがってフッターメニューを表示するには、[ メニューを表示 ]チェックボックスをオンにします。
   • [ ロゴ]:[デフォルトのロゴを変更]スイッチを切り替えるか、[ このドメインのデフォルトのロゴを編集]をクリックします。 
   • フッターアドレス: 展開したビューで[編集 ]をクリックし、 フッターアドレスを入力します。
   • ソーシャルフォロー: ソーシャルリンク の上にマウスポインターを置き、 editIcon 編集アイコンをクリックします。[リンク先 ]ドロップダウンメニューをクリックし、 オプションを選択します。
   • フッターの著作権: 展開したビューで編集 をクリックし、 フッターの著作権情報を入力します。
4. 完了したら、右上の［［X］件のアセットに公開］をクリックします。

ナレッジベーステーマをプレビュー

ナレッジベースを作成したら、テーマエディターでテーマがどのように表示されるかを確認できます。さまざまなテンプレート、言語、画面サイズでのテーマの表示を確認できます。 

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3.  サンプルコンテンツを含むテンプレートを表示するには、左上の［表示先］ドロップダウンメニューをクリックして、テンプレートを選択します。テーマの変更は全てのナレッジ ベース テンプレートに適用されます。

4. テンプレートを異なる言語で表示するには、左上にある2番目のドロップダウンメニューをクリックして、言語を選択します。

5. 異なるデバイスでのテンプレートの表示を確認するには、エディター上部のデバイスアイコンをクリックするか、画面幅をピクセル単位で入力します。