【ABEMA】サッカーの試合結果（点数）を隠してネタバレ回避するCSS

2024年6月16日Stylebot&Stylus(CSS)

この記事では、PCウェブサイト版「ABEMA 」で、既に行われたサッカー試合の点数結果を隠して、咄嗟のネタバレを回避するCSSを書きます。マウスを乗せたら表示します。

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

プレミアリーグが終わり、待ちに待った2024年のUEFA EURO 2024が開催されました。

どの媒体で見ようかなぁと思ったところ、「WOWOWオンデマンド」がUEFA EURO 2024とCL・EL 2024～25をまとめて見れるお得なシーズンパス（1年間）を期間限定で販売開始したので、何も考えず購入したところ、「ABEMA 」がユーロ全試合無料放送するのを後から知って、買ったの若干後悔しているナポリタン寿司です。

そんな僕の話は置いといて、ABEMAでUEFA EURO 2024のページを見てみると、既に行われた試合の点数が表示されていました。

今年のユーロはドイツで開催されているので、日本時間だと終わってる時間帯（朝4時とか）に開始されることが多く、僕はリアルタイムで見れないので、朝起きてからフルのアーカイブを見ています。動画ページを開く前に点数（スコア）が表示されたらたまったもんじゃないです。最悪のネタバレです。

WOWOWだったかSPOTV NOWだったか忘れましたが、設定でスコア表記をオフにできるサービスもある中、パッと見た感じABEMAにはなさそうでした。僕のサーチ力不足かもしれません。

どっちにしろCSSを使うことで非表示にできます。完全に消すといざという時困るので、通常は非表示、マウスを点数があった場所にのせると表示させます。普段は隠すので唐突のネタバレを回避でき、見たい時はマウスを乗せることでいつでも見れます。

CSSを使った方法は自身の環境上で他人には影響しません。いつでも元に戻せます。動画内のスコアを消すのではなく、あくまで動画ページに移動するまでの一覧ページ上での反映です。

本記事は僕が見るサッカーというコンテンツに絞っていますが、もしかしたらABEMA上の他のスポーツでも同様に使えるかもしれません。本記事はChrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。

1. インストール方法
2. 「ABEMA」のスポーツのスコアを隠してマウスホバーで表示するCSS
3. Google検索結果のスコアを隠したい場合
4. 感想

インストール方法

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/

「ABEMA」のスポーツのスコアを隠してマウスホバーで表示するCSS

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

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

/*【ABEMA】過去試合の点数（スコア）を隠す。マウスホバーで表示*/
a.com-video-FeatureMatchItem .com-video-FeatureMatchStart:has(>span[class*="__score"]):not(:hover) {
    opacity: 0 !important;
}

「a.com-video-FeatureMatchItem .com-video-FeatureMatchStart:has(>span[class*="__score"])」部分がスコアを表していて、「:not(:hover)」＝マウスホバーしていない時に、「opacity: 0」で透明度を0にするよう指定しています。

マウスを乗せていない時は透明化、マウスを乗せた時（hover）は通常仕様（透明にしない）になります。

注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。

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