【Bing】検索結果の余計な余白を削除してスッキリするCSS

​2022年11月2日​​Bing

Microsoft Bingのアイコン

この記事では、「Microsoft Bing」の検索結果にある余計な余白を詰めて、スッキリコンパクトにするCSSについて書きます。

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

「Microsoft Bing」の検索結果をスッキリコンパクトにした画像

本記事で紹介するCSSを使えば、「Microsoft Bing」の検索結果を、スッキリコンパクトにできます。例えば、以下の部分の余白を好きなように調整できます。

  • ヘッダー
  • 検索ボックスの高さ
  • ナビゲーションバーの高さ
  • 検索ボックスと検索結果の間
  • フッター

Bingの検索結果は、結構スペースが空いていて、広々としています。下記画像の感じです。スクロール量は増えてしまいますが、見やすくていいですね。クリックもしやすいです。

「Microsoft Bing」のスクリーンショット1

ただ、一度スッキリ検索結果を味わってしまった人間は、そう簡単に、普通の状態には戻れません。僕は、Google検索をスッキリコンパクトにしています。気になる方は、下記記事を参考にしてみてください。

上記のように、Bingでもスッキリコンパクトにしてみたいと思い、ちまちま作成しました。適当に作ったので、不備がある率100％ですが、同じようにスッキリしたい方、参考にしてみてください。

合わせて読みたい

「Microsoft Bing」の不要な部分をまとめて全削除するCSS記事を公開しています。不要なコンテンツを削除したら、よりスッキリします。

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

「Microsoft Bing」の検索結果をスッキリさせるCSS

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

Stylebotのスクリーンショット

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。長いです。ささっと作ったので、細かい検証は全然していません。

/*【Bing】ヘッダー（検索ボックス上）余白*/
#b_header {
  padding: 4px 0 0 0;
}

/*【Bing】ヘッダーの高さ*/
header#b_header {
  height: 66px;
}

/*【Bing】検索ボックスの高さ*/
.b_searchboxForm {
  height: 32px;
}

/*【Bing】検索ボックスの文字の位置調整*/
input#sb_form_q {
  height: inherit;
}

/*【Bing】検索ボックスのクリアボタンの位置調整*/
#sb_clt.sb_clrhov {
  top: -7px;
}

/*【Bing】検索ボックスの各種ボタンの位置調整*/
.mic_cont.icon.partner,
div#sbiarea,
div#sb_search {
  position: relative;
  top: -8px;
}

/*【Bing】ナビゲーションバー余白*/
.b_scopebar {
  margin: 0 160px;
}

/*【Bing】ナビゲーションバーの高さ（ボタン）*/
.b_scopebar, .b_scopebar li {
  line-height: 11px;
}

/*【Bing】ナビゲーションバーの高さ（さらに表示）*/
.b_scopebar #b-scopeListItem-menu {
  padding: 0;
  line-height: inherit;
}

/*【Bing】ナビゲーションバーの位置（記事の位置）*/
#b_tween {
  margin-top: -20px;
  padding-bottom: 0;
}

/*【Bing】検索結果全体の高さ*/
#b_content {
  padding: 20px 0 10px var(--lgutter);
}

/*【Bing】検索記事同士の余白*/
#b_results>.b_algo {
  padding: 5px 20px 0;
}

/*【Bing】結果下部の「一部の検索結果が削除されました」削除*/
li.b_msg.b_canvas {
  display: none;
}

/*【Bing】ページ下部のページネーション（番号）の余白*/
#b_results>.b_pag {
  padding: 0;
}

/*【Bing】フッター非表示*/
footer#b_footer {
  display: none;
}

右上の「×」でスタイルシートを閉じます。

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

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

ヘッダー周り

適当に単語検索して、検索結果ページを開きます。すっきりしていると思います。

「Microsoft Bing」の検索結果をスッキリコンパクトにする前と後の比較画像1

特に上部（ヘッダー）らへんは、ぎゅうぎゅうにしています。

さすがに気持ち悪いという場合は、各場所の数値を調整してみてください。1つ調整すると、他の位置も修正が必要かもしれません。もっと効率よいコードの書き方があると思いますが、僕は、CSS初心者なので限界です。

コードの中に「padding: 4px 0 0 0;」といった表記があります。これは、余白具合を表しているコードです。CSS初心者さんは、「padding: 4px;」といった感じで、「padding」に対して、数字（4px）が1つある状態を、よく目にしているかもしれません。

今回の場合は、4pxだけでなく、0が3つもあります。これは、それぞれの方向の余白具合を表しています。一番最初の数字から、上の余白、右の余白、下の余白、左の余白といった意味になっています。

今回の場合は、上の余白を4pxにして、他の右、下、左方向は、余白0にしてくれという意味になります。

フッター周り

フッター（ページ下部のメニュー）を思い切って、非表示にしています。「プライバシーとCookie」、「ヘルプ」などがあるバーのことです。これが必要な場合は、「【Bing】フッター非表示」のコードは書かないようにします。

「Microsoft Bing」の検索結果をスッキリコンパクトにする前と後の比較画像2

通常、検索結果の一番下には、「〇〇（検索した単語）に関連する検索」という項目が表示されます。

「Microsoft Bing」のスクリーンショット2

これは、本記事以外で紹介しているコードで非表示にしています。下記記事を参考にしてみてください。

検索ボックス内のボタンについて

なんか、ここらへんが難しかったです。CSSベテランさんが見ると、がっかりするような汚いコードだと思います。

適当コードのせいで、トップページのアイコンの位置がおかしくなりました。現状、まぁいっかって感じなので、修正していません。「検索ボックスの各種ボタンの位置調整」らへんのコードを弄ると、治ると思います。

「Microsoft Bing」のトップページ画像

感想

以上、「Microsoft Bing」の検索結果をスッキリして、ぎゅうぎゅう詰めにする方法でした。

些細な部分なんですが、まぁまぁいい感じです。

​2022年11月2日​​Bing