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にお問い合わせください。