【Bing】検索結果の余計な項目を全排除するCSS（まとめ）

​2022年11月2日​​Bing

Microsoft Bingのアイコン

この記事では、「Microsoft Bing」の検索結果に表示される不要な項目を、まとめて削除する方法について書きます。

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

【Bing】検索結果の余計な項目を全排除するCSS（まとめ）

本記事で紹介するCSSを使えば、「Microsoft Bing」の検索結果に表示される不要なコンテンツを非表示にできます。例えば、以下のとおりです。

  • 右サイドバーの「関連キーワード」
  • 右サイドバーの「追加の検索結果（記事抜粋）」
  • 右サイドバーの「結果を見る」
  • 広告記事
  • レシピ
  • ビデオ（動画）
  • 画像
  • おすすめの検索（関連キーワード）
  • 〇〇を見る
  • 他の人は以下も質問しています
  • 話題のコンテンツ
  • マップ（地図）
  • ニュース
  • さらに詳しく探す（人気の商品に基づいたあなたへのおすすめ）
  • これは役に立ちましたか?（フィードバック）
  • 左側のポップアップウィジェット
  • ヘッダーの「English」と「Switch to Bing in English」ボタン

「Bing」の検索結果って、人によっては不要な項目がありませんか？以下の感じです。

「Microsoft Bing」の不要な項目を示した画像

僕にとっては不要な項目ばかりです。純粋な記事タイトル、メタディスクリプション（概要文）がセットになった検索結果が欲しいんですよね。無駄な画像やポップアップは一切いりません。

これらの項目は、2022年11月時点、標準の設定では非表示にできません。CSSを使うことで非表示にできます。見た目上、消しているだけなので、いつでも元に戻せます。誰にも迷惑をかけません。

ただし、Bing側のアップデートで、いつの間にか使えなくなっている場合があります。僕は普段Bingを使わないので、いつの間にか使えなくなっていた場合は、問い合わせしていただければ幸いです。僕ができる範囲だったら修正します。

Google版も作成しているので、Google検索を使っている方は、以下の記事を参考にしてみてください。そもそも僕は、Googleユーザーなので、以下の記事を最初に書きました。このたび、そこそこの時間を確保できたので、Bing版も作成しました。

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

合わせて読みたい

Bingの検索結果をスッキリコンパクトにする記事を書きました。

下記画像のように、いたるところにある余白を詰めて、ぎゅうぎゅうにします。コンパクトが好きな方におすすめです。

「Microsoft Bing」のいたるところの余白（スペース）を示した画像

また、トップページの背景画像やニュースなどを削除する方法も書いています。

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

「Microsoft Bing」の不要な項目を非表示にするCSS

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

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。全部を書き込む必要はありません。自分が非表示にしたい項目だけを書き込んでください。

/*【Bing】右サイドバーの「関連キーワード」削除*/
aside[aria-label="追加の検索結果"]>ol>li>div.b_rrsr:has(li>a[href^="/search?q="]) {
  display: none;
}

/*【Bing】右サイドバーの「追加の検索結果（記事抜粋）」削除*/
aside[aria-label="追加の検索結果"]>ol>li>div.utilAns,
aside[aria-label="追加の検索結果"]>ol>li>div[class^="b_cbContainer"],
aside[aria-label="追加の検索結果"]>ol>li>div[class^="b_entity"] {
  display: none;
}

/*【Bing】サイドバーの「結果を見る」削除*/
.disambig-outline {
  display: none;
}

/*【Bing】広告記事削除*/
#b_results>li.b_ad {
  display: none;
}

/*【Bing】記事の説明欄冒頭にある「広告」画像非表示*/
.b_caption>p::before {
  display: none !important;
}

/*【Bing】検索結果の「他の人は以下も質問しています」非表示*/
#b_results>li>div>div.rqnaContainerwithfeedback {
  display: none;
}

/*【Bing】検索結果上部の「レシピ」非表示*/
.b_poleContent>div#b_wfCarousel:has(div#recipeCells) {
  display: none;
}

/*【Bing】検索結果上部の「〇〇を見る」非表示*/
.b_poleContent>li.b_adLastChild:has(a[href^="/shop?"]) {
  display: none;
}

/*【Bing】検索結果途中の「〇〇を見る」非表示*/
li.b_ans.b_mop>div>.b_tophbb:has([aria-label="ショッピング アイテムをすべて表示"]):has(a[href^="/shop?"]) {
  display: none;
}

/*【Bing】検索結果の「ビデオ（動画）」非表示*/
.b_vidAns {
  display: none;
}

/*【Bing】検索結果の「画像」非表示*/
#b_results>li.b_imgans {
  display: none;
}

/*【Bing】検索結果の「マップ（地図）」非表示*/
div#lMapContainer {
  display: none;
}

/*【Bing】検索結果のサイドバーの「マップ（地図）」非表示*/
aside[aria-label="追加の検索結果"]>ol>li.b_ans:has(div>div>div>div[id*="Map"]) {
  display: none;
}

/*【Bing】検索結果上部の「周辺にあるレストラン」非表示*/
.b_poleContent:has(div>div[data-feedbk-id="Restaurant"]) {
  display: none;
}

/*【Bing】検索結果の「ニュース」非表示*/
#b_results>li.b_nwsAns {
  display: none;
}

/*【Bing】検索結果上部の「ニュース」非表示*/
#ans_nws {
  display: none;
}

/*【Bing】画像・動画ページの「おすすめの検索（関連キーワード）」非表示*/
div#rfPane>div>.touchQuery[aria-label="おすすめの検索"] {
  display: none;
}

/*【Bing】検索結果の「話題のコンテンツ」非表示*/
#b_results>li>div.rc_vlHorizontalImage.rc_rnDesktop_vlHorizontalImage {
  display: none;
}

/*【Bing】検索結果下部の「〇〇に関連する検索」非表示*/
#b_results>li.b_ans>.b_rs#brsv3 {
  display: none;
}

/*【Bing】検索結果の「さらに詳しく探す（人気の商品に基づいたあなたへのおすすめ）」非表示*/
#b_results .pageRecoContainer {
  display: none;
}

/*【Bing】検索結果の「これは役に立ちましたか?」非表示*/
div#fbtop {
  display: none;
}

/*【Bing】記事タイトル横の「電球マーク」非表示*/
.b_title>div>a>.scs_arw[title="このページを見る"][aria-label="さらに表示"] {
  display: none;
}

/*【Bing】記事左側の「Webサイトを開く」ウィジェット非表示*/
div#textDeeplinksWidgetContainer {
  display: none;
}

/*【Bing】ヘッダーの「English」ボタン削除*/
header span#langChange {
  display: none !important;
}

/*【Bing】ヘッダーの「Switch to Bing in English」ボタン削除*/
header a[href^="/search?"][href$="setlang=en"] {
  display: none !important;
}

/*【Bing】検索メニューの「学校」非表示*/
nav[aria-label="メイン メニュー"] li#b-scopeListItem-bingatwork {
  display: none !important;
}

/*【Bing】検索メニューの「ショッピング」非表示*/
nav[aria-label="メイン メニュー"] li#b-scopeListItem-shop {
  display: none !important;
}

/*【Bing】検索メニューの「ニュース」非表示*/
nav[aria-label="メイン メニュー"] li#b-scopeListItem-news {
  display: none !important;
}

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

綺麗な検索結果を得られます。

「Microsoft Bing」の不要な部分をまとめて削除する前と後の比較画像

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

以下、1つずつ解説します。どこの部分なのか分からない方は、参考にしてみてください。

右サイドバーの「関連キーワード」

右側サイドバーに表示される「関連キーワード」という項目です。検索した単語に続くサジェストキーワード（2つ目以降の単語）を表示してくれます。

「Microsoft Bing」の関連キーワードの画像
/*【Bing】右サイドバーの「関連キーワード」削除*/
aside[aria-label="追加の検索結果"]>ol>li>div.b_rrsr:has(li>a[href^="/search?q="]) {
  display: none;
}

右サイドバーの「追加の検索結果（記事抜粋）」

右側サイドバーに表示される記事の抜粋・調べた単語の概要文のことです。検索した単語に関連する記事の抜粋や、画像が表示されます。

「Microsoft Bing」の追加の検索結果（記事の抜粋）画像
/*【Bing】右サイドバーの「追加の検索結果（記事抜粋）」削除*/
aside[aria-label="追加の検索結果"]>ol>li>div.utilAns,
aside[aria-label="追加の検索結果"]>ol>li>div[class^="b_cbContainer"],
aside[aria-label="追加の検索結果"]>ol>li>div[class^="b_entity"] {
  display: none;
}

右サイドバーの「結果を見る」

右側サイドバーに表示される「結果を見る」という項目のことです。「Apple」と検索したら、「iPhone（アイフォーン）」という結果を見る項目が表示されます。クリックすると、その単語の検索結果を表示します。

「Microsoft Bing」の右側サイドバーの「結果を見る」項目画像
/*【Bing】サイドバーの「結果を見る」削除*/
.disambig-outline {
  display: none;
}

広告記事

検索結果の要所要所に表示される広告記事のことです。要所要所といっても、Bingの場合は、ほぼ広告です。

記事タイトル（URL）下にあるメタディスクリプション（概要文）の最初に「広告」と小さく記載されています。

「Microsoft Bing」の検索結果に表示される広告記事画像
/*【Bing】広告記事削除*/
#b_results>li.b_ad {
  display: none;
}

1つ注意点ですが、上記CSSは、全ての広告記事を排除してくれるわけではありません。一部の広告は残ってしまいました。僕の技術では無理でした。下記のCSSを追加で書き込むことで、「広告」の文字自体は削除できます。記事は排除してくれません。

/*【Bing】記事の説明欄冒頭にある「広告」画像非表示*/
.b_caption>p::before {
  display: none !important;
}
「Microsoft Bing」の「広告」文字を削除する前と後の比較画像

他の人は以下も質問しています

検索結果の途中に表示される「他の人は以下も質問しています」という項目です。質問に対して、記事の抜粋が回答として、タイル状で表示されます。

「Microsoft Bing」の「他の人は以下も質問しています」項目画像
/*【Bing】検索結果の「他の人は以下も質問しています」非表示*/
#b_results>li>div>div.rqnaContainerwithfeedback {
  display: none;
}

レシピ

料理や食べ物で検索すると、検索結果の上部に表示される「レシピ」という項目です。料理の画像が表示されて、クリックするとそのサイトを開きます。

「Microsoft Bing」のレシピ項目のスクリーンショット
/*【Bing】検索結果上部の「レシピ」非表示*/
.b_poleContent>div#b_wfCarousel:has(div#recipeCells) {
  display: none;
}

上記CSSは、丸々非表示にするコードです。元々レシピ項目なんてなかったかのようにします。下記記事にて、非表示ではなく、高さを縮める方法を紹介しています。「たまーに使うから、完全な非表示は困る！」という方は参考にしてみてください。

〇〇を見る

検索する単語によって、上部に表示される「〇〇を見る」項目のことです。検索した単語を入手できるショッピングサイトが画像付きでタイル表示されます。

例えば、「みかん」と検索すると、JAタウンなどの通販サイトが表示されます。価格も表示されています。ショッピングする方には便利かもしれません。

「Microsoft Bing」の検索結果に表示される「みかんを見る」項目画像

僕は不要なので、下記CSSで消しています。

/*【Bing】検索結果上部の「〇〇を見る」非表示*/
.b_poleContent>li.b_adLastChild:has(a[href^="/shop?"]) {
  display: none;
}

/*【Bing】検索結果途中の「〇〇を見る」非表示*/
li.b_ans.b_mop>div>.b_tophbb:has([aria-label="ショッピング アイテムをすべて表示"]):has(a[href^="/shop?"]) {
  display: none;
}

ビデオ（動画）

検索結果の途中に表示される「〇〇の動画」という項目です。状況によってはサイドバーに表示される場合もあります。

検索した単語に関連する「YouTube」や「TikTok」などの各動画サービスのサムネイルがタイル状で表示されます。クリックで動画を再生します。

「Microsoft Bing」の「〇〇の動画」画像
/*【Bing】検索結果の「ビデオ（動画）」非表示*/
.b_vidAns {
  display: none;
}

画像

検索結果の途中に表示される「〇〇の画像」という項目です。場合によっては、サイドバーにも表示されます。検索した単語の画像をタイル状でチェックできます。右側の矢印でページを切り替えられます。

「Microsoft Bing」の「〇〇の画像」項目画像
/*【Bing】検索結果の「画像」非表示*/
#b_results>li.b_imgans {
  display: none;
}

マップ（地図）

検索結果、あるいはサイドバーに表示されるマップ（地図）項目のことです。検索した単語の場所が、簡易マップで表示されます。

「Microsoft Bing」のマップの画像
/*【Bing】検索結果の「マップ（地図）」非表示*/
div#lMapContainer {
  display: none;
}

/*【Bing】検索結果のサイドバーの「マップ（地図）」非表示*/
aside[aria-label="追加の検索結果"]>ol>li.b_ans:has(div>div>div>div[id*="Map"]) {
  display: none;
}

/*【Bing】検索結果上部の「周辺にあるレストラン」非表示*/
.b_poleContent:has(div>div[data-feedbk-id="Restaurant"]) {
  display: none;
}

ニュース

検索結果の上部、あるいは途中に表示されるニュース項目のことです。検索した単語に関連する話題・ニュースがタイル状で表示されます。複数のニュースサイトが混ざっています。

「Microsoft Bing」のニュース項目のスクリーンショット
/*【Bing】検索結果の「ニュース」非表示*/
#b_results>li.b_nwsAns {
  display: none;
}

/*【Bing】検索結果上部の「ニュース」非表示*/
#ans_nws {
  display: none;
}

画像・動画ページの「おすすめの検索（関連キーワード）」

画像・動画ページの上部に表示される関連キーワード（おすすめ検索）が書かれたバーのことです。小さい画像と文字のボタンがあります。クリックすると、その単語で検索し直してくれます。

「Microsoft Bing」のおすすめの検索（関連キーワード）画像

一見、便利そうなんですが、単語によっては、卑猥な単語も候補に出てくるんですよね。仕事でBingを使う方は、要注意です。

/*【Bing】画像・動画ページの「おすすめの検索（関連キーワード）」非表示*/
div#rfPane>div>.touchQuery[aria-label="おすすめの検索"] {
  display: none;
}

話題のコンテンツ

公式サイトなどのメタディスクリプション（概要欄）内に表示される項目のことです。そのサイト内で話題になっているニュースやトピックが、画像と文字のタイル状（カード）で表示されます。クリックでそのページを開きます。

「Microsoft Bing」の検索結果に表示される「話題のコンテンツ」画像
/*【Bing】検索結果の「話題のコンテンツ」非表示*/
#b_results>li>div.rc_vlHorizontalImage.rc_rnDesktop_vlHorizontalImage {
  display: none;
}

〇〇に関連する検索

検索結果の一番下にあります。検索した単語に続くサジェストキーワード（関連キーワード）がリスト状で表示されています。

「Microsoft Bing」の「〇〇に関連する検索」画像
/*【Bing】検索結果下部の「〇〇に関連する検索」非表示*/
#b_results>li.b_ans>.b_rs#brsv3 {
  display: none;
}

メタディスクリプション下の「さらに詳しく知る」

検索結果の記事と記事の間にある項目です。検索する単語や状況に左右されるので、必ずしも表示されているというわけではありません。

メタディスクリプション（記事の概要・要約文）の下にあります。一見、記事の見出し項目のように見えますが、中身は全然関係ない別サイトです。メタディスクリプションと同じ階層にあるので、紛らわしいです。

「Microsoft Bing」の検索結果に表示される「さらに詳しく知る（人気の商品に基づいたあなたへのおすすめ）」のスクリーンショット1
/*【Bing】検索結果の「さらに詳しく探す（人気の商品に基づいたあなたへのおすすめ）」非表示*/
#b_results .pageRecoContainer {
  display: none;
}

これは役に立ちましたか?

強調スニペット（記事の抜粋が検索結果上部に表示される機能）などの特殊なコンテンツの下に表示されます。「Bingが表示した内容は、いい感じでしたか？」という読者へのアンケートになっています。使わない人にとっては、余計な一文が目に入るだけで邪魔です。

「Microsoft Bing」の「これは役に立ちましたか?（フィードバック）画像
/*【Bing】検索結果の「これは役に立ちましたか?」非表示*/
div#fbtop {
  display: none;
}

記事タイトル横の「電球マーク」

記事タイトル横に表示される電球マークのことです。マウスを乗せると、記事の抜粋・概要を確認できます。

「Microsoft Bing」の記事タイトル横にある電球マーク画像
/*【Bing】記事タイトル横の「電球マーク」非表示*/
.b_title>div>a>.scs_arw[title="このページを見る"][aria-label="さらに表示"] {
  display: none;
}

左側に表示されるポップアップウィジェット（Webサイトを開く）

公式サイトなどの左側に表示される「Webサイトを開く」というポップアップウィジェットのことです。

「Microsoft Bing」の検索結果の左側にあるポップアップウィジェットのスクリーンショット
/*【Bing】記事左側の「Webサイトを開く」ウィジェット非表示*/
div#textDeeplinksWidgetContainer {
  display: none;
}

ヘッダーの「English」と「Switch to Bing in English」ボタン

検索結果のヘッダー（上部）の右上にある「English」と「Switch to Bing in English」のことです。クリックで、Bingの言語を英語に切り替えてくれます。

「Microsoft Bing」の「Switch to Bing in English」画像
/*【Bing】ヘッダーの「English」ボタン削除*/
header span#langChange {
  display: none !important;
}

/*【Bing】ヘッダーの「Switch to Bing in English」ボタン削除*/
header a[href^="/search?"][href$="setlang=en"] {
  display: none !important;
}

ナビゲーションバー（ショッピング、地図、ニュースなど）

検索ボックス下にある「学校」、「ショッピング」、「地図」、「ニュース」、「フライト」、「旅行」などの項目です。

「Microsoft Bing」のナビゲーションバー画像

僕は勝手に「検索メニュー」とか「ナビゲーションバー」とか呼んでいます。正式名称は知りません。ページのソースを見ると、「navigation（ナビゲーション）」や「メインメニュー」といった記述があったので、そこらへんの名称で呼べばいいと思います。

以下のCSSですが、全部を適用する必要はありません。全部適用しちゃうと、ほぼメニューがなくなります。不便だと思います。好きなコードだけ書き込んでください。

/*【Bing】検索メニューの「学校」非表示*/
nav[aria-label="メイン メニュー"] li#b-scopeListItem-bingatwork {
  display: none !important;
}

/*【Bing】検索メニューの「ショッピング」非表示*/
nav[aria-label="メイン メニュー"] li#b-scopeListItem-shop {
  display: none !important;
}

/*【Bing】検索メニューの「画像」非表示*/
nav[aria-label="メイン メニュー"] li#b-scopeListItem-images {
  display: none !important;
}

/*【Bing】検索メニューの「動画」非表示*/
nav[aria-label="メイン メニュー"] li#b-scopeListItem-video {
  display: none !important;
}

/*【Bing】検索メニューの「地図」非表示*/
nav[aria-label="メイン メニュー"] li#b-scopeListItem-local {
  display: none !important;
}

/*【Bing】検索メニューの「ニュース」非表示*/
nav[aria-label="メイン メニュー"] li#b-scopeListItem-news {
  display: none !important;
}

/*【Bing】検索メニューの「フライト」非表示*/
nav[aria-label="メイン メニュー"] li#b-scopeListItem-flights {
  display: none !important;
}

/*【Bing】検索メニューの「旅行」非表示*/
nav[aria-label="メイン メニュー"] li#b-scopeListItem-travelhub {
  display: none !important;
}

感想

以上、「Microsoft Bing」の不要な検索結果項目をCSSで削除する方法でした。

Bingといえば、「Microsoft Rewards」ってサービス知っていますか？

Microsoftが運営しているポイントプログラムサービスです。コツコツ画面をクリックしたり、Bing検索することで、ポイントが貯まります。一定ポイント貯めたら、豪華賞品が当たる抽選や、Amazonギフトカードに交換できます。僕は毎日コツコツ貯めています。楽しいです。

​2022年11月2日​​Bing