HTMLとCSSを使用したヘルプセンターの高度なカスタマイズ

HTMLとCSSを使用したヘルプセンターの高度なカスタマイズ

基本色テーマを使用して、ヘルプセンターの外観をカスタマイズできます。ただし、制限があり、ヘッダーとフッターを完全に再構築することはできません。ヘルプセンターをHTMLとCSS(スタイルシート)を使って高度にカスタマイズする方法もあります。Zoho Deskの管理者がWebサイト制作の知識を持っている場合、ヘルプセンターのHTMLを直接操作し、要件に応じてサイトのCSSをカスタマイズすることもできます。ヘルプセンターを、自社のWebサイトの見た目に近づけることもできます。

カスタムHTMLの設定により、ヘッダーのセクションからタブを追加または削除できます。CSSコードを使用して、HTMLの各要素にスタイルを適用することもできます。たとえば、背景とテキストの色を設定するためのスタイルシートを作成できます。他には、タブを別の場所に移動する、枠線を変更する、フォントサイズを設定する、要素の配置をカスタマイズする等ができます。

メモ:
  • HTMLのカスタマイズは、Zoho Deskのエンタープライズプランのみで利用できます。
  • CSSのカスタマイズは、Zoho Deskのプロフェッショナルプランおよびエンタープライズプランでのみ利用できます。

HTMLスクリプトのカスタマイズ
HTMLスクリプトを使用して、ヘルプセンターのヘッダーとフッター内の要素をカスタマイズできます。ロゴ、サインインやユーザー登録やサインアウトのセクション、会社名の追加ができます。

HTMLをカスタマイズするには:
  1. 上部バーの設定アイコン()をクリックします。
  2. [設定]ページで、[経路] > [ヘルプセンター]をクリックします。
  3. HTMLをカスタマイズするヘルプセンターをクリックします。
  4. [ヘルプセンター]のサブメニューで、[ヘルプセンターのカスタマイズ]をクリックします。
    [テーマ]の一覧ページが表示されます。
  5. 公開したテーマの横にある[カスタマイズ]をクリックします。



  6. [カスタマイズ]ページのサイドバーから、[HTML]タブを選択します。
  7. 適切なコードを追加して、 ヘッダーの要素をカスタマイズできます。
    また、[フッター]をクリックして、要素をカスタマイズできます。
  8. [プレビュー]をクリックして、変更内容を確認します。
  9. [公開]をクリックします。

メモ:
  • HTMLセクションには、ヘッダーとフッター内の標準要素のコードが含まれます。
  • [リセット]をクリックすると、HTMLコンテンツを以前に公開された状態に復元できます。
  • HTMLをすでに編集している場合は、タブのカスタマイズは利用できません。

初期設定のHTML差し込み項目の使用
Zoho Deskには、ヘルプセンターをカスタマイズするために使用できる、いくつかのHTML標準差し込み項目が用意されています。ヘッダーとフッターのエリアの差し込み項目は、次のとおりです:

エリア
差し込み項目名
利用可能なテーマ
[ヘッダー]
ホーム
すべて

問い合わせ
すべて

コミュニティ
すべて

ナレッジベース
すべて

組織のロゴ
すべて

組織名
すべて

サインイン / サインアウト
すべて

リンクURL
すべて

問い合わせの追加
クラシック

トピックの追加
クラシック

パンくず
クラシック

フォームのショートカット
マテリアル

ユーザーの個人設定
エレガントおよびマテリアル

検索
すべて

検索ホーム
すべて

歓迎のテキスト
エレガントおよびクラシック

歓迎の説明
エレガントおよびクラシック



[フッター]



ヘルプデスク
すべて

ヘルプデスクのリンク
すべて

ヘルプデスクの利用規約
すべて

ヘルプデスクの利用規約リンク
すべて

ヘルプデスクのプライバシー
すべて

ヘルプデスクのプライバシーリンク
すべて

PoweredBy
すべて

差し込み項目を追加するには

  1. HTMLページで、divタグ内に$」を入力すると、差し込み項目のリストが表示されます。
  2. Enterキー(または、Returnキー)をクリックして、差し込み項目を追加します(例:Company Name)。



  3. [プレビュー]をクリックして、変更内容を確認します。
  4. [公開]をクリックします。

メモ:
  • HTMLのカスタマイズは、フラットテーマでは利用できません。
  • ほとんどの差し込み項目はハイパーリンクとあわせて設定されます。そのため、「href」を付ける必要はありません
  • コミュニティの差し込み項目は 、Zoho Deskの[コミュニティ]を有効にした場合にのみ、表示されます。

CSSコードのカスタマイズ
CSSエディターを使用して、ヘルプセンターの外観をカスタマイズできます。 初期設定のスタイルを上書きする形で、カスタマイズしたCSSのスタイルが適用されます。  

CSSをカスタマイズするには
  1. 上部バーの設定アイコン()をクリックします。
  2. [設定]ページで、[経路] > [ヘルプセンター]をクリックします。
  3. HTMLをカスタマイズするヘルプセンターの名前をクリックします。
  4. [ヘルプセンター]のサブメニューで、[ヘルプセンターのカスタマイズ]をクリックします。
    [テーマ]の一覧ページが表示されます。
  5. 公開したテーマの横にある[カスタマイズ]をクリックします。
  6. [カスタマイズ]ページのサイドバーから、[CSS]タブを選択します。



  7. [CSS]ページで、スタイルシートの要素をカスタマイズします。
  8. [プレビュー]をクリックして、変更内容を確認します。
  9. [公開]をクリックします。
カスタマイズしたCSSが、ヘルプセンターのすべてのページに適用されます。 

その他のCSSカスタマイズ方法として、外部リソースからCSSをインポートすることもできます。CSSのインポートアイコン( )をクリックすると、CSSファイルをZoho Deskにアップロードできます。アップロードするCSSファイルは、必ず.txt形式または.css形式で、サイズ1 MB以下にしてください。 

重要事項:
  1. 新しいCSSルールを正しい要素に適用するには、既存のid属性を使用してください。これは、HTMLの構造と要素を保持するのに不可欠です。

    Zoho CRM 管理者向けトレーニング

    「導入したばかりで基本操作や設定に不安がある」、「短期間で集中的に運用開始できる状態にしたい」、「運用を開始しているが再度学び直したい」 といった課題を抱えられているユーザーさまに向けた少人数制のオンライントレーニングです。

    日々の営業活動を効率的に管理し、導入効果を高めるための方法を学びましょう。

    Zoho CRM Training



              Zoho Desk Resources

              • Desk Community Learning Series


              • Digest


              • Functions


              • Meetups


              • Kbase


              • Resources


              • Glossary


              • Desk Marketplace


              • MVP Corner


              • Word of the Day









                                Resources

                                Videos

                                Watch comprehensive videos on features and other important topics that will help you master Zoho CRM.



                                eBooks

                                Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho CRM.



                                Webinars

                                Sign up for our webinars and learn the Zoho CRM basics, from customization to sales force automation and more.



                                CRM Tips

                                Make the most of Zoho CRM with these useful tips.