【Twitter】ワールドカップの点数をホバー時だけ表示するCSS

Twitter

Twitterのアイコン

この記事では、「Twitter(PC版)」のトレンドページに表示されるワールドカップの結果(点数)を非表示にして、マウスを乗せたときだけ表示させるCSSについて書きます。

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

【Twitter】ワールドカップの点数をホバー時だけ表示するCSS

本記事で紹介するCSSを使えば、ワールドカップの結果(点数)をマウスホバー時だけ表示させるように変更できます。いつでもオンオフできます。

現在、4年に1度の大イベント「FIFAワールドカップカタール2022」が開催されています。僕は大熱中です。キリアン・エンバペ様がかっこいいです。

そんなW杯ですが、「Twitter」のトレンドページに、今日の結果が表示されるようになっています。うっかり寝起きのぼけーっとした状態で、トレンドページを開くと、思わぬネタバレを食らうことになります。

Twitterのトレンドに表示されるワールドカップの点数表

そこで、マウスをもっていかないと表示されないように、CSSでカスタマイズすることにしました。試合のアーカイブをちゃんと見てから、結果を知りたいという方におすすめです。

まぁ、そもそもトレンドキーワードでネタバレを食らう可能性もあるので、そもそも開かないのが一番ですね。

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

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

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

ワールドカップの点数をホバー時だけ表示するCSS

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

Stylebotのスクリーンショット

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

/*トレンドにあるワールドカップの点数を非表示、ホバー時だけ表示*/
a[href*="/i/events/"] .css-1dbjc4n.r-173mn98.r-18u37iz:not(:hover):not(:focus-within),
.css-1dbjc4n.r-z2wwpe.r-1udh08x:not(:hover):not(:focus-within) .css-1dbjc4n.r-18u37iz>div:nth-child(3):not(:hover):not(:focus-within) {
  opacity: 0;
  transition-duration: 0.4s;
}

書き込めたら、右上の「×」でスタイルシートを閉じます。

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

これで、通常は点数が非表示になります。「どこが対戦した」という情報はそのままです。マウスを国の背景色で塗りつぶされている部分に持っていくと、点数が表示されます。

ホバー時だけ点数を表示するようにしたGIF画像

「マウスホバーの範囲が広すぎる!うっかり乗せてしまいそうだから、もっと範囲を狭めたい!」という方は、代わりに以下のCSSを利用してみてください。

/*トレンドにあるワールドカップの点数を非表示、ホバー時だけ表示*/
a[href*="/i/events/"] .css-1dbjc4n.r-173mn98.r-18u37iz:not(:hover):not(:focus-within),
a[href*="/i/events/"] .css-1dbjc4n.r-18u37iz>div:nth-child(3):not(:hover):not(:focus-within) {
  opacity: 0;
  transition-duration: 0.4s;
}

ぴったり点数があった場所にマウスを乗せないと表示されなくなります。ただし、表示されるのは、マウスを乗せた国だけです。対戦国を知りたい場合は、その都度マウスを乗せないといけません。

ピンポイントでマウスを乗せたときだけ点数を表示するようにカスタマイズした画像

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

感想

以上、「Twitter」のワールドカップの点数をネタバレしないために、ホバー時だけ表示するCSSでした。

背景色を薄くする記事も書いています。

Posted by ナポリタン寿司