【X・Twitter】自分が送ったチャット(DM)の背景色を変更するCSS

2025年12月16日X(旧Twitter)

この記事では、PCウェブサイト版「X（旧Twitter）」のチャットで、自分が送信したメッセージの背景色を好きな色に変更するCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

PC版X（旧Twitter）のチャット背景色を暗めの青とLINEの緑色にした比較画像

2025年11月頃から段階的に「X（旧Twitter）」の従来のDM機能が廃止され、新しくチャットというのが始まりました。

なぜか僕の環境だとPC版の背景色がおかしかったです。過去送信した自分のチャットの背景色は白で文字が黒なのに対して、最近送ったメッセージは青背景に白文字と統一性がないです。なぜかは不明です。

PC版X（旧Twitter）のチャット背景色がなぜか白と青で別々になっている画像

CSSを使うことで自分が送信したチャットの背景色・文字色を任意の色に変更できます。CSSは自身の環境上（見た目上）のみの反映で、相手には一切影響しません。

こっちが赤にしたからといって、相手が見た時も赤になるなんてことはないです。

拡張機能を導入できるPCブラウザ向けです。スマホやタブレットのアプリ版ではできません。

拡張機能を利用できるブラウザアプリ（例：Kiwi Browserは2025年1月で開発終了なのでMicrosoft Edge CanaryやFirefox）などをインストールして、ブラウザ版から利用する場合はもしかしたら使えるかもしれません。

1. 前提
2. 自分が送信したチャットの背景色を変更するCSS
3. 感想

前提

「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

自分が送信したチャットの背景色を変更するCSS

スタイルシートを開く

「X（旧Twitter）」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。

もし初めて「Stylebot」を起動した場合は「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると白紙のスタイルシート画面を開けます。

CSSを書き込む

以下のコードを書き込みます。

CSS

/*自分のチャット背景色変更(2025年12月16日修正)*/
[data-testid="dm-conversation-panel"] [style*="message-info"]>.items-end>[data-testid^="message-text"] {
    background-color: rgb(0, 90, 150) !important;

    & .font-chirp {
        color: #fff !important;
    }
}

/*自分のチャット背景色変更(2025年12月16日修正)*/
[data-testid="dm-conversation-panel"] [style*="message-info"]>.items-end>[data-testid^="message-text"] {
    background-color: rgb(0, 90, 150) !important;

    & .font-chirp {
        color: #fff !important;
    }
}