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

ヘルプセンターにおいて、記事の詳細画面のカスタマイズ、問い合わせフォームやトピックリストの追加など、特定の項目を変更したい場合があります。ヘルプセンター全体での編集が必要な場合や、特定のカテゴリーの編集が必要な場合もあります。このような場合、CSS（Cascading Style Sheets）を利用してヘルプセンターのスタイルをカスタマイズできます。

CSSを用いてヘルプセンターをカスタマイズする場合、留意すべき点があります。ヘルプセンターの要素には、クラスとIDがあります。ヘルプセンターのテーマのCSSセクションで、特定のクラスとIDのスタイルを設定します。ブラウザーの検証機能は、CSSを利用してヘルプセンターをカスタマイズするうえで最も役立つ機能です。これにより、ヘルプセンターのページに関連付けられているすべてのCSSを表示することができます。検証機能は、変更するプロパティを含むセレクターや、元のスタイルを識別するのに役立ちます。また、これらのセレクターをCSSのカスタマイズ欄にコピーして、独自のプロパティを追加することもできます。

この記事では、カスタマイズできるプロパティを説明します。また、ヘルプセンターで行うことができるCSSのカスタマイズについても説明します。

上記の画像のとおり、ヘルプセンターのページコードは以下の行で始まります：

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

これは、Reactコンポーネントの基となる要素であり、こちらでヘルプセンターの外観と動作を安全な方法でカスタマイズすることができます。このコードは3つの異なるクラス属性で構成されています。以下でそれぞれの属性について説明します：

articleSubCategory：この属性により、カスタマイズが適用されるページが定義されます。そのため、スタイルは他の場所には適用されません。以下の表は、カスタマイズを行う際に参照可能な他の属性の一覧です。

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

signedIn：この属性により、ユーザーの認証ステータスが定義されます。指定すると、ヘルプセンターにサインインしたユーザーに向けてカスタマイズした内容が表示されます。ヘルプセンター全体で共通的な変更を行う際は、この属性を削除できます。
zohodesk：この属性により、カテゴリーの名前が参照されます。指定すると、特定のナレッジベースのカテゴリーにアクセスしたユーザーにカスタマイズした内容が表示されます。