【X・Twitter】「ポストする」が水色から白とか黒に！戻すCSS

2025年1月24日X(旧Twitter)

この記事では、PCウェブサイト版「X（旧Twitter）」で2024年12月4日から白色や黒色に変わった「ポストする」作成ボタンの背景色を元の青色（水色）に戻すCSSを書きます。

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

2024年12月4日頃に新しい記事更新をポスト（ツイート）しようとしたら「ポストする」ボタンの背景が白色になっていたことに気づきました。前日どころかさっきまでは水色だったのにいつのまに！と驚きました。

こういう時はいつものサーチや！と思いX（旧Twitter）で調べてみると僕だけじゃなかったです。どうやら使っているテーマがライト（明るい）の場合はボタンが黒色、その中の文字が白色になったようです。ダークブルーの場合は反対で背景が白、文字が黒です。

いつものXの気まぐれでいつの間にか元の仕様に戻してくれることを祈っていますが、それまでの対策としてCSSを使って元に戻してみます。

CSSというコードをウェブサイトに適用させるための拡張機能を入れて、その拡張機能に本記事で紹介するCSSコードを書き込む…という流れです。

自身の環境上だけの反映で他人のデバイスには一切反映されません。なんなら同じPCでも拡張機能を入れていない別のブラウザでは元の表示です。あくまでCSSを書き込んだ端末のみです。

【追記】「Twitter UI Customizer」拡張機能にも実装された

本記事を書いた数日後に僕が愛用しているChrome拡張機能「Twitter UI Customizer」にも同様の設定項目が実装されました。CSSが分からない方でも設定項目のカラーパレットかららく～に好きな色にできます。

【Twitter UI Customizer】Xをカスタマイズできる拡張機能

この記事では、PCウェブサイト版「X（旧Twitter）」を超カスタマイズできるChrome拡張機能・Firefoxア ...

https://www.naporitansushi.com/twitter-ui-customizer/#ツイー...

1. インストール方法
2. Xの「ポストする」ボタンを元の水色に戻すCSS
3. 感想

インストール方法

Chromeウェブストアからインストールできます。

Chrome拡張機能だけでなく「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

Stylebot

Change the appearance of the web instantly

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

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は拡張機能のオーバーフローメニューを開いて「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は以下の記事を参考にしてみてください。

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

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

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

Xの「ポストする」ボタンを元の水色に戻すCSS

スタイルシートを開く

「X（旧Twitter）」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

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

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

CSSを書き込む

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

CSS

/*左側サイドバーの「ポストする」の背景色（2024年12月15日修正）*/
header a[href="/compose/post"],
/*タイムライン上部と作成ダイアログ内の「ポストする」の背景色*/
button[data-testid^="tweetButton"] {
    background-color: rgb(29, 155, 240) !important;

    /*各文字色*/
    &>div {
        color: #fff !important;
    }
}

/*ウィンドウ幅が狭い時の左側サイドバー「ポストする」アイコンの色*/
a[href="/compose/post"]>div>svg {
    fill: #fff !important;
}