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関数］タブにスクリプトを追加します。
- ［プレビュー］をクリックして内容を確認し、［公開する］をクリックします。