Zoho ConnectにおけるCSSのカスタマイズ
概要
独自CSS機能を使用すると、Zoho Connectの色やフォントをカスタマイズできるため、ユーザーに好印象を与えることができます。 独自CSSを有効にすると、設定したスタイルがネットワークのすべてのユーザーに適用されます。ただし、ユーザーは個人用のデザインとして、初期設定のスタイルを選択することも可能です。
Zoho Connectの独自CSSではどのようなカスタマイズができますか？
Zoho Connectの独自CSS機能を使用すると、メニューの色、背景、フォントなどの要素を企業のブランドイメージに合わせて、カスタマイズできます。
独自CSSが適用される場所を確認するには、以下の画像をご参照ください。
独自CSSを有効化できるユーザーは？
独自CSSを有効にしたり、変更したりできるのは、ネットワーク管理者のみです。
独自CSSを有効化するには？
-
画面右側のメニューから［設定］をクリックします。
-
［カスタマイズ］の欄にある［独自CSS］をクリックします。
-
CSSファイルをアップロード するか（1）、CSSエディターにコードを入力し（2）、［保存する］をクリックします。
-
設定完了後、［独自CSSを有効にする］ボタンをクリックし、変更を適用します。
CSSの知識がなくてもZoho Connectのデザインをカスタマイズできますか？
CSSのコーディングに詳しくない場合は、Zoho Connectのサポート窓口にお問い合わせください。サポート窓口でカスタマイズの要件をヒアリングし、企業のブランドイメージに合わせたCSSのカスタマイズをお手伝いします。
以下は、カラーコードとスタイルを変更して画面のデザインをカスタマイズするためのCSSコードのサンプルです。
- body.theme1,body.theme2,body.theme3,body.theme4,body.theme5{
- /*link color*/
- --linkPrimary: #5A35B1;
- /*name text color*/
- --primaryThemeColor: #5A35B1;
- /*left menu apps bar cont color*/
- --leftAppsContColor: #27293d;
- /*left menu apps icon and text color*/
- --leftAppsIconColor:rgba(255, 255, 255, 0.7);
- /*left menu apps icon and text hover color */
- --leftAppsIconHoverColor:#fff;
- /*left menu apps active icon and text color */
- --leftAppsSelectedIconColor:#fff;
- /*left menu apps hover color */
- --leftnavOptionHoverColor:rgba(255,255,255,0.08);
- /* left menu apps current bg */
- --leftAppsSelectedBG: #5A35B1;
- /*left menu nav list cont color */
- --leftNavContColor:#fff;
- /* left menu nav list color */
- --leftNavListItemColor:#000;
- /* left menu nav listing hover */
- --leftNavListItemHoverColor:#efebf7;
- /* left menu nav list active color*/
- --leftNavListItemSelected: #5A35B1;
- /* left menu apps shrinkMenu footer*/
- --leftAppsContFooterColor:#27293d;
- /* left menu nav list footer option*/
- --leftContNewOption: #efebf7;
- --leftContNewOptionTxt: #5A35B1;
- /** left menu nav list Icon bg color **/
- --leftNavListHeadingIconBg:#F5F5F5;
- /** left menu nav list Icon color **/
- --leftNavListHeadingIconColor:#939393;
- /** left menu nav list Icon bg hover color **/
- --leftNavListHeadingIconHoverBg:#e3e8ee;
- /** left menu nav list Icon hover color **/
- --leftNavListHeadingIconhoverColor:#7f7e7e;
- /* submit button color */
- --submitButtonColor: #5A35B1;
- /*submit button darken*/
- --submitButtonDarkColor:#51309f;
- /* fade link color and blockquotes bg color */
- --submitButtonColorRBG5:#efebf7;
- /* menu hover color and fade of link color*/
- --menuHoverColor: #efebf7;
- /* menu hover backgroundcolor*/
- --menuHoverColorDark: #cec2e8;
- /** White bg color **/
- --bgwhitewhenNightmode:#ffffff;
- /** Loading color **/
- --leftNavListItemColorLoading:#120b23;
- --leftAppsIconColorLoading:#090512;
- &.nightMode{
- /* left menu nav list footer option*/
- --leftContNewOption: rgba(90,53,177,0.24);
- }
- }
CSSをダウンロードするには？
独自CSSのタブで、CSSエディターの［出力する］をクリックすると、CSSファイルがダウンロードされます。
独自CSSを使用すると、ネットワークの外観を変更できるため、ユーザーによりプロフェッショナルな印象を与えることができます。
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
Zoho ConnectでのZoho Deskタスク連携
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 概要 Zoho Desk のタスクを Zoho Connect 内から直接管理できるため、複数のタブやアプリを切り替えることなく、1 か所で顧客対応やチームの作業をまとめて処理できます。 この連携とは？ この連携を使用すると、Zoho Connect 内で Zoho Desk ...組織向けにリブランドしたConnect iOSアプリの作成と公開方法
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 概要 Zoho Connect では、自社向けのリブランド版アプリを作成できます。本ガイドでは、リブランドした iOS アプリを App Store で公開するために必要な前提条件について説明します。 ロゴおよびブランディング要件 ...組織向けにリブランドしたConnect Androidアプリの作成と公開方法
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 概要 Zoho Connect では、自社向けのリブランド版アプリを作成できます。本ガイドでは、リブランドした Android アプリを Play ストアで公開するために必要な前提条件について説明します。 1. アプリの基本情報 ...ビデオタウンホールへの参加者としての参加方法
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 概要 Video Town Hallin Zoho 接続は、重要な会話に参加したり、自分の意見を共有したり、チームや組織と交流したりできるスペースです。本ガイドでは、参加者としてできることをすべて説明します。 ビデオタウンホールへの参加方法 ...ビデオタウンホールの作成とホスティング
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。 概要 Zoho 接続のVideo Town Hall機能を利用すると、組織は従業員やコミュニティメンバー向けに効果的なビデオセッションを開催できます。全社的なアップデート、トレーニング、Q&A、インタラクティブなディスカッションなどに最適です。 本ガイドでは、Video Town ...