【Twitter】公式（認証済み）アイコンを以前の角丸に戻すCSS

​​Twitter

Twitterのアイコン

この記事では、PC版ウェブサイトのTwitterで、公式アカウントの四角いアバター画像を、一般アカウントと同じ角丸に戻すCSSについて書きます。

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

【Twitter】公式（認証済み）アイコンを以前の角丸に戻すCSS

本記事で紹介するCSSを使えば、2022年12月以降変わってしまった認証済みアカウントの四角いプロフィールアイコンを、以前の角丸に戻せます。

2022年12月以降から、認証された企業やブランドのアイコンが丸ではなく、四角になりました。

2022年12月から実装された企業アカウントの四角いアイコン画像

「企業とか一般アカウントとかどうでもいい！角丸アイコンに統一したい！」という方、参考にしてみてください。まぁ僕自身は、見分けがつくようになった良い改善だと思っているので、本記事のコードは使っていません。使いたい方だけ利用しましょう。いつでもオンオフできます。

本記事は、PCウェブサイト版です。アプリ版やスマホ（iOS、Android）などでは利用できません。

「Stylebot（スタイルボット）」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

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

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

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。

「Chromeに追加」をクリックしてインストールします。

「Stylebot」のインストール手順画像

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

以前の角丸アイコンに戻す手順

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

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*公式アカウントも角丸アイコンにする*/
div[data-testid^="UserAvatar-Container"] .r-u8s1d.r-1v2oles.r-desppf {
  border-radius: 9999px !important;
  overflow: hidden !important;
}

右上の「×」でスタイルシートを閉じます。

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

以前の角丸アイコンになります。ビジネスアカウントではない一般アカウントと同じ状態です。名前の横にゴールドのバッジがあるかどうかで判断できます。

2022年12月から実装された四角いアイコンを元の角丸に戻した画像

検索候補のアカウントアイコンも角丸になります。

検索候補のスクリーンショット

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

感想

以上、Twitterの企業公式アカウントのアイコンを、以前と同じ角丸にする方法でした。

同じく12月に実装された他人のツイートの表示回数（インプレッション数）も、拡張機能やCSSを利用することで非表示にできます。

​​Twitter