【Twitter】自分が送ったDMの背景色を変更するCSS

2022年5月30日2023年5月10日Twitter

この記事では、自分が送信したTwitter（PCウェブサイト版）のDMの背景色を、好きな色に変更するCSSについて書きます。

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

本記事で紹介するCSSを使えば、PCウェブサイト版「Twitter」のDMで、自分が送信したメッセージだけの背景色を変更できます。好きな色に指定できます。自分のメッセージだけの変更で、相手のDM背景色は変更しません。

通常時の色、マウスフォーカスした時の色、選択時の色と、個別に設定できます。

「テーマを、ダークモードにしているけれど、自分のDMの色だけ明るすぎる！まぶしい！」といった方におすすめです。DMの変更だけで、他のボタンの色には影響しません。

例えば、テーマ全体の色は「青」にしているけれど、DMトークの背景だけ、「赤」にする…といったことが可能です。実際に使ってみた動画を貼っておきます。

1. インストール方法
2. TwitterのDMの背景色を変更するCSS
3. 感想

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

Stylebot

ウェブの外観を瞬時に変更

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」でインストールできます。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

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

TwitterのDMの背景色を変更するCSS

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

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。「background-color」の部分で、色を変更できます。

/*DM 自分の色変更*/
div[data-testid="messageEntry"] .r-l5o3uw {
  background-color: rgb(0, 90, 150);
}

/*DM 自分の色変更：マウスフォーカス時*/
div[data-testid="messageEntry"] .r-1vtznih {
  background-color: rgb(23, 33, 61);
}

/*DM 自分の色変更：選択時*/
div[data-testid="messageEntry"] .r-eff69c {
  background-color: rgb(61, 25, 27);
}

/*DM 自分の色変更：マウスを押している間*/
div[data-testid="messageEntry"] .r-yuvema {
    background-color: rgb(0, 90, 150);
}

ポイント

本記事で紹介するCSSは、Twitterのテーマの色を、「青」にしていないと動作しません。

青以外の色用のCSSを作成すればいいんですが、ちょっとめんどくさいので、書きません。上記CSSの「.r-〇〇〇」の部分を、それぞれの色のセレクタに変更すれば適用できます。

例えば、「緑」にした場合のCSSだけ書いておきます。

/*DM 自分の色変更*/
div[data-testid="messageEntry"] .r-s224ru {
  background-color: rgb(0, 90, 150);
}

/*DM 自分の色変更：マウスフォーカス時*/
div[data-testid="messageEntry"] .r-1iwjfv5 {
  background-color: rgb(23, 33, 61);
}

/*DM 自分の色変更：選択時*/
div[data-testid="messageEntry"] .r-g9b51w {
  background-color: rgb(61, 25, 27);
}

/*DM 自分の色変更：マウスを押している間*/
div[data-testid="messageEntry"] .r-pxc13i {
    background-color: rgb(0, 90, 150);
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト（例：twitter.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。

Twitterの自分が送信したDMの背景色が変更されます。上記CSSだと、暗めの青になります。ダークテーマを利用している方は、目に優しい色を求めていると思うので、暗くすると、良いかもしれません。

それぞれの「background-color」を変更することで、任意の色にできます。本記事では、RGBで指定していますが、「#005a96」といった感じで、HTMlカラーコードでも指定できます。

ライトテーマ・ダークテーマ利用時

上記CSSは、ダークブルーテーマを想定したものですが、ダークやライトテーマでも利用できます。

DM以外のボタンの色はこれまで通り

あくまで、DMの自分が送信したメッセージの背景のみの変更です。「ツイートする」などのボタンの色は変更されません。

フォーカス時の色

マウスをDMの上に乗せた時の色です。通常時、フォーカス時、選択時で全部同じ色にすることも可能です。

選択時の色

DMを左クリックした時の色です。

Twitterには通常時、フォーカス時、選択時の3つパターンが用意されています。通常時とフォーカス時の2つで、十分な気がしますが、なんでなんでしょうかね。

クリックした時に色が変わる、送信日時の下に「送信済み」と表示される以外に何か変化ありますかね。よく分からんです。

色を統一したい場合

クリック時、選択時、通常時の全ての色を統一したい場合、以下のコードを利用します。僕はこちらのコードを利用しています。

/*DM 自分の色変更*/
div[data-testid="messageEntry"] :is(.r-l5o3uw, .r-1vtznih, .r-eff69c, .r-yuvema) {
    background-color: rgba(0, 90, 150, 1);
}

一時的に無効化したい場合

一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「twitter.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、TwitterのDM背景色を好きな色に変更するCSSについてでした。

余談ですが、最近「リメイクシート（黒）」というのを購入しました。シールみたいな壁紙で、比較的簡単に、模様替えできるアイテムです。「これで、より部屋を黒に統一するんだ！」と意気込んでいます笑。灰色と最後まで悩んだのですが、黒にしました。

リンク

2022年5月30日2023年5月10日Twitter