CSSの変更によるヘルプセンターのカスタマイズ

ヘルプセンターでは、記事の詳細画面、問い合わせフォーム、トピックの一覧など、画面内の特定の要素の見た目を変更できます。変更内容は、ヘルプセンター全体に適用することも、特定のカテゴリーだけに適用することもできます。このようなデザインの調整には、CSS（Cascading Style Sheets）を使用します。

CSSでヘルプセンターをカスタマイズするには、まず変更したい要素に設定されているクラスやIDを確認します。ヘルプセンターのテーマにあるCSS欄で、そのクラスやIDをセレクターとして指定し、スタイルを追加または変更します。対象の要素を調べるときは、ブラウザーの検証機能を使用すると便利です。検証機能では、ページ上の各要素に適用されているCSSを確認できるため、変更したい要素のセレクターや現在のスタイルを特定できます。確認したセレクターをCSSのカスタマイズ欄にコピーし、必要なCSSプロパティを追加してデザインを変更できます。

利用条件

必要な権限
この機能を利用するには、 サポートの経路の権限が必要です。
各プランの機能と制限を確認する

この記事では、CSSでカスタマイズする際に使用する属性と、ヘルプセンターでの具体的なカスタマイズ例を紹介します。

上の画像では、ヘルプセンターのページコードの先頭に次の要素があります。

<portal data-reactroot class="html articleSubCategory signedIn zohodesk">

これは、ヘルプセンターのReactコンポーネントのルート要素です。class属性には、表示中のページ、ユーザーのサインイン状態、ナレッジベースのカテゴリーなどを表す値が設定されています。これらをCSSセレクターに含めることで、カスタマイズを適用する範囲を指定できます。ここでは、この例に含まれる3つのクラスについて説明します。

articleSubCategory：表示中のページを表すクラスです。このクラスをCSSセレクターに含めると、指定したページだけにスタイルを適用でき、他のページには影響しません。ページごとのクラス名は次のとおりです。

ページ	クラス名
ホーム	home
問い合わせの一覧	ticketList
問い合わせの詳細	ticketDetail
問い合わせの追加	ticketForm
ナレッジベースのカテゴリー一覧	kbLanding
ナレッジベースのサブカテゴリー	article_subcategory
記事の一覧	articleList
記事の詳細	articleDetail
コミュニティのカテゴリー	communityLanding
トピックの一覧	communityList
トピックの詳細	communityDetail
トピックの追加	topicForm
ユーザープロフィール	userProfile
サインイン	signin
サインイン後	signedIn
登録	signup
パスワードを忘れた場合	forgetPwd

signedIn：ユーザーがヘルプセンターにサインインしている状態を表すクラスです。このクラスをCSSセレクターに含めると、サインインしているユーザーにだけカスタマイズを適用できます。サインイン状態に関係なく適用する場合は、このクラスをCSSセレクターから外します。
zohodesk：この例では、ナレッジベースのカテゴリー名を表すクラスです。このクラスをCSSセレクターに含めると、そのカテゴリーを表示している場合にだけカスタマイズを適用できます。

CSSのカスタマイズ例

ここでは、CSSによるカスタマイズの例として、ナレッジベースのサブカテゴリー画面のヘッダーから背景画像を削除し、背景色を設定します。

カスタマイズ前

カスタマイズ後

上のように表示するには、次のCSSコードを使用します。

.articleSubCategory .Header__header {
    background-image: none;
    background-color: red;
}