IntercomウィジェットのCSSカスタマイズガイド | ブランド統一とUX向上

2026年6月28日

Contents

1 IntercomウィジェットのCSSカスタマイズとは
2 IntercomウィジェットのCSSにアクセスする方法
- 2.1 ブラウザ開発ツールによるセレクタ特定
- 2.2 カスタムCSSの注入手順
3 カスタムスタイルをIntercomウィジェットに適用する手順
- 3.1 デフォルトスタイルの上書き方法
- 3.2 data-intercom属性の活用例
4 レスポンシブデザインに対応したカスタマイズ方法
- 4.1 メディアクエリの活用法
- 4.2 CSS変数による柔軟な調整
5 旧バージョン対応のCSS戦略
- 5.1 ベンダープレフィックスの必要性
- 5.2 Feature Detectionによる対応
6 即日実装可能なカスタマイズコード一覧
- 6.1 セレクタ一覧
- 6.2 よくあるエラー回避策

スポンサードリンク

IntercomウィジェットのCSSカスタマイズとは

IntercomのチャットウィジェットをCSSでカスタマイズすることは、ブランドイメージの一貫性やユーザー体験向上に直結します。特に企業サイトでは、チャットボタンのデザインがサイト全体のUIと統一されているかが重要なポイントです。本記事では、「Intercom カスタムCSS」や「チャットボタンデザイン変更」などキーワードを含めながら、Intercom公式ドキュメントに基づいた具体的な手順を解説します。

IntercomウィジェットのCSSにアクセスする方法

IntercomのチャットウィジェットはJavaScriptで動的に生成されるため、CSSセレクタを特定するにはブラウザ開発ツールの活用が必須です。

ブラウザ開発ツールによるセレクタ特定

DevToolsを開く
ChromeなどでのF12キー押下でコンソールを開き、Intercomウィジェットをクリックして要素を選択します。
セレクタの確認
代表的なセレクタには.intercom-lightweight-appLauncher（アイコン）、.intercom-MessageList（メッセージリスト）などがあります。

ブラウザの「Elements」タブで選択した要素の属性を確認し、必要なセレクタを特定する手順は、Intercom公式ドキュメントでも推奨されている方法です。

カスタムCSSの注入手順

Intercomアカウント内での設定
ダッシュボードの「Settings」→「Customization」→「Chat widget」からCSSを直接入力可能です。
外部CDNや独自ドメインでの注入
<style>タグで定義したCSSファイルを読み込む方法も有効です。

カスタムスタイルをIntercomウィジェットに適用する手順

デフォルトのスタイルを上書きする際は、セレクタの特異度（specificity）に注意が必要です。以下に代表的なカスタマイズ例を示します。

デフォルトスタイルの上書き方法

.intercom-lightweight-appLauncher {
  background-color: #007BFF; /* ボタンの背景色変更 */
  border-radius: 12px; /* 角丸設定 */
}

.intercom-lightweight-appLauncher {

background-color: #007BFF; /* ボタンの背景色変更 */

border-radius: 12px; /* 角丸設定 */

}

data-intercom属性の活用例

Intercomはdata-intercom属性を介して動的要素を制御できます。例えば、特定の状態でスタイルを変更する場合：

[data-intercom=&quot;message-count-1&quot;] {
  color: red; /* メッセージ数が1件のときのテキスト色 */
}

[data-intercom="message-count-1"] {

color: red; /* メッセージ数が1件のときのテキスト色 */

}

レスポンシブデザインに対応したカスタマイズ方法

モバイルやデスクトップでの表示を調整するには、メディアクエリとCSS変数を活用します。

メディアクエリの活用法

@media (max-width: 768px) {
  .intercom-MessageList {
    width: 100%;
    max-height: 400px;
  }
}

@media (max-width: 768px) {

.intercom-MessageList {

width: 100%;

max-height: 400px;

}

注意: max-widthの値はデバイスの種類（タブレット・モバイル）に応じて柔軟性を持たせることを推奨します。

CSS変数による柔軟な調整

:root {
  --primary-color: #2ECC71;
}

.intercom-lightweight-appLauncher {
  background-color: var(--primary-color);
}

:root {

--primary-color: #2ECC71;

}

.intercom-lightweight-appLauncher {

background-color: var(--primary-color);

}

変数を定義することで、デザインの統一やグローバルな変更が容易になります。

旧バージョン対応のCSS戦略

最新ブラウザで動作するCSSも、旧バージョン対応は必要です。

ベンダープレフィックスの必要性

-webkit-（Safari）、-moz-（Firefox）などのプレフィックスが必要なプロパティは公式ドキュメントを参照し、適切に追加します。
例: transform: scale(1.2); → -webkit-transform: scale(1.2);

Feature Detectionによる対応

@supports (display: grid) {
  .intercom-MessageList {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@supports (display: grid) {

.intercom-MessageList {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}

Intercom公式ドキュメント（公式リンク）では、旧バージョン対応の実装例も記載されています。

即日実装可能なカスタマイズコード一覧

以下は記事で紹介したセレクタ一覧と、よくあるエラー回避策です。

セレクタ一覧

セレクタ	対象要素	用途
`.intercom-lightweight-appLauncher`	チャットボタンアイコン	背景色や角丸設定
`.intercom-MessageList`	メッセージリスト	表示幅・高さ調整
`[data-intercom="message-count-1"]`	未読メッセージカウント	テキスト色変更

よくあるエラー回避策

特異度の競合: .intercom-lightweight-appLauncherに!importantをつけることで、デフォルトスタイルを上書きできます。
CSSの読み込み順: Intercomのスクリプトが読み込まれる前にカスタムCSSを注入しないと反映されません。

/* エラー例（無効） */
.intercom-lightweight-appLauncher {
  background-color: red;
}

/* 修正例 */
.intercom-lightweight-appLauncher {
  background-color: red !important;
}

/* エラー例（無効） */

.intercom-lightweight-appLauncher {

background-color: red;

}

/* 修正例 */

.intercom-lightweight-appLauncher {

background-color: red !important;

}

CTA: 記事内のコードサンプルを元に、自社サイトのIntercomウィジェットを即日カスタマイズしてみよう。
※本記事ではIntercom v3.x以降での実装例を採用していますが、最新バージョンとの整合性は公式ドキュメントで確認してください。

スポンサードリンク