【Bing】左側のサイトのポップアップを非表示にする方法
![Microsoft Bingのアイコン](https://www.naporitansushi.com/wp-content/uploads/2022/10/Microsoft-Bing-icon.png)
この記事では、PCウェブサイト版「Microsoft Bing」の検索結果の記事の左横に表示される「Webサイトを開く」というポップアップを非表示にする方法について書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」や「Stylus(スタイラス)」を利用します。
「Webサイトを開く」ウィジェットは、「Microsoft Bing」の検索結果ページに表示される対応サイトの左側に表示されます。「Yahoo!」や「Microsoft」といった公式サイトで表示される印象でした。
![「Microsoft Bing」の検索結果の左側にあるポップアップウィジェットのスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2022/11/bing-left-widget-hide_04.png)
クリックすると、そのサイトを開きます。
僕の場合、サイトを開きたい時は、普通に記事タイトルをクリックします。わざわざ左側に同じ機能を有するものを配置されても、全く利用しません。使わなければいいだけなんですが、ごちゃごちゃして視界の邪魔なので、消すことにしました。
標準の設定では消せないので、ウェブサイトのデザインを変えられるCSSを利用します。いつでもオンオフできます。自身の環境上で、他人には影響しません。
本記事は、拡張機能を導入できるPCブラウザ向けです。スマホやタブレットのアプリ版ではできません。
インストール方法
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。
「Chromeに追加」をクリックします。
![「Stylebot」拡張機能をインストールする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2023/11/stylebot_05-1000x513.png)
「拡張機能を追加」をクリックします。
![「Stylebot」拡張機能をインストールする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/11/stylebot_02.png)
拡張機能のオーバーフローメニューに追加されたらOKです。
![「Stylebot」拡張機能をインストールする手順画像3](https://www.naporitansushi.com/wp-content/uploads/2023/11/stylebot_03.png)
頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
![「Stylebot」拡張機能を直接ツールバーに配置する手順画像](https://www.naporitansushi.com/wp-content/uploads/2023/11/stylebot_04.png)
詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。
記事横のポップアップウィジェットを非表示にするCSS
「Microsoft Bing」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
![「Stylebot」拡張機能のスクリーンショット1](https://www.naporitansushi.com/wp-content/uploads/2022/10/bing-related-keywords-css_04.png)
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*【Bing】記事左側の「Webサイトを開く」ウィジェット非表示*/
div#textDeeplinksWidgetContainer {
display: none !important;
}
/*【Bing】記事左側の検索メニュー非表示*/
div#relatedSearchesLGWContainer {
display: none !important;
}
本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。
下記のようになればOKです。右上の「×」でスタイルシートを閉じます。
![「Stylebot」拡張機能のスクリーンショット2](https://www.naporitansushi.com/wp-content/uploads/2024/01/bing-left-widget-hide_06.png)
再度拡張機能ボタンを押して、登録したサイト(例:www.bing.com
)がオンになっていることを確認します。オンになっている間は有効になっているということです。
「Windows」や「Yahoo!」などでBing検索します。導入前は公式サイトの横に表示されていましたが、導入後は綺麗になくなっています。
![PCウェブサイト版「Microsoft Bing」の「Webサイトを開く」ポップアップウィジェットをCSSで非表示にした比較画像](https://www.naporitansushi.com/wp-content/uploads/2022/11/bing-left-widget-hide_03.png)
僕の環境だと、ページを下のほうにスクロールすると、左端にいくつかの検索候補が表示されました。「【Bing】記事左側の検索メニュー非表示
」CSSを書き込むことで、非表示にします。
![PCウェブサイト版「Microsoft Bing」の検索結果に表示される左側の検索候補画像](https://www.naporitansushi.com/wp-content/uploads/2024/01/bing-left-widget-hide_05.png)
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「www.bing.com
」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
【おすすめ】まとめて検索結果の不要項目を消すCSS記事
「Microsoft Bing」の不要な部分を、まとめて全削除するCSS記事も公開しています。ちまちま各記事を見て実行するよりも、一気に非表示にしたい方、参考にしてみてください。
感想
以上、PCウェブサイト版「Microsoft Bing」の検索結果に表示される「Webサイトを開く」というポップアップウィジェットを非表示にする方法でした。
中央ではなく、左右のサイドバー(余白)を活用する試みは、すごいなぁと感心です。確かに、検索結果の左右ってめちゃくちゃ余白がありますよね。記事タイトルの右に表示される電球マークを削除する記事も書いています。