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
Web用またはモバイル（iOS／Android）用の自動ガイドボットの設定
自動ガイドボットとは Zoho Deskの自動ガイドボット機能では、独自のチャットボット（自動応答ロボット）をかんたんに作成することができます。また、作成した自動ガイドボットをWebサイトやモバイルアプリ（iOS／Android）、インスタントメッセージ連携の経路に設置することも可能です。この記事では、自動ガイドボットの概要、Web用の自動ガイドボットに関する制限事項、Web用またはモバイル用のフローの設定方法などについて説明します。 自動ガイドボットを利用するメリット ...情報カード
情報カードとは 情報カードでは、画像、タイトル、サブタイトル、説明、ボタンなどの項目を組み合わせて、利用者にさまざまな情報を表示することが可能です。カードに情報を見やすく配置することで、利用者による情報の理解を促進し、ボットにおける手続きを円滑にすることができます。 たとえば、商品を紹介するカードには、商品の画像、名前（タイトル）、説明の見出し（サブタイトル）、説明、購入ページや詳細ページに移動するためのボタンを配置できます。 情報カードの種類 情報カードには、動的と固定の2種類があります。 ...自動ガイドボットの共有
自動ガイドボットのカスタマイズ 要件に合わせて、自動ガイドボットのウィジェットの外観をカスタマイズできます。 カスタマイズできる内容は、以下のとおりです。 ウィジェットのロゴ ブランドのロゴをアップロードし、ウィジェットのヘッダーをカスタマイズできます。 テーマの色 ブランドのテーマに合わせてウィジェットの外観の色を選択できます。 挨拶メッセージと挨拶用のファイル 標準の挨拶メッセージを設定できます。 また、挨拶用のファイル（画像、GIF、動画）を追加することも可能です。 起動アイコンとスタイル ...選択肢ブロック
選択肢ブロックを使用すると、質問に対する回答を複数の選択肢の中から選択してもらうことができます。また、選択肢ブロックでは、チャットの利用者が選択した内容に応じてその後のチャットのフローを分岐させ、異なる経路による処理を実行することも可能です。選択肢ブロックには、ボタン、動的ボタン、選択肢カードの3種類が用意されています。このページでは、選択肢カードについて詳しく説明します。 選択肢カードの種類 ...自動ガイドボットのフローの利用
自動ガイドボットのフローでは、自動ガイドボットを通じて顧客（サイト訪問者）からどのような内容が入力されたら、どのような内容を表示するかなどについて、ボットによる処理の流れを設定します。フロー上に必要な要素（パーツ）をすべて間違いなく配置できるようにするには、あらかじめ流れ図の大枠を手書きやコンピューターで作成しておくとよいでしょう。 業界（小売業、情報通信業、医療機関）に応じた自動ガイドボットの活用例 については、 こちらのページ（英語） をご参照ください。 利用条件 必要な権限 ： ...