HTML、CSS、Javaを使用したヘルプセンターの高度なカスタマイズ
基本色テーマを使用して、ヘルプセンターの外観をカスタマイズできます。ただし、制限があり、ヘッダーとフッターを完全に再構築することはできません。ヘルプセンターをHTML、CSS（スタイルシート）、Javaを使って高度にカスタマイズする方法もあります。Zoho Deskの管理者がWebサイト制作の知識を持っている場合、ヘルプセンターのHTMLを直接操作し、要件に応じてサイトのCSSをカスタマイズしたり、Javaを使用してカスタムスクリプトを追加したりすることもできます。ヘルプセンターを、自社のWebサイトの見た目に近づけることもできます。
カスタムHTMLの設定により、ヘッダーのセクションからタブを追加または削除できます。CSSコードを使用して、HTMLの各要素にスタイルを適用することもできます。たとえば、背景とテキストの色を設定するためのスタイルシートを作成できます。他には、タブを別の場所に移動する、枠線を変更する、フォントサイズを設定する、要素の配置をカスタマイズする等ができます。
必要な権限 この機能を利用するには、 サポートの経路の権限が必要です。
各プランの機能と制限を確認する
メモ：
-
HTMLのカスタマイズは、Zoho Deskのエンタープライズプランのみで利用できます。
-
CSSのカスタマイズは、Zoho Deskのプロフェッショナルプランおよびエンタープライズプランでのみ利用できます。
HTMLスクリプトのカスタマイズ
HTMLスクリプトを使用して、ヘルプセンターのヘッダーとフッター内の要素をカスタマイズできます。ロゴ、サインインやユーザー登録やサインアウトのセクション、会社名の追加ができます。
HTMLをカスタマイズするには：
- 上部バーの設定アイコン（
）をクリックします。
- ［設定］ページで、［経路］ > ［ヘルプセンター］をクリックします。
- HTMLをカスタマイズするヘルプセンターをクリックします。
- ［ヘルプセンター］のサブメニューで、［ヘルプセンターのカスタマイズ］をクリックします。
［テーマ］の一覧ページが表示されます。 - 公開したテーマの横にある［カスタマイズ］をクリックします。
- ［カスタマイズ］ページのサイドバーから、［HTML］タブを選択します。
- 適切なコードを追加して、 ヘッダーの要素をカスタマイズできます。
また、［フッター］をクリックして、要素をカスタマイズできます。 - ［プレビュー］をクリックして、変更内容を確認します。
- ［公開］をクリックします。
メモ：
- HTMLセクションには、ヘッダーとフッター内の標準要素のコードが含まれます。
- ［リセット］をクリックすると、HTMLコンテンツを以前に公開された状態に復元できます。
- HTMLをすでに編集している場合は、タブのカスタマイズは利用できません。
初期設定のHTML差し込み項目の使用
Zoho Deskには、ヘルプセンターをカスタマイズするために使用できる、いくつかのHTML標準差し込み項目が用意されています。ヘッダーとフッターのエリアの差し込み項目は、次のとおりです：
|
エリア
|
差し込み項目名
|
利用可能なテーマ
|
|
［ヘッダー］
|
ホーム
|
すべて
|
|
|
問い合わせ
|
すべて
|
|
|
コミュニティ
|
すべて
|
|
|
ナレッジベース
|
すべて
|
|
|
組織のロゴ
|
すべて
|
|
|
組織名
|
すべて
|
|
|
サインイン / サインアウト
|
すべて
|
|
|
リンクURL
|
すべて
|
|
|
問い合わせの追加
|
クラシック
|
|
|
トピックの追加
|
クラシック
|
|
|
パンくず
|
クラシック
|
|
|
フォームのショートカット
|
マテリアル
|
|
|
ユーザーの個人設定
|
エレガントおよびマテリアル
|
|
|
検索
|
すべて
|
|
|
検索ホーム
|
すべて
|
|
|
歓迎のテキスト |
エレガントおよびクラシック
|
|
|
歓迎の説明
|
エレガントおよびクラシック
|
|
|
|
|
|
［フッター］
|
|
|
|
|
ヘルプデスク
|
すべて
|
|
|
ヘルプデスクのリンク
|
すべて
|
|
|
ヘルプデスクの利用規約
|
すべて
|
|
|
ヘルプデスクの利用規約リンク
|
すべて
|
|
|
ヘルプデスクのプライバシー
|
すべて
|
|
|
ヘルプデスクのプライバシーリンク
|
すべて
|
|
|
PoweredBy
|
すべて
|
差し込み項目を追加するには
-
HTMLページで、divタグ内に「$」を入力すると、差し込み項目のリストが表示されます。
-
Enterキー（または、Returnキー）をクリックして、差し込み項目を追加します（例：Company Name）。
-
［プレビュー］をクリックして、変更内容を確認します。
-
［公開］をクリックします。
メモ：
- HTMLのカスタマイズは、フラットテーマでは利用できません。
- ほとんどの差し込み項目はハイパーリンクとあわせて設定されます。そのため、「href」を付ける必要はありません 。
- コミュニティの差し込み項目は 、Zoho Deskの［コミュニティ］を有効にした場合にのみ、表示されます。
CSSコードのカスタマイズ
CSSエディターを使用して、ヘルプセンターの外観をカスタマイズできます。 初期設定のスタイルを上書きする形で、カスタマイズしたCSSのスタイルが適用されます。
CSSをカスタマイズするには
- 上部バーの設定アイコン（
- ［設定］ページで、［経路］ > ［ヘルプセンター］をクリックします。
- HTMLをカスタマイズするヘルプセンターの名前をクリックします。
- ［ヘルプセンター］のサブメニューで、［ヘルプセンターのカスタマイズ］をクリックします。
［テーマ］の一覧ページが表示されます。 - 公開したテーマの横にある［カスタマイズ］をクリックします。
- ［カスタマイズ］ページのサイドバーから、［CSS］タブを選択します。
-
［CSS］ページで、スタイルシートの要素をカスタマイズします。
- ［プレビュー］をクリックして、変更内容を確認します。
-
［公開］をクリックします。
カスタマイズしたCSSが、ヘルプセンターのすべてのページに適用されます。
その他のCSSカスタマイズ方法として、外部リソースからCSSをインポートすることもできます。CSSのインポートアイコン（ 
）をクリックすると、CSSファイルをZoho Deskにアップロードできます。アップロードするCSSファイルは、必ず.txt形式または.css形式で、サイズを1MB以下にしてください。
重要事項：
- 新しいCSSルールを正しい要素に適用するには、既存のid属性を使用してください。これは、HTMLの構造と要素を保持するのに不可欠です。
JavaScriptによるヘルプセンターのカスタマイズ
JavaScriptによるヘルプセンターのカスタマイズ機能は、エンタープライズプランのユーザーのみ利用できます。なお、利用するには申請が必要です。利用を希望する場合は、support@zohodesk.comにお問い合わせください。
Zoho Deskでは、要件に合わせてカスタムスクリプトを追加できます。
カスタムスクリプトの追加方法は、以下のとおりです。
- インラインスクリプト：分析ツール、チャットツール、決済サービスなどの外部サービスのスクリプトをヘルプセンターに直接追加します。コードをゼロから記述する手間を省くことができます。たとえば、Google アナリティクスなどの外部サービスを使用して、ページのクリック率などの指標データを確認することが可能です。
- JavaScriptの関数：Zoho DeskやDOM（Document Object Model）の要素を操作するための独自のJavaScriptの関数を記述します。たとえば、指定した条件を満たした場合に、操作画面上で要素を表示したり、隠したりすることが可能です。
カスタムスクリプトの有効化
独自のJavaScriptのコードを追加するには、ヘルプセンターでカスタムスクリプトの設定が有効になっている必要があります。
カスタムスクリプトを有効にするには
- ［設定］→［経路］→［ヘルプセンター］の順に移動します。
- 対象のヘルプセンターのポータルを選択し、［アクセス設定］を選択します。
- カスタムスクリプトの利用条件を確認して、ヘルプセンターでのカスタムスクリプトの有効化のチェックボックスにチェックを入れます。
JavaScriptのカスタマイズ
JavaScriptを使用して、ヘルプセンターの外観をカスタマイズできます。
メモ：ヘルプセンターでのカスタムスクリプトの有効化の設定が有効になっている場合にのみ、JavaScriptのタブがヘルプセンターで表示されます。
JavaScriptのスクリプトをカスタマイズするには
- ［設定］→［経路］→［ヘルプセンター］の順に移動します。
- 対象のヘルプセンターを選択し、［ヘルプセンターのカスタマイズ］をクリックします。
- テーマを選択して［カスタマイズ］タブをクリックし、［JS］をクリックします。
- 外部サービスのアプリコードを使用する場合、［インラインスクリプト］タブにスクリプトを追加します。
- JavaScriptの関数を使用する場合、［JS関数］タブにスクリプトを追加します。
- ［プレビュー］をクリックして内容を確認し、［公開する］をクリックします。
Zoho CRM 管理者向けトレーニング
「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。
日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。
- 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?
New to Zoho Assist?
Related Articles
CSSの変更によるヘルプセンターのカスタマイズ
ヘルプセンターにおいて、記事の詳細画面のカスタマイズ、問い合わせフォームやトピックリストの追加など、特定の項目を変更したい場合があります。ヘルプセンター全体での編集が必要な場合や、特定のカテゴリーの編集が必要な場合もあります。このような場合、CSS（Cascading Style Sheets）を利用してヘルプセンターのスタイルをカスタマイズできます。 ...Zoho Deskの管理者向けはじめてガイド
Zoho Deskは、製品やサービスに関する顧客サポート業務を効率化できるソフトウェア（クラウドサービス）です。顧客からの質問や問題の報告、それらに対する回答や調査、社内での情報共有などに役立ちます。 ...ドメインの関連付け
Zoho Deskでは、担当者向けの画面（ポータル）と初期設定のヘルプセンターのURLをカスタマイズし、独自ドメインを使用したURLへと変更することが可能です。たとえば、ヘルプセンターのWebアドレスは、初期設定ではZoho Deskのサブドメインを使用したアドレスです（例：desk.zoho.com/portal/ <mycompany>）。このアドレスをカスタマイズして 「support.<mycompany>.com」に変更することが可能です。この機能は、ドメインの関連付けと呼ばれます。 ...自動ガイドボットの共有
自動ガイドボットの共有 フローを公開し、フローが有効になったら、管理者は自動ガイドボットを利用者（顧客や組織内のサポート担当者）に共有することが可能です。共有は、以下のいずれかの方法で行うことができます。 埋め込む 専用のコードを使用して、Webページに自動ガイドボットを埋め込みます。コードをカスタマイズすると、自動ガイドボットの配置、形、メッセージの表示位置などを指定できます。これにより、Zoho ...どこでもサポートのアドオンのnonce生成
...