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

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

始める前に

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

必要条件を把握する

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

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

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

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

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

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

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

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

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

1. HubSpotアカウントにて、［サービス］＞［ナレッジベース］の順に進みます。
2. 右上の[ 設定 ]ドロップダウンメニューをクリックし、[ テーマ]を選択します。
3. テーマの色を変更するには、[ 色 ]セクションをクリックして展開します。次に 、16進数 の値を入力するか、 プライマリー、 セカンダリー、アクセント、 本文の背景フィールドの カラーパレットから 色 を選択します。各オプションで貴社のブランドカラーが表示されます。
4. テーマのタイポグラフィーを変更するには、[タイポグラフィー]をクリックします。
   • [プライマリ ー]と [セカンダリー ]セクションで、フォント のドロップダウンメニューをクリックし、 フォントを選択します。フォントの色を変更するには、 カラーパレット をクリックしてフォント の色を選択します。その他のフォントスタイル設定オプション(フォントウェイト、フォントサイズ、変換ケースなど)は、選択したフォントによって異なります。
   • 見出し、本文、またはリンクのタイポグラフィーを編集するには、[ 見出し (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%の場合、透明度が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. ホバースタイルを編集するには、 ホバーをクリックします。
   • [テキスト ]セクションをクリックして展開します。
     • フォントの色を変更するには、 カラーパレット をクリックしてフォント の色を選択します。
     • フォントテキストのスタイルを適用するには、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 ][ 中央揃え]、または blockAlignmentRightIcon [右揃え]アイコンをクリックします blockAlignmentCenterIcon 右揃え 」をクリックします。
10. 完了したら、右上の [テーマを公開 ]をクリックします。 

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

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

ヘッダーの内容

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

フッターコンテンツ

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