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;
}- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Zoho Campaigns Resources
Zoho WorkDrive Resources
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?