【Google】サッカーのスコアを隠してネタバレ回避するCSS

2025年9月22日Google

この記事では、PCウェブサイト版「Google」で検索した時に表示されるサッカーのスコア表示を隠して、マウスホバー時のみ表示するCSSを紹介します。ネタバレ回避です。

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

僕はサッカーの中でもプレミアリーグが好きです。上位チームも好きですが、ここ数年でぐぐんと知名度があがったブライトン所属の三笘選手（2025年9月22日時点）が好きです。

Googleで「ブライトンニューカッスル」といったように、過去の対戦カードで検索すると、一番上に専用のスコアボードが表示されて一瞬で試合結果が分かってしまいます。

そもそも試合映像を見る前にGoogle検索しなければいい話なんですが、ついつい指が勝手に動いてググってしまう時があります。

Enter押した後に「うわ！試合映像見る前に検索しちゃった！点数見たくねぇ！…あぁ！遅かった…」というパターンがたまーにあります。

CSSを使ってスコアを非表示にしてみます。マウスを点数が表示されていた場所にのせることで表示されます。自身の環境上で他人には影響しません。いつでも元に戻せます。

本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。

拡張機能を利用できるブラウザアプリ（例：Kiwi Browserは2025年1月で開発終了なのでMicrosoft Edge CanaryやFirefox）などをインストールして、ブラウザ版から利用する場合はもしかしたら使えるかもしれません。

1. 前提
2. サッカーのスコアをマウスホバー時のみ表示するCSS
3. 検索結果のニュースなどを消したい場合
4. 感想

前提

「Stylebot」や「Stylus」などのCSSを適用できる拡張機能を既に導入している前提です。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

サッカーのスコアをマウスホバー時のみ表示するCSS

スタイルシートを開く

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

右側に白紙のサイドバーが表示されます。

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

CSSを書き込む

以下のコードを書き込みます。

/*スコア周りに枠線を追加*/
.imso_mh__scr-sep {
    border: 2px solid #f00;
}

/*スコアを隠して、ネタバレ回避。ホバーで表示*/
.imso_mh__ma-sc-cont {
    opacity: 0;

    &:hover {
        opacity: 1;
        transition: opacity .5s ease .3s;
    }
}

/*スコア下部の誰が得点したか部分を隠す*/
.imso_mh__score-sum.imso-ani {
    opacity: 0;

    &:hover {
        opacity: 1;
        transition: opacity .5s ease .3s;
    }
}

/*スコア周りに枠線を追加*/
.imso_mh__scr-sep {
    border: 2px solid #f00;
}

/*スコアを隠して、ネタバレ回避。ホバーで表示*/
.imso_mh__ma-sc-cont {
    opacity: 0;

    &:hover {
        opacity: 1;
        transition: opacity .5s ease .3s;
    }
}

/*スコア下部の誰が得点したか部分を隠す*/
.imso_mh__score-sum.imso-ani {
    opacity: 0;

    &:hover {
        opacity: 1;
        transition: opacity .5s ease .3s;
    }
}