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：この属性により、カテゴリーの名前が参照されます。指定すると、特定のナレッジベースのカテゴリーにアクセスしたユーザーにカスタマイズした内容が表示されます。
CSSのカスタマイズ例
以下では、CSSによるカスタマイズの例を紹介します。ヘッダーの背景画像を削除し、ナレッジベースのサブカテゴリー画面に背景色を追加するスクリプトを作成します。
カスタマイズ前
カスタマイズ後
以下のCSSコードを使用することで、上記のようにページをカスタマイズできます：
.articleSubCategory .Header__header{
background-image: none;
background-color: red
}
Zoho CRM 管理者向けトレーニング
「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。
日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
Zoho コミュニティ オンラインフォーラム
フォーラムをフォローして、Zoho ユーザーによる活用のノウハウやアドバイスを入手。サービスのアップデート情報やユーザー向けイベントの告知について通知を受け取りましょう。
Zoho WorkDrive Resources
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?