当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象（通称:ステマ規制）にならないよう、配慮して記事を作成しています（記事はこちら、消す方法はこちら）

参考：令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【Twitter】フォロー中ボタンとフォロー解除ボタンを重ねるCSS

Twitter

Stylebotのアイコン

この記事では、Twitterのフォロー中ボタンと、フォロー解除ボタンを同じ場所に配置して重ねるCSSについて書きます。

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

Twitterの「フォロー解除しますか？」メニューの位置を調整してみたイメージ画像

本記事で紹介するCSSを使えば、Twitterのフォロー中ボタンとフォロー解除ポップアップを重ねるので、素早くフォロー解除できます。

フォローしている方のプロフィールページ→「フォロー中」ボタンをクリックすると、フォロー解除のポップアップメニューが表示されます。この中にある「フォロー解除」ボタンは、画面中央に配置されています。

フォロー解除しようと思ったら、①「フォロー中」ボタンをクリック→②マウスを「フォロー解除」ボタンまで持っていく→③クリック…の3ステップです。少し手間です。

「@Naporitansabuさんをフォロー解除しますか？」のポップアップメニューがずれてる

本記事で紹介するCSSを使えば、①「フォロー中」ボタンをクリック→②クリック…の2ステップで、フォロー解除できます。

「頻繁にフォロー解除するんだけど、ポップアップメニューがずれてて、押しにくい！もっと効率よく押したい！」という方、ぜひ参考にしてみてください。いつでも元に戻せるので、気軽に試せると思います。

おまけで、ポップアップ全体のカスタマイズCSSも紹介しています。説明文削除、背景色透明化、ボタンの背景色変更などです。

実際に適用する前と後の比較動画を貼っておきます。

「SocialDogなどの外部ツールを使えば、もっと素早く解除できるよ！？」といったコメントは、スルーしておきます笑

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

CSS

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

拡張機能ボタン　Stylebotを開く

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。どのフォントサイズ、テーマ（ダーク、ダークブルー、ライト）を利用していても、反映されると思います。

/*ポップアップの位置調整*/
div[data-testid="confirmationSheetDialog"] {
  margin-left: 300px;
  margin-bottom: 450px;
}

/*ポップアップの説明文非表示*/
div[class$="r-bcqeeo r-fdjqy7 r-13qz1uu r-qvutc0"] {
  display: none;
}

/*ポップアップの透明化*/
div[data-testid="confirmationSheetDialog"] {
  background-color: transparent;
}

/*ポップアップの「キャンセル」背景色*/
div[data-testid="confirmationSheetCancel"] {
  background-color: rgb(30 51 64);
}

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

Stylebot　フォロー中ボタンとフォロー解除ボタンを合わせるCSSを書き込んだ画面

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

Stylebot　「twitter.com」がオンになっている画像

適当にプロフィールページにアクセスして、「フォロー中」ボタンをクリックします。本来なら、ずれた場所にポップアップが表示されますが、CSS適用後だと、フォロー解除ボタンが、重なって表示されます。実質、ダブルクリックでフォロー解除できます。

本記事で紹介したCSSを適用してみたGIF画像

上記CSSの中で、最低限必要なコードは、「ポップアップの位置調整」のみです。それ以外のコードは最悪なくてもOKです。例えば、上記CSSでは、説明文を削除しています。説明文が欲しい場合は、丸々以下のコードを書き込まないようにします。

/*ポップアップの説明文非表示*/
div[class$="r-bcqeeo r-fdjqy7 r-13qz1uu r-qvutc0"] {
  display: none;
}

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

位置の微調整

他に使っているCSSがある場合や、フォントサイズ、ディスプレイの画面サイズによっては、ボタンの位置がずれているかもしれません。むしろ、ぴったり合う方が珍しいかもしれません。

その場合、上記CSS内にある「ポップアップの位置調整」の「margin-left: 300px;」と「margin-bottom: 450px;」を調整します。「margin-left」が左右の調整、「margin-bottom」が上下の調整です。

Stylebotの画面を表示しつつ、数字を適当に変更して、調整してみましょう。数字は半角で入力します。前後の記号は削除しないように注意です。

「ポップアップの位置調整」で、位置を調整できる

本記事で紹介したCSSでは、調整作業しやすいように、ポップアップメニューの背景を透明にしています。

不透明にしたい場合は、下記コードを書かないようにします。調整する時だけ書き込んで、調整終わったら削除するといった使い方でいいと思います。個人的には好みなので、そのままにしています。

/*ポップアップの透明化*/
div[data-testid="confirmationSheetDialog"] {
  background-color: transparent;
}

ボタンの背景色

使っているテーマによっては、キャンセルボタンの背景色が気持ち悪いかもしれません。

フォロー解除ポップアップ内にあるキャンセルボタンの背景色

その場合、「ポップアップのキャンセル背景色」の「background-color: rgb(30 51 64);」を調整します。HTMLカラーコードかRGBで指定します。好きな色に変更できます。

例えば、「background-color: #fff;」にすると、白になります。

「background-color: #fff;」にしてみたキャンセルボタン

感想

以上、Twitterのフォロー中とフォロー解除ボタンを重ねて、押しやすくするCSSでした。

Twitterを頻繁に利用する方は、色々効率よくカスタマイズするといいかもしれません。

こちらの記事もおすすめ

Twitter