Zoho SalesIQにおける独自のCSS

Zoho SalesIQにおける独自のCSS

独自のCSSの概要

Zoho SalesIQでは、コードを書かなくてもチャットウィジェットやチャットウィンドウの外観を簡単にカスタマイズできます（標準的なカスタマイズは［設定］→［ブランド］→［（ブランド名）］→［カスタマイズ］に移動することで可能です）。一方で、CSSのコードを使用して、チャットウィンドウのデザインをより詳細に指定したい場合もあるでしょう。そのような場合は、独自のCSSファイルをアップロードしてデザインをカスタマイズすることもできます。CSSファイルのアップロードは、［設定］→［ブランド］→［（ブランド名）］→［カスタマイズ］→［外観］に移動し、ページの中ほどにある［独自のCSSファイル］のアップロード用ボタンから可能です。

以下では、各要素に対応するCSSのコードをご紹介します。CSSファイルに以下のコードを設定することで、要素ごとに細かくデザインを指定できます。たとえば、チャットウィンドウのヘッダーのデザインや、メッセージ入力欄の枠線や背景色、文字のサイズや色などを変更できます。 


チャットウィンドウのヘッダー

チャットウィンドウのヘッダーのデザインを変更するには以下のコードを使用します。

CSS：
  1. header
  2. {
  3. }

例：

  1. header {
  2. height: 80px !important
  3. }

チャットウィンドウのヘッダー内のロゴを変更するには以下のコードを使用します。ウィンドウに合わせてロゴの幅と高さを指定することもできます。 

CSS：
  1. .siq-company-logo
  2. {
  3. }

例：

  1. .siq-company-logo {
  2. border-radius: 15px !important
  3. }

チャットの対応担当者の名前

対応担当者の名前欄の文字の色やフォントを変更するには以下のコードを使用します。

CSS：
  1. .siq-chat-attender-name 
  2. {
  3. }

例：

  1. .siq-chat-attender-name {
  2. color: black !important;
  3. }

チャットの対応担当者の説明

対応担当者に関する説明欄の文字の色やフォントを変更するには以下のコードを使用します。

CSS：
  1. .siq-about-me
  2. {
  3. }

例：

  1. .siq-about-me{ 
  2. color: darkgray !important;
  3. }

チャットウィンドウの［x］（閉じる）アイコン

チャットウィンドウを閉じるためのアイコンのデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-close-icon:before
  2. {
  3. }

例：

  1. .siq-close-icon:before { 
  2. color: black !important;
  3. }

チャットウィンドウのフッターの背景色などのデザインを変更するには以下のコードを使用します。

CSS：
  1. footer
  2. {
  3. }

例：

  1. footer {
  2. background-color: lightgray !important;
  3. }

メッセージの送信ボタン 

メッセージの送信ボタンの色などを変更するには以下のコードを使用します。

CSS：
  1. .siq-send-button,
  2. .siq-send-button:before{
  3. }

例：

  1. .siq-send-button,
  2. .siq-send-button:before {
  3. color: green !important;
  4. }

チャットウィンドウの最小化アイコン

チャットウィンドウの最小化アイコンのデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-minimize-icon:before
  2. {
  3. }

例：

  1. .siq-minimize-icon:before { 
  2. color: black !important;
  3. }

メールマガジンの登録欄

チャットウィジェットの下部にあるメールマガジンの登録欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-newsletter
  2. {
  3. }

例：

  1. .siq-newsletter {
  2. background: #ccc !important;
  3. }

チェックボックス（メールマガジンの登録欄）

メールマガジンの登録欄にあるチェックボックスの色などのデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-checkbox
  2. {
  3. }

例：

  1. .siq-checkbox {
  2. color: cadetblue !important;
  3. }

テキスト（メールマガジンの登録欄）

メールマガジンの登録欄にあるテキストのデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-checkbox-label em
  2. {
  3. }

例：

  1. .siq-checkbox-label em {
  2. color: red !important;
  3. }

メッセージ欄

メッセージ欄全体のデザインを変更するには以下のコードを使用します。たとえば、文字の色や大きさ、フォントを指定することが可能です。 

CSS：
  1. .siq_content
  2. {
  3. }

例：

  1. .siq_content {
  2. background: #dedede57 !important;
  3. }

メッセージ入力欄

メッセージ入力欄のデザインを変更するには以下のコードを使用します。 

CSS：
  1. .siq-message-textarea
  2. {
  3. }

例：

  1. .siq-message-textarea {
  2. background: #eee !important;
  3. }

対応担当者の入力ステータス

チャットのやりとりにおいて、対応担当者がメッセージ入力欄にテキストを入力すると、訪問者のメッセージ入力欄上に、担当者がテキストを入力中であることを知らせるメッセージが表示されます。このメッセージ（入力ステータス）の表示欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-typing-message
  2. {
  3. }

例：

  1. .siq-typing-message {
  2. color: darkgray !important;
  3. }

メッセージ入力欄の操作メニュー

メッセージ入力欄の操作メニューのデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-menu:before
  2. {
  3. }

例：

  1. .siq-menu:before {
  2. color: gray !important;
  3. }

チャット終了ボタン

メッセージ入力欄の右上にあるチャット終了ボタンのデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-end-chat-button:before
  2. {
  3. }

例：

  1. .siq-end-chat-button:before {
  2. color: gray !important;
  3. }

絵文字の選択欄

メッセージ入力欄の絵文字アイコンをクリックすると、絵文字の選択欄が表示されます。この絵文字の選択欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-smileys-section
  2. {
  3. }

例：

  1. .siq-smileys-section { 
  2. background: #eee !important;
  3. }

個別の絵文字

個別の絵文字の表示方法を変更するには以下のコードを使用します。

CSS：
  1. .siq-smileys
  2. {
  3. }

例：

  1. .siq-smileys { 
  2. background: #eee !important;
  3. }

絵文字アイコン

メッセージ欄の絵文字アイコンの表示方法を変更するには以下のコードを使用します。

CSS：
  1. .siq-smiley-icon
  2. {
  3. }

例：

  1. .siq-smiley-icon { 
  2. box-shadow: 0 0 1px !important;
  3. border-radius: 5px !important;
  4. }

URLの共有に関するメッセージ欄

URLの共有に関するメッセージ欄のデザイン（文字のフォントやフォントサイズなど）を変更するには以下のコードを使用します。

CSS：
  1. .siq-share-url
  2. {
  3. }

例：

  1. .siq-share-url { 
  2. color: red !important;
  3. }

訪問者に関する情報の入力欄

訪問者に関する情報の入力欄のデザインを変更するには以下のコードを使用します。



選択リスト（訪問者に関する情報の入力欄）

部門を選択するための選択リストのデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-dropdown
  2. {
  3. }

例：

  1. .siq-dropdown {
  2. background-color: #d6c8c8 !important;
  3. }

1行テキスト（訪問者に関する情報の入力欄）

1行テキストの入力欄（名前やメールアドレスといった情報を入力するための欄）のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-input-text-box
  2. {
  3. }

例：

  1. .siq-input-text-box {
  2. color: darkgray !important;
  3. }

複数行テキスト（訪問者に関する情報の入力欄）

複数行テキストの入力欄（顧客が質問や要望などを入力するための欄）のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-message-area
  2. {
  3. }

例：

  1. .siq-message-area {
  2. border-radius: 30px !important;
  3. overflow: hidden !important;
  4. }

キャンセルボタン（訪問者に関する情報の入力欄）

訪問者に関する情報の入力欄に表示されるキャンセルボタンのデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-cancel-button
  2. {
  3. }

例：

  1. .siq-cancel-button { 
  2. background-color: red !important;
  3. color: #fff !important;
  4. }

更新ボタン（訪問者に関する情報の入力欄）

訪問者に関する情報の入力欄に表示される更新ボタンのデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-update-button
  2. {
  3. }

例：

  1. .siq-update-button { 
  2. background-color: green !important;
  3. }

必須項目（訪問者に関する情報の入力欄）

必須項目のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-required
  2. {
  3. }

例：

  1. .siq-required { 
  2. border-color: green !important;
  3. }

評価とフィードバックの画面

評価とフィードバックの画面のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-feedback-section
  2. {
  3. }

例：

  1. .siq-feedback-section { 
  2. background: #eee !important;
  3. }

チャットの評価アイコン

チャットの評価アイコンのデザインを変更するには以下のコードを使用します。

CSS：
  1. body .reaction_ico {}

例：

  1. body .reaction_ico {
  2.     background-image: url (https://img.zohocdn.com/salesiq/images/reactions_36f94_.png) !important;
  3. }
  4. .sad_icon {
  5.     background-position: 0 0 !important;
  6. }
  7. .happy_icon {
  8.     background-position: -88px 0 !important;
  9. }
  10. .neutral_icon {
  11.     background-position: -44px 0 !important;
  12. }


フィードバックのテキスト入力欄

フィードバックのテキスト入力欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-feedback-textarea
  2. {
  3. }

例：

  1. .siq-feedback-textarea { 
  2. box-shadow: 0 0 13px #c7a8a8 !important;
  3. }

情報バナー

チャットウィンドウ上部の情報バナーのデザインを変更するには以下のコードを使用します。この情報バナーには、担当者の対応可否に関する情報などが表示されます。

CSS：
  1. .siq-info-banner
  2. {
  3. }

例：

  1. .siq-info-banner { 
  2. color: red !important;
  3. }

タイマー（情報バナー）

情報バナー上に表示されるタイマーのデザインを変更するには以下のコードを使用します。このタイマーには、担当者を案内するまでの待機時間が表示されます。

CSS：
  1. .siq-info-timer,
  2. .siq-info-timer:before {
  3. }

例：

  1. .siq-info-timer,
  2. .siq-info-timer:before {
  3. color: gray !important;
  4. }

情報欄

チャット画面の情報欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-info-message
  2. {
  3. }

例：

  1. .siq-info-message { 
  2. color: darkgray !important;
  3. }

メール送信欄

メール送信欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-send-email-section
  2. {
  3. }

例：

  1. .siq-send-email-section { 
  2. box-shadow: 0 0 20px #988d8d !important;
  3. }

メール送信時のテキスト入力欄

メール送信時のテキスト入力欄のデザイン（フォントのサイズや色など）を変更するには以下のコードを使用します。

CSS：
  1. .siq-send-email-input
  2. {
  3. }

例：

  1. .siq-send-email-input { 
  2. color: #7d2222 !important;
  3. }

対応担当者のメッセージ欄

対応担当者のメッセージ欄全体のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-agntmsg
  2. {
  3. }

例：

  1. .siq-agntmsg { 
  2. background: #eee !important;
  3. border-radius: 10px !important;
  4. }

対応担当者の名前（メッセージ欄）

対応担当者の名前欄について、文字のフォント、サイズ、色などを変更するには以下のコードを使用します。

CSS：
  1. .siq-user-name
  2. {
  3. }

例：

  1. .siq-user-name { 
  2. color: darkgray !important;
  3. }

対応担当者のメッセージ

対応担当者のメッセージ欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-user-message
  2. {
  3. }

例：

  1. .siq-user-message { 
  2. color: #00b3ff !important;
  3. }

訪問者のメッセージ欄

訪問者のメッセージ欄全体のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-visitmsg
  2. {
  3. }

例：

  1. .siq-visitmsg{ 
  2. background-color: #eee !important;
  3. }

訪問者のメッセージ送信日時

訪問者のメッセージ送信日時の表示欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-message-time
  2. {
  3. }

例：

  1. .siq-message-time { 
  2. color: #312727 !important;
  3. }

訪問者の名前（メッセージ欄）

訪問者の名前欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-visitor-name
  2. {
  3. }

例：

  1. .siq-visitor-name { 
  2. color: darkgray !important;
  3. }

訪問者のメッセージ

訪問者のメッセージ欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-visitor-message
  2. {
  3. }

例：

  1. .siq-visitor-message { 
  2. color: aqua !important;
  3. }

添付ファイル（アップロードしたファイル）

添付ファイル（アップロードしたファイル）の表示欄の枠線などのデザインを変更するには以下のコードを使用します。

CSS：

  1. .siq-file-attach
  2. {
  3. }

例：

  1. .siq-file-attach{ 
  2. height: "100px",
  3. }

チャットウィンドウで添付（アップロード）したファイル

添付（アップロード）したファイルの表示欄の枠線などのデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-file-icon
  2. {
  3. }

例：

  1. .siq-file-icon { 
  2. background-color: #5d8db3 !important;
  3. }

チャットウィンドウで添付（アップロード）した画像

添付（アップロード）した画像の表示欄の枠線やフィルター効果などのデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-attach_image
  2. {
  3. }

例：

  1. .siq-attach_image { 
  2. filter: grayscale(1) !important;
  3. }

画像の選択欄

画像の選択欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-dragdrop-mask
  2. {
  3. }

例：

  1. .siq-dragdrop-mask { 
  2. background-color: #eee !important;
  3. padding-top: 8px !important;
  4. }

画像のコメント入力欄

画像に関するコメントの入力欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-comment-textarea
  2. {
  3. }

例：

  1. .siq-comment-textarea { 
  2. background-color: #eee !important;
  3. }

画像のプレビュー

画像のプレビューの表示欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-image-preview
  2. {
  3. }

例：

  1. .siq-image-preview { 
  2. box-shadow: 0 0 21px #a2a2a2 !important;
  3. }

画像のアップロード

アップロード中の画像の表示欄のデザインを変更するには以下のコードを使用します。

CSS：
  1. .siq-file-progress
  2. {
  3. }

例：

  1. .siq-file-progress { 
  2. box-shadow: 0px 0 21px #e0b8b8 !important;
  3. }


    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






                        Latest Feature Updates



                                • Related Articles

                                • Zoho Analytics

                                  概要 Zoho Analyticsとは Zoho Analyticsを使用すると、データを集約し、レポートやダッシュボードを作成して、さまざまな角度からデータを可視化して分析できます。 Zoho AnalyticsとZoho SalesIQの連携： Zoho AnalyticsとZoho SalesIQを連携すると、Webサイトにアクセスした訪問者に関するデータを迅速かつ効率的に分析できます。分析した訪問者情報を基づいて、より有望な見込み客を絞り込むことができます。  Zoho ...

                                • Zoho Desk

                                  概要 Zoho Deskとは Zoho Deskは、顧客サポートやカスタマーサクセスを支援するクラウドサービスです。Zoho Deskを使用すると、複数の部門間で顧客情報を共有しながら問い合わせを一元管理できます。また、顧客用ポータルでよくある質問（FAQ）や参考情報を公開することで、自己解決を促し、解決スピードや顧客満足度を向上させることができます。 Zoho SalesIQとZoho Deskの連携 Zoho Deskの顧客サポート機能に、Zoho ...

                                • Zoho CRM

                                  概要 Zoho CRMとは Zoho CRMでは、営業、マーケティング、顧客サポートの業務をまとめて管理できます。業務に関するデータやプロセス、担当者に関する情報を一元管理できます。 Zoho SalesIQとZoho CRMの連携 チャットを通じて、顧客をリアルタイムにサポートでき、顧客満足度を向上できます。  Zoho SalesIQとZoho CRMを連携すると、顧客データを一元管理できます。既存のZoho CRMアカウントにZoho ...

                                • Zoho Campaigns

                                  概要 Zoho CampaignsをZoho SalesIQに連携すると、キャンペーンメールからWebサイトにアクセスした訪問者の行動履歴を把握できます。Zoho Campaignsで配信したキャンペーンメールを追跡し、メールからWebサイトにアクセスした訪問者の行動を、Zoho ...

                                • Zoho Assist

                                  概要 Zoho Assistとは Zoho Assistは、クラウド型の遠隔サポートおよびリモートアクセス用のソフトウェアです。Webブラウザーを使用して遠隔サポートのセッションを実行でき、離れた場所からでも簡単に顧客をサポートできます。離れた場所にあるPC、ノートPC、モバイルデバイス、サーバーを簡単に管理できます。すばやく安全に顧客の環境にアクセスして、遠隔からサポートすることが可能です。 Zoho AssistとZoho SalesIQの連携メリット： ...

                                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.