Zoho ConnectにおけるCSSのカスタマイズ

Zoho ConnectにおけるCSSのカスタマイズ

概要  
独自CSS機能を使用すると、Zoho Connectの色やフォントをカスタマイズできるため、ユーザーに好印象を与えることができます。 独自CSSを有効にすると、設定したスタイルがネットワークのすべてのユーザーに適用されます。ただし、ユーザーは個人用のデザインとして、初期設定のスタイルを選択することも可能です。
 

Zoho Connectの独自CSSではどのようなカスタマイズができますか？  

Zoho Connectの独自CSS機能を使用すると、メニューの色、背景、フォントなどの要素を企業のブランドイメージに合わせて、カスタマイズできます。

独自CSSが適用される場所を確認するには、以下の画像をご参照ください。

 

独自CSSを有効化できるユーザーは？  

独自CSSを有効にしたり、変更したりできるのは、ネットワーク管理者のみです。
 

独自CSSを有効化するには？  

  1. 画面右側のメニューから［設定］をクリックします。



  2. ［カスタマイズ］の欄にある［独自CSS］をクリックします。



  3. CSSファイルをアップロード するか（1）、CSSエディターにコードを入力し（2）、［保存する］をクリックします。　　



  4. 設定完了後、［独自CSSを有効にする］ボタンをクリックし、変更を適用します。　　


 

CSSの知識がなくてもZoho Connectのデザインをカスタマイズできますか？

CSSのコーディングに詳しくない場合は、Zoho Connectのサポート窓口にお問い合わせください。サポート窓口でカスタマイズの要件をヒアリングし、企業のブランドイメージに合わせたCSSのカスタマイズをお手伝いします。

以下は、カラーコードとスタイルを変更して画面のデザインをカスタマイズするためのCSSコードのサンプルです。
 
  1. body.theme1,body.theme2,body.theme3,body.theme4,body.theme5{
  2.     /*link color*/
  3.     --linkPrimary: #5A35B1;
  4.     /*name text color*/
  5.     --primaryThemeColor: #5A35B1;
  6.     /*left menu apps bar cont color*/
  7.     --leftAppsContColor: #27293d;
  8.     /*left menu apps icon and text color*/
  9.     --leftAppsIconColor:rgba(255, 255, 255, 0.7);
  10.     /*left menu apps icon and text hover color */
  11.     --leftAppsIconHoverColor:#fff;
  12.     /*left menu apps active icon and text color */
  13.     --leftAppsSelectedIconColor:#fff;
  14.     /*left menu apps hover color */
  15.     --leftnavOptionHoverColor:rgba(255,255,255,0.08);
  16.     /* left menu apps current bg */
  17.     --leftAppsSelectedBG: #5A35B1;
  18.     /*left menu nav list cont color */
  19.     --leftNavContColor:#fff;
  20.     /* left menu nav list color */
  21.     --leftNavListItemColor:#000;
  22.     /* left menu nav listing hover */
  23.     --leftNavListItemHoverColor:#efebf7;
  24.     /* left menu nav list active color*/
  25.     --leftNavListItemSelected: #5A35B1;
  26.     /* left menu apps shrinkMenu footer*/  
  27.     --leftAppsContFooterColor:#27293d;
  28.     /* left menu nav list footer option*/
  29.     --leftContNewOption: #efebf7;
  30.     --leftContNewOptionTxt: #5A35B1;
  31.     /** left menu nav list Icon bg color **/
  32.     --leftNavListHeadingIconBg:#F5F5F5;
  33.     /** left menu nav list Icon color **/
  34.     --leftNavListHeadingIconColor:#939393;
  35.     /** left menu nav list Icon bg hover color **/
  36.     --leftNavListHeadingIconHoverBg:#e3e8ee;
  37.     /** left menu nav list Icon hover color **/
  38.     --leftNavListHeadingIconhoverColor:#7f7e7e;
  39.     /* submit button color */
  40.     --submitButtonColor: #5A35B1;
  41.     /*submit button darken*/
  42.     --submitButtonDarkColor:#51309f;
  43.     /* fade link color and blockquotes bg color */
  44.     --submitButtonColorRBG5:#efebf7;
  45.     /* menu hover color and fade of link color*/    
  46.     --menuHoverColor: #efebf7;
  47.     /* menu hover backgroundcolor*/    
  48.     --menuHoverColorDark: #cec2e8;
  49.     /** White bg color **/
  50.     --bgwhitewhenNightmode:#ffffff;
  51.     /** Loading color **/
  52.     --leftNavListItemColorLoading:#120b23;
  53.     --leftAppsIconColorLoading:#090512;
  54.     &.nightMode{
  55.         /* left menu nav list footer option*/
  56.         --leftContNewOption: rgba(90,53,177,0.24);
  57.     }
  58. }

CSSをダウンロードするには？  

独自CSSのタブで、CSSエディターの［出力する］をクリックすると、CSSファイルがダウンロードされます。



独自CSSを使用すると、ネットワークの外観を変更できるため、ユーザーによりプロフェッショナルな印象を与えることができます。

独自CSSの設定を行う際に問題が発生した場合は、support@zohoconnect.comにお問い合わせください。

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

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

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

    Zoho CRM Training



              Zoho Campaigns Resources

                Zoho WorkDrive Resources




                  • Desk Community Learning Series


                  • Digest


                  • Functions


                  • Meetups


                  • Kbase


                  • Resources


                  • Glossary


                  • Desk Marketplace


                  • MVP Corner


                  • Word of the Day


                  • Ask the Experts






                          Latest Feature Updates



                                  • Related Articles

                                  • Zoho Connectの概要

                                    Zoho Connectは、チームワークを強化し、スムーズなコラボレーションを実現するクラウド型プラットフォームです。スタートアップから大手企業まで、あらゆる規模の企業のチームメンバーや社員が効率的に共同作業を行うために必要なすべての機能を備えています。 Zoho Connectとは Zoho ...

                                  • Zoho ConnectのTrello連携

                                    概要 Zoho ConnectをTrelloと連携することで、タスクやプロジェクトを効率的に管理できます。これにより、TrelloのボードをZoho Connectのグループやボードに連携させ、すべてのタスクを一元管理できます。 Trelloとの連携の有効化 画面右側のメニューから、［連携］に移動します。 連携の設定ページから、［Trello］をクリックします。 ［設定を追加する］クリックします。 ...

                                  • Zoho ConnectのZoom連携

                                    この機能を利用できるプラン 概要 Zoho Connectには、Zoomとの連携機能が標準で用意されています。連携により、Zoomで開催するミーティングの予定をZoho Connectから作成できます。 Zoomとは Zoomは、幅広く利用されているビデオ会議／オンラインミーティングのサービスです。ZoomとZoho Connectを連携すると、Zoomで開催するミーティングの予定をZoho Connectから作成することが可能です。 連携のメリット Zoho ...

                                  • Zoho ConnectのEkincare連携

                                    利用可能なプラン 概要 Ekincareは、企業の従業員に対して健康管理や医療サービスを提供するサービスです。インド国内の企業で利用されています。Zoho ConnectをEkincareと連携すると、従業員はZoho Connect内からEkincareにアクセスし、医療サービスや健康増進サービスの管理を行うことができます。 Ekincareを利用できるユーザー 管理者がEkincareとの連携を有効にすると、すべてのユーザーがZoho ...

                                  • Zoho ConnectのMicrosoft Teams連携

                                    この機能を利用できるプラン 概要 Zoho Connectには、Microsoft Teamsとの連携機能が標準で用意されています。連携により、Microsoft Teamsで開催する会議（ミーティング）の予定をZoho Connectから登録できます。 Microsoft Teamsとは Microsoft Teamsは、チャット、ビデオ会議、ファイル共有などをはじめとする機能を備えた、コミュニケーションに役立つサービスです。 連携のメリット Zoho ...

                                  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.