【Twitter】フォロー中ボタンとフォロー解除ボタンを重ねるCSS
この記事では、Twitterのフォロー中ボタンと、フォロー解除ボタンを同じ場所に配置して重ねるCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、Twitterのフォロー中ボタンとフォロー解除ポップアップを重ねるので、素早くフォロー解除できます。
フォローしている方のプロフィールページ→「フォロー中」ボタンをクリックすると、フォロー解除のポップアップメニューが表示されます。この中にある「フォロー解除」ボタンは、画面中央に配置されています。
フォロー解除しようと思ったら、①「フォロー中」ボタンをクリック→②マウスを「フォロー解除」ボタンまで持っていく→③クリック…の3ステップです。少し手間です。
本記事で紹介するCSSを使えば、①「フォロー中」ボタンをクリック→②クリック…の2ステップで、フォロー解除できます。
「頻繁にフォロー解除するんだけど、ポップアップメニューがずれてて、押しにくい！もっと効率よく押したい！」という方、ぜひ参考にしてみてください。いつでも元に戻せるので、気軽に試せると思います。
おまけで、ポップアップ全体のカスタマイズCSSも紹介しています。説明文削除、背景色透明化、ボタンの背景色変更などです。
実際に適用する前と後の比較動画を貼っておきます。
「SocialDogなどの外部ツールを使えば、もっと素早く解除できるよ！？」といったコメントは、スルーしておきます笑
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/CSS
Twitterにアクセスします。右上の拡張機能アイコン→「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です。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：twitter.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
適当にプロフィールページにアクセスして、「フォロー中」ボタンをクリックします。本来なら、ずれた場所にポップアップが表示されますが、CSS適用後だと、フォロー解除ボタンが、重なって表示されます。実質、ダブルクリックでフォロー解除できます。
上記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;」にすると、白になります。
感想
以上、Twitterのフォロー中とフォロー解除ボタンを重ねて、押しやすくするCSSでした。
Twitterを頻繁に利用する方は、色々効率よくカスタマイズするといいかもしれません。