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

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

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

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

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



上記の画像のとおり、ヘルプセンターのページコードは以下の行で始まります：
<portal data-reactroot class="html articleSubCategory signedIn zohodesk">
これは、Reactコンポーネントの基となる要素であり、こちらでヘルプセンターの外観と動作を安全な方法でカスタマイズすることができます。このコードは3つの異なるクラス属性で構成されています。以下でそれぞれの属性について説明します：
  1. articleSubCategory：この属性により、カスタマイズが適用されるページが定義されます。そのため、スタイルは他の場所には適用されません。以下の表は、カスタマイズを行う際に参照可能な他の属性の一覧です。
    ページ
    クラス名
      ホーム
      home
      問い合わせの一覧
      ticketList
      問い合わせの詳細
      ticketDetail
      問い合わせの追加
      ticketForm
      ナレッジベースのカテゴリーの一覧
      kbLanding
      ナレッジベースのサブカテゴリー
      article_subcategory
      記事の一覧
      articleList
      記事の詳細
      articleDetail
      コミュニティのカテゴリー
      communityLanding
      トピックの一覧
      communityList
      トピックの詳細
      communityDetail
      トピックの追加
      topicForm
      ユーザーのプロフィール
      userProfile
      サインイン
      signin
      サインイン後
      signedIn
      登録
      signup
      パスワードを忘れた場合
      forgetPwd

  2. signedIn：この属性により、ユーザーの認証ステータスが定義されます。指定すると、ヘルプセンターにサインインしたユーザーに向けてカスタマイズした内容が表示されます。ヘルプセンター全体で共通的な変更を行う際は、この属性を削除できます。
  3. zohodesk：この属性により、カテゴリーの名前が参照されます。指定すると、特定のナレッジベースのカテゴリーにアクセスしたユーザーにカスタマイズした内容が表示されます。
CSSのカスタマイズ例
以下では、CSSによるカスタマイズの例を紹介します。ヘッダーの背景画像を削除し、ナレッジベースのサブカテゴリー画面に背景色を追加するスクリプトを作成します。

カスタマイズ前


カスタマイズ後



以下のCSSコードを使用することで、上記のようにページをカスタマイズできます：
.articleSubCategory .Header__header{

background-image: none;

background-color: red





    }