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

テーマエディターでレイアウトを選択してテーマを設定することで、ナレッジベースの外観をカスタマイズできます。ナレッジ ベース テーマがテンプレートでどのように表示されるのかを、さまざまな言語やさまざまな画面サイズで確認できます。

始める前に

この機能を使い始める前に、あらかじめ必要となる手順と、この機能の使用に伴う制限事項と潜在的な結果について十分に理解しておいてください。

要件を理解する

• スーパー管理者権限
• ナレッジベース設定権限、グローバルコンテンツとテーマの設定権限、割り当てられているService Hubシート。HubSpotのシートベースの価格の詳細をご確認ください。

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

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

ナレッジ ベース テーマを表示する

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

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

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

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

ナレッジ ベース テーマの色、タイポグラフィー、レイアウトを編集する 

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. テーマの色を変更するには、［色］セクションをクリックして展開します。続けて、16進数の値を入力するか、［プライマリー（第1）］、［セカンダリー］、［アクセント］、［本文の背景］フィールドのカラーパレットから色を選択します。各オプションでブランドカラーが表示されます。
4. テーマのタイポグラフィーを変更するには、［タイポグラフィー］をクリックします。
   • ［プライマリー（第1）］および［セカンダリー］セクションで、［フォント］ドロップダウンメニューをクリックし、フォントを選択します。フォントの色を変更するには、カラーパレットをクリックして、フォントの色を選択します。その他のフォントスタイル設定オプション（フォントの太さ、フォントサイズ、大文字と小文字の変換など）は、選択したフォントによって異なります。
   • 見出し、本文、またはリンクのタイポグラフィーを編集するには、［見出し］（H1-H6）、［本文］、または［リンク］セクションをクリックして展開します。
     • ［フォント］ドロップダウンメニューをクリックし、フォントを選択します。その他のフォントスタイル設定オプション（フォントの太さ、フォントサイズ、大文字と小文字の変換など）は、選択したフォントによって異なります。
     • フォントの色を変更するには、カラーパレットをクリックして、フォントの色を選択します。
5. テーマのレイアウトを変更するには、［レイアウト］セクションをクリックして展開し、オプションを選択します（［タイル］や［ミニマル］など）。レイアウトオプションによって、サポートされるスタイル設定オプションが異なります。
6. 完了したら、右上の［テーマを公開］をクリックします。

ナレッジ ベース テーマのヘッダースタイルを編集する

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

ヘッダーの幅

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. 左側のサイドバーで、［ヘッダー］をクリックします。
4. ［ヘッダー］セクションで、［全幅］または［コンテンツの幅］を選択します。

ヘッダーの上部バー

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. 左側のサイドバーで、［ヘッダー］をクリックします。
4. ［ヘッダー］セクションで、［上部バー］セクションをクリックして展開します。
5. 背景色を編集するには、16進数コードの値を入力するか、［背景色］フィールドのカラーパレットで背景色を選択します。
6. ［フォント］ドロップダウンメニューをクリックし、フォントを選択します。その他のフォントスタイル設定オプション（フォントの太さ、フォントサイズ、大文字と小文字の変換など）は、選択したフォントによって異なります。
7. フォントの色を変更するには、カラーパレットをクリックして、フォントの色を選択します。
8. 完了したら、右上の［テーマを公開］をクリックします。

ヘッダー言語切り替え機能

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. 左側のサイドバーで、［ヘッダー］をクリックします。
4. ［ヘッダー］セクションで、［言語切り替え機能］をクリックします。
5. ［言語切り替え機能］セクションで、［ドロップダウン］をクリックします。
6. ［背景］セクションをクリックして展開します。
7. 16進数コードの値を入力するか、［色］フィールドと［ホバー］フィールドのカラーパレットで色を選択します。 
8. 透明度を編集するには、2番目のフィールドにパーセントの値を入力します。例えば、透明度を100%にすると不透明になり、透明度を0%にすると表示されなくなります。 
9. 完了したら、右上の［テーマを公開］をクリックします。

ヘッダーメニュー

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. 左側のサイドバーで、［ヘッダー］をクリックします。
4. ［ヘッダー］セクションで、［メニュー］をクリックします。
5. ドロップダウンのスタイルを編集するには、［ドロップダウン］をクリックします。
   • ［背景］セクションをクリックして展開し、16進数コードの値を入力するか、［色］フィールドと［ホバー］フィールドのカラーパレットで色を選択します。透明度を編集するには、2番目のフィールドにパーセントの値を入力します。
     
   • ［テキスト］セクションをクリックして展開します。続けて、［フォント］ドロップダウンメニューをクリックし、フォントを選択します。その他のフォントスタイル設定オプション（フォントの太さ、フォントサイズ、大文字と小文字の変換など）は、選択したフォントによって異なります。
   • フォントの色を変更するには、カラーパレットをクリックして、フォントの色を選択します。
6. フォントテキストのスタイルを編集するには、［テキスト］セクションをクリックして展開します。
   • ［フォント］ドロップダウンメニューをクリックし、フォントを選択します。その他のフォントスタイル設定オプション（フォントの太さ、フォントサイズ、大文字と小文字の変換など）は、選択したフォントによって異なります。 
   • フォントの色を変更するには、カラーパレットをクリックして、フォントの色を選択します。
7. 背景色を編集するには、［背景］セクションをクリックして展開し、16進数コードの値を入力するか、カラーパレットで色を選択します。
8. 完了したら、右上の［テーマを公開］をクリックします。

ヘッダーボタン

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. 左側のサイドバーで、［ヘッダー］をクリックします。
4. ［ヘッダー］セクションで、［ボタン］をクリックします。
5. フォントを編集するには、［テキスト］セクションをクリックして展開します。
   • ［フォント］ドロップダウンメニューをクリックし、フォントを選択します。その他のフォントスタイル設定オプション（フォントの太さ、フォントサイズ、大文字と小文字の変換など）は、選択したフォントによって異なります。
   • フォントの色を変更するには、カラーパレットをクリックして、フォントの色を選択します。
6.  背景を編集するには、［背景］セクションをクリックして展開し、16進数コードの値を入力するか、カラーパレットで色を選択します。透明度を編集するには、パーセントの値を入力します。
7. 境界線のスタイルを編集するには、［境界線］セクションをクリックして展開し、［スタイル］ドロップダウンメニューをクリックして、境界線のスタイル（［破線］など）を選択します。
8. 角のスタイルを編集するには、［角］セクションをクリックして展開します。続けて、［半径］フィールドにピクセル値（「30px」など）を入力します。
9. ホバースタイルを編集するには、［Hover（ホバー）］をクリックします。
   • ［テキスト］セクションをクリックして展開します。
     • フォントの色を変更するには、カラーパレットをクリックして、フォントの色を選択します。
     • フォントテキストのスタイルを適用するには、italicizeIconイタリックアイコンまたはunderlineIcon下線アイコンを選択します。
   • ［背景］セクションをクリックして展開し、16進数コードの値を入力するか、カラーパレットで色を選択します。透明度を編集するには、パーセントの値を入力します。
   • ［境界線］セクションをクリックして展開し、［スタイル］ドロップダウンメニューをクリックして、境界線のスタイル（「点線」など）を選択します。
10. 完了したら、右上の［テーマを公開］をクリックします。

ヘッダーの検索バー

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. 左側のサイドバーで、［ヘッダー］をクリックします。
4. ［ヘッダー］セクションで、［検索バー］をクリックします。
5. 背景を編集するには、［背景］セクションをクリックして展開し、［背景のタイプ］ドロップダウンメニューをクリックして、オプションを選択します（［色］、［画像］、［グラデーション］など）。選択した背景のタイプに応じて、追加のスタイル設定オプションが表示されます。
6. ラベルのテキストスタイルを編集するには、［ラベルテキスト］セクションをクリックして展開します。
   • ［フォント］ドロップダウンメニューをクリックし、フォントを選択します。その他のフォントスタイル設定オプション（フォントの太さ、フォントサイズ、大文字と小文字の変換など）は、選択したフォントによって異なります。
   • フォントの色を変更するには、カラーパレットをクリックして、フォントの色を選択します。
7. 入力フォントのスタイルを編集するには、［入力］セクションをクリックして展開し、16進数コードの値を入力するか、カラーパレットをクリックして色を選択します。透明度を編集するには、パーセントの値を入力します。
8. 完了したら、右上の［テーマを公開］をクリックします。

ナレッジ ベース テーマのフッタースタイルを編集する

ナレッジ ベース テーマのフッタースタイル（フッターの幅、背景、メニュー、テキスト、ソーシャルアイコンなど）を編集できます。これらの要素内で色、フォント、ホバースタイルを編集することもできます。

フッターの幅と背景

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. 左側のサイドバーで、［フッター］をクリックします。
4. フッターの幅を変更するには、［フッターの幅］フィールドで［全幅］または［コンテンツの幅］を選択します。
5. フッターの背景色を変更するには、16進数コードの値を入力するか、カラーパレットをクリックして色を選択します。

フッターメニュー

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

フッターテキスト

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

フッターのソーシャルアイコン

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［テーマ］を選択します。
3. 左側のサイドバーで、［フッター］をクリックします。
4. ［フッター］セクションで、［ソーシャルアイコン］セクションをクリックして展開します。
5. ソーシャルアイコンのサイズを変更するには、［アイコンのサイズ］ドロップダウンメニューをクリックし、オプションを選択します（［小］、［通常］、［大］など）。
6. ソーシャルアイコンの形状を変更するには、［アイコンの形状］ドロップダウンメニューをクリックし、オプションを選択します（［丸］または［四角］など）。
7. ソーシャルアイコンの色を変更するには、［アイコンの色］フィールドで、16進数コードの値を入力するか、カラーパレットをクリックして色を選択します。
8. ソーシャルアイコンの背景色を変更するには、［背景］フィールドで、16進数コードの値を入力するか、カラーパレットをクリックして色を選択します。透明度を編集するには、パーセントの値を入力します。 
9. ソーシャルアイコンの位置合わせを変更するには、［位置合わせ］フィールドで、blockAlignmentLeftIcon 左揃え、blockAlignmentCenterIcon中央揃え、またはblockAlignmentRightIcon 右揃えアイコンをクリックします。
10. 完了したら、右上の［テーマを公開］をクリックします。 

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

ナレッジベースのヘッダーとフッターのコンテンツを編集できます。公開された変更は全てのナレッジ ベース ページで表示されます。

ヘッダーのコンテンツ

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の［設定］ドロップダウンメニューをクリックし、［ヘッダー］を選択します。
3. 「グローバル コンテンツ エディター」で、左側のサイドバーにあるsiteTreeコンテンツアイコンをクリックします。
4. 左側のサイドバーで、［ウェブサイトヘッダー］モジュールをクリックします。
5. ヘッダーロゴのコンテンツを編集するには、［ロゴ］セクションをクリックして展開します。
   • 既定のロゴを変更するには、［既定のロゴよりも優先使用］スイッチをオンに切り替えるか、［このドメインのデフォルトのロゴを編集］をクリックして既定のロゴを更新します。
   • 既定のロゴを変更することを選択した場合は、［画像をアップロード］または［画像を参照］をクリックして新しいロゴを追加できます。
   • ロゴが設定されていない場合に会社名を表示する場合は、［ロゴが設定されていない場合は会社名を表示する］スイッチをオンに切り替えます。
   • ロゴにURLリンクを追加するには、［リンク］フィールドにURLを入力します。
   • ［Apply options（オプションを適用）］をクリックして変更内容を確認します。
6. ヘッダーメニューのコンテンツを編集するには、［メニュー］セクションをクリックして展開します。
   
   • ヘッダーメニューを表示するには、［メニュー］ドロップダウンメニューをクリックして、メニューを選択します。
   • 既存のヘッダーメニューを編集するには、［編集］をクリックします。
   • 新しいヘッダーメニューを作成するには、［新規作成］をクリックします。
   • ヘッダーメニューに表示できるメニューツリーの子の数を編集するには、［最大レベル数］フィールドのupIcon増加増およびdownIcon減少アイコンを使用します。 
   • ［Apply options（オプションを適用）］をクリックして変更内容を確認します。
7. ヘッダーボタンのコンテンツを編集するには、［ボタン］をクリックします。
   
   • ヘッダーにボタンを追加するには、［ボタンを追加］チェックボックスをオンにします。
   • ヘッダーのボタンテキストを編集するには、［ボタンテキスト］フィールドにテキストを入力します。 
   • ボタンのURLリンクを編集するには、［リンク先］ドロップダウンメニューをクリックし、オプションを選択します（［外部］など）。選択したオプションに応じて、追加のフィールドが表示されます。
   • ボタンのURLリンクが新しいウィンドウで開くようにするには、［リンクを新しいウィンドウで開く］スイッチをオンに切り替えます。 
   • ボタンリンクのタイプを編集するには、［フォローしない（No follow）］の横にあるチェックボックスをオンにします。
   • ボタンにアイコンを追加するには、［追加アイコン］チェックボックスをオンにします。
     • ［置換］をクリックして、ボタンアイコンを変更します。 
     • ［位置］ドロップダウンメニューをクリックし、ボタンアイコンの位置を選択します。
   • ［Apply options（オプションを適用）］をクリックして変更内容を確認します。
8. 言語切り替え機能の内容を編集するには、［言語切り替え機能］セクションをクリックして展開します。
   
   • ヘッダーに言語切り替え機能を追加するには、［言語切り替えを追加］チェックボックスをオンにします。
   • 言語切り替え機能の表示モードを編集するには、［表示モード］ドロップダウンメニューをクリックし、オプションを選択します（［ローカライズ］、［ページ言語］、［ハイブリッド］など）。
   • ［Apply options（オプションを適用）］をクリックして変更内容を確認します。
9. 追加のサポートオプションの内容を編集するには、［追加のサポートオプション］セクションをクリックして展開します。
   
   • カスタマーポータルのリンクを表示するには、［カスタマーポータルのリンクを表示］スイッチをオンに切り替えます。［カスタマーポータルのリンクテキスト］フィールドに、訪問者に表示されるテキストを入力します。
   • 制限付きコンテンツの場合にサインインを表示するには、［制限付きコンテンツの場合にサインインを表示］スイッチをオンに切り替えます。［サインイン リンク テキスト］フィールドと［サインアウト リンク テキスト］フィールドに、訪問者に表示されるテキストを入力します。
   • サポートフォームを表示するには、［サポートフォーム］スイッチをオンに切り替え、［フォーム］ドロップダウンメニューでフォームを選択します。［サポートフォームのテキストリンク］フィールドと［サポートフォームのタイトル］フィールドに、訪問者に表示されるテキストを入力します。
   • ［Apply options（オプションを適用）］をクリックして、変更内容を確認します。
10. 完了したら、右上の［［X］件のアセットに公開］をクリックします。

フッターコンテンツ

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上にある［設定］ドロップダウンメニューをクリックし、［フッター］を選択します。
3. 「グローバル コンテンツ エディター」で、左側のサイドバーにあるsiteTreeコンテンツアイコンをクリックします。
4. フッターメニューを表示するには、［フッターメニュー］モジュールをクリックします。
   
   • ［メニュー］ドロップダウンメニューをクリックし、メニューを選択します。
   • 既存のフッターメニューを編集するには、［編集］をクリックします。
   • 新しいフッターメニューを作成するには、［新規作成］をクリックします。
   • フッターメニューに表示できるメニューツリーの子の数を編集するには、［メニュー表示の深度］フィールドのupIcon増加およびdownIcon減少アイコンを使用します。 
   • フッターメニューを表示するには、［メニューを表示］チェックボックスをオンにします。
   • ［Apply options（オプションを適用）］をクリックして変更内容を確認します。
5. フッターロゴのコンテンツを編集するには、［ロゴ］モジュールをクリックします。
   
   • 既定のロゴを変更するには、［既定のロゴよりも優先使用］スイッチをオンに切り替えるか、［このドメインのデフォルトのロゴを編集］をクリックして既定のロゴを更新します。
   • 既定のロゴを変更することを選択した場合は、［画像をアップロード］または［画像を参照］をクリックして新しいロゴを追加できます。
   • フッターロゴの読み込み方法をカスタマイズするには、［画像の読み込み］ドロップダウンメニューをクリックし、［ブラウザーのデフォルト］、［遅延］、または［遅延しない］を選択します。
   • フッターロゴにリンクURLを追加するには、［リンクURL］フィールドにURLのテキストを入力します。
   • ［Apply options（オプションを適用）］をクリックして変更内容を確認します。
6. フッターの住所の内容を編集するには、［フッターの住所］モジュールをクリックします。
   
   • ［展開したビューで編集］をクリックします。
   • グローバル コンテンツ エディターで、フッター住所のテキストを入力します。
   • 左側のサイドバーで［展開したビューを閉じる］をクリックします。
7. フッターのソーシャルフォローのコンテンツを編集するには、［ソーシャルフォロー］モジュールをクリックします。
   
   • ［ソーシャルリンク］セクションで、editIcon編集アイコンまたはdeleteIcon削除アイコンをクリックして、既存のソーシャルリンクを編集または削除します。ソーシャルリンクを追加するには、［+追加］をクリックします。 
   • ソーシャル フォロー アイコンを表示するには、［アイコンを表示］チェックボックスをオンにします。
8. フッターの著作権の内容を編集するには、［フッターの著作権］モジュールをクリックします。
   • ［展開したビューで編集］をクリックします。
   • グローバル コンテンツ エディターで、フッターの著作権のテキストを入力します。
   • 左側のサイドバーで［展開したビューを閉じる］をクリックします。
9. 完了したら、右上の［［X］件のアセットに公開］をクリックします。