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

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

始める前に

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

必要な条件を理解する

次のいずれかのユーザー権限があることを確認します。

• スーパー管理者 権限。
• ナレッジベース設定権限、グローバルコンテンツおよびテーマ設定権限、Service Hub シート。HubSpotのシートベースの価格について詳細をご確認ください。

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

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

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

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

• サンプルコンテンツを含むナレッジベーステンプレートを表示するには、次の手順に従います。

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

• サンプルコンテンツを含むナレッジベーステンプレートを別の言語で表示するには、次の手順に従います。

• 1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. 左上の[ 表示 場所 ]ドロップダウンメニューをクリックし、 テンプレートを選択します。テーマの変更は全てのナレッジベーステンプレートに適用されます。
  4. 左上の2つ目の ドロップダウンメニュー をクリックし、 言語を選択します。

• ナレッジベースのテンプレートをサンプルコンテンツとともにさまざまな画面サイズで表示するには、次の手順に従います。

1. 1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
   2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
   3. エディターの上部にある デバイス アイコンをクリックするか、 画面の幅 をピクセル単位で入力します。 

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

テーマのスタイル( 色、 タイポグラフィー、 レイアウト、 ヘッダー、 フッターなど)をカスタマイズできます。

ナレッジベーステーマの色を編集する

• ナレッジベーステーマで使用される色を編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. テーマエディターで、 左側のサイドバーにある [色]ドロップダウンメニューをクリックします。
  4. 16進数の値 を入力するか、 カラーパレットから [プライマリー]、[ セカンダリー]、[ アクセント]、[本文の背景]の色を選択します 。各オプションで貴社のブランドカラーが表示されます。
• ナレッジベースのテーマカラーの編集が完了したら、右上の [テーマを公開 ]をクリックします。

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

• ナレッジベーステーマのタイポグラフィーを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. テーマエディターで、 左側のサイドバーにある [タイポグラフィー]ドロップダウンメニューをクリックします。
  4. 左側のサイドバーの [プライマリ ー]セクションと[セカンダリー]セクションで、 フォント、 フォント の色、 フォント スタイル ( ライト、 太字、 標準など)を選択します。 各オプションで貴社の ブランドフォント と ブランドカラーが表示されます。 
  5. 左側のサイドバーの [見出し (H1-H6)]セクションで 、 フォント 、フォントサイズ、 フォントの色、 フォントスタイル ( Light、 Bold、 Regularなど)、大文字と小文字( Capitalize、 Uppercase、 Lowercase)を選択します。
  6. 左側のサイドバーの [本文 ]セクションと [リンク]セクションで ベース フォント、 フォントサイズ、 フォントカラー、 フォントスタイル (ライト、 太字、 標準など)を選択します。
• ナレッジベーステーマのタイポグラフィーの編集が完了したら、右上の [テーマを公開 ]をクリックします。

ナレッジベーステーマのレイアウトを編集する

• ナレッジベーステーマのレイアウトスタイルをカスタマイズするには、次の手順に従います。
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. テーマエディターで、 左側のサイドバーにある [レイアウト]セクションをクリックします。
  4. [レイアウト]オプションをクリックします。レイアウトオプションによってサポートされるスタイル設定オプションが異なります。
• ナレッジベーステーマのレイアウトの編集が完了したら、右上の [テーマを公開 ]をクリックします。

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

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

• ナレッジベーステーマのヘッダー幅を編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. 左側のサイドバーで [ヘッダー ]をクリックします。
  4. [ヘッダー幅 ]フィールドで、[ 全幅 ]または [コンテンツ幅]を選択します。
• ナレッジベーステーマでヘッダーのトップバーのスタイルを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. 左側のサイドバーで [ヘッダー ]をクリックします。

1. 4. [ヘッダー ]セクションで、[ トップバー]をクリックします。
   5. [トップバー ]セクションで、カラー パレットで背景色 を選択するか、[ 背景色 ]フィールドに 16進数コード値 を入力します。フォントを編集するには、[ ベースフォント ]フィールドと [ホバーフォント ]フィールドの フォント、 フォントカラー、 およびフォントスタイル をクリックします。

• ナレッジベーステーマでヘッダーの言語切り替えスタイルを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. 左側のサイドバーで [ヘッダー ]をクリックします。

1. 4. [ヘッダー ]セクションで、[ 言語切り替え]をクリックします。

• 5. [言語切り替え ]セクションで、[ ドロップダウン]をクリックします。
  6. [ドロップダウン ]セクションで[背景]をクリックします。
  7. [背景]セクションで 、カラー パレットの色を選択するか、[ カラー ]フィールドと [ホバー ]フィールドの 16進数コード 値 を入力します。
• ナレッジベーステーマでヘッダーメニューのスタイルを編集するには、次の手順に従います。
  
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. 左側のサイドバーで [ヘッダー ]をクリックします。

1. 4. [ヘッダー ]セクションで、[メニュー]をクリックします 。
   5. [メニュー ]セクションで、[ ドロップダウン]をクリックし、[ 背景 ]または [テキスト]をクリックします。 
      • [背景 ] セクションで、カラー パレットの色を選択するか、[ カラー ]フィールドと [ホバー ]フィールドの 16進数コード値 を入力します。
      • [テキスト ]セクションで、 フォント、 フォントの色、 フォントスタイルを選択します。
   6. [メニュー]セクションで、[ テキスト ]または [背景]をクリックします。
      • [テキスト]セクションで、[ 基本フォント ]フィールドと [ホバーフォント ]フィールドの フォント、 フォントの色、フォントフォントのスタイルを選択します。
      • [背景 ]セクションで、カラーパレット の色 を選択するか、[色]フィールドの 16進数コード値 を入力します。

• ナレッジベーステーマでヘッダー のボタン スタイルを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. 左側のサイドバーで [ヘッダー ]をクリックします。
  4. [ヘッダー ]セクションで、[ボタン]をクリックします 。
  5. [ボタン ]セクションで、[ テキスト]、[背景]、[ 境界線]、[コーナー]、または[ホバー]をクリックします。
     • [テキスト]セクションで、 フォント 、フォントサイズ、 フォントの色、 フォントスタイル (Light、Bold、Regularなど)、変換 ケース (Capitalize、Uppercase、Lowercaseなど)を選択します。
     • [背景 ]セクションで、カラーパレット の色 を選択するか、[ 色 ]フィールドの 16進数コード値 を入力します。
     • 境界線 セクションで、 スタイル フィールドで境界線 のスタイル を選択します。
     • ホバースタイルを編集するには、[ ホバー ]をクリックし、[ テキスト]、[ 背景 ]、または [境界線]をクリックします。
       • [テキスト ]セクションで、 フォント 、フォントサイズ、 フォントの色、 フォントスタイル (Light、Bold、Regularなど)、変換 ケース (Capitalize、Uppercase、Lowercaseなど)を選択します。
       • [背景 ]セクションで、カラーパレット の色 を選択するか、[ 色 ]フィールドの 16進数コード値 を入力します。
       • 境界線 セクションで、 スタイル フィールドで境界線 のスタイル を選択します。
• ナレッジベーステーマのヘッダー検索バーのスタイルを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. 左側のサイドバーで [ヘッダー ]をクリックします。
  4. [ヘッダー ]セクションで、[ 検索バー]をクリックします。
  5. [検索バー ]セクションで、[ 背景]、[ ラベルテキスト ]、または [入力]をクリックします。
     • [ 背景 ]セクションで、 背景のタイプ を選択し、カラーパレットで 色 を選択するか、 16進数コード値を入力します。 
     • [ラベルテキスト ]セクションで、 フォント、 フォントサイズ、 フォントの色、 フォントスタイル ( ライト、 太字、 標準など)を選択します。
     • [入力 ]セクションで、カラーパレットで 色 を選択するか、[ テキストの色]、[ ボタンの色]、 および[アイコンの色]フィールドの 16進数コード値 を入力します。
• ナレッジベーステーマのヘッダースタイルの編集が完了したら、右上の [テーマを公開 ]をクリックします。

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

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

• ナレッジベーステーマでフッターの幅を編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. 左側のサイドバーで [フッター ]をクリックします。
  4. [フッター ]セクションで、[ 全幅 ]または [コンテンツ幅]をクリックします。
• ナレッジベーステーマでフッターの背景を編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. 左側のサイドバーで [フッター ]をクリックします。
  4. [フッター ]セクションで、カラーパレットから 色 を選択するか、[ 背景 ]フィールドに 16進数コードの値 を入力します。です。
• ナレッジベーステーマのフッターメニューのスタイルを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. 左側のサイドバーで [フッター ]をクリックします。
  4. [フッター ]セクションで、[メニュー]をクリックします 。
  5. [ベースフォント]フィールドと [ホバーフォント ]フィールドで、 フォント 、フォント の色、フォントスタイル ( ライト、 太字、 標準など)を選択します。
     
• ナレッジベーステーマのフッターのテキストスタイルを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. 左側のサイドバーで [フッター ]をクリックします。
  4. [フッター ]セクションで、[テキスト]をクリックします 。
  5. [ Font(フォント)]フィールドで、 フォント 、フォントサイズ、 フォントの色、 フォントスタイル ( Light、 Bold、 Regularなど)を選択します。
• ナレッジベーステーマでフッターのソーシャルアイコンのスタイルを編集するには、次の手順に従います。
  1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
  2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
  3. 左側のサイドバーで [フッター ]をクリックします。
  4. [フッター ]セクションで[ ソーシャルアイコン]をクリックします。
     • ソーシャルアイコンのサイズを変更するには、[ アイコンサイズ ]ドロップダウンメニューをクリックし、[ 小]、[ 標準]、または [大]を選択します。
     • ソーシャルアイコンの形状を変更するには、[ アイコンの形状 ]ドロップダウンメニューをクリックし、[ 円 ]または [正方形]を選択します。
     • ソーシャルアイコンの色を変更するには、カラーパレットで 色 を選択するか、[ アイコンの色 ]フィールドに 16進数コード値 を入力します。
     • ソーシャルアイコンの背景色を変更するには、カラーパレットで 色 を選択するか、[ 背景 ]フィールドに 16進数コードの値 を入力します。
     • ソーシャルアイコンの整列を変更するには、[ 位置合わせ ]フィールドで[左揃え blockAlignmentLeftIcon ][ 中央揃え]、または blockAlignmentCenterIcon[右揃え]アイコンをクリックします blockAlignmentRightIcon 右揃え 」をクリックします。
• ナレッジベーステーマのフッタースタイルの編集が完了したら、右上の [テーマを公開 ]をクリックします。