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









                                • Related Articles

                                • Zoho PeopleとZoho Connectの連携

                                  Zoho Peopleとは Zoho Peopleとは、従業員のデータを1か所でまとめて管理できるオンラインの人事労務管理システムです。Zoho Peopleとの連携機能を利用すると、ユーザーのプロフィール、役職、部署、勤務場所などの人事情報をZoho PeopleからZoho Connectに同期できます。 連携のメリット 連携によって、Zoho Peopleに登録されているすべての部署と役職をもとに、Zoho Connectのグループを作成できます。Zoho ...
                                • Zoho SprintsとZoho Connectの連携

                                  Zoho Sprintsとは Zoho Sprintsとは、アジャイルチーム(アイデアや課題から素早く製品リリースにつなげることを目指すチーム)がタスクなどを効率的に計画、管理するためのサービスです。スプリントとして短い期間を設定して、やるべきことをストーリー、タスク、バグ(課題)などとして登録し、優先度の高いものから集中的に作業します。短期的な目標を繰り返し設定することで、状況に応じて軌道修正を行いながら、素早く成果を生み出すことができます。 Zoho Sprintsの連携を利用できるユーザー ...
                                • Zoho NotebookとZoho Connectの連携

                                  概要 Zoho Notebookは、メモとして書き留めたい内容をクラウド上に安全に保管できるメモ帳アプリです。クラウド上で同期されるため、保存したメモには複数のデバイスからアクセス可能です。Zoho Connectでメモ機能を利用すると、投稿、フォーラム、マニュアル、タスク、予定、質疑応答などについてのメモをZoho Connectの画面からZoho Notebook上に作成できます。作成したメモは、Zoho Notebookのアカウントに自動で同期されます。 Zoho ...
                                • Zoho MeetingとZoho Connectの連携

                                  Zoho Meetingとは Zoho Meetingは、音声/ビデオ通話によってミーティングなどを開催できるオンライン会議ツールです。ミーティングをしながら、画面共有やチャットなどの機能も利用できます。Zoho ConnectでZoho Meetingの連携を利用すると、Zoho ConnectのネットワークやグループのメンバーとZoho Meetingを用いたオンラインミーティングを開始できます。 Zoho Meetingの連携を有効/無効にする方法 Zoho ...
                                • Zoho ShowTimeとZoho Connectの連携

                                  Zoho ShowTimeとは Zoho ShowTimeとは、オンライン上でプレゼンテーションを行うことのできるツールです。Zoho ShowTimeを利用すると、離れた場所にいるメンバーに対してもセミナーやトレーニング、研修を実施でき、セッションの終了後に参加者からフィードバックをもらうことができます。また、セッションでは、簡単なクイズやアンケート、チャット、画面共有、ホワイトボードなどの機能を利用して、参加者とやりとりできます。 Zoho Connectと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.