Google検索結果の余白を除去してコンパクトにするCSS

2022年7月22日2022年11月4日Google

この記事では、Google検索結果の不要な余白を削除して、コンパクトにするCSSについて書きます。

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

本記事で紹介するCSSを使えば、Google検索結果のいらないスペース（余白）を消して、詰めることができます。

具体的には、以下の場所です。CSSが分かる方であれば、好きな余白具合にできます。本記事では、僕が好みの余白具合にしています。

検索ボックス上部
検索メニュー（すべて、画像、地図などのボタンがあるバー）
フッター（ページ下部）

コンパクトが好きな方におすすめです。

本記事のCSSを適用する前と後の比較動画を貼っておきます。余白をぎゅっと詰めているだけですが、結構雰囲気が変わります。

普段当たり前に使っているGoogle検索ですが、よく見てみると、いたるところに余計な余白があることに気づきました。嘘です。視聴者さんから教えていただきました。

「なるほど、確かに余白多いな。これ全部除去できたら、コンパクトになって、より快適なGoogle検索ライフを過ごせるんじゃない！？」と思い、早速実践してみました。

結果、今までの状態がアホらしくなるくらいコンパクトになって最高です。CSSで変更しているだけなので、いつでも元に戻せます。誰かに迷惑をかける心配もありません。

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

1. インストール方法
2. Googleの余計な余白を除去してコンパクトにするCSS
3. 感想

インストール方法

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

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

Stylebot - Chrome ウェブストア

ウェブの外観を瞬時に変更

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

Firefox・Edgeをご利用の場合

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

「Chromeに追加」でインストールできます。

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

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

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

Googleの余計な余白を除去してコンパクトにするCSS

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

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。ちょっと長いです。

/*-------------------------------------------------
Google検索結果ページのコンパクト化CSS
------------------------------------------------------*/
/*検索ボックス上部の余白除去*/
.srp #searchform {
  top: 10px;
  margin-top: 0;
}

/*検索タブバー余白*/
.yg51vc {
  top: -15px;
  height: 20px;
}

/*ツールメニューの余白*/
#tn_1 {
  margin-top: -45px;
}

/*ツールメニューの位置*/
.IC1Ck {
  margin-top: -20px;
}

/*通常ページ余白調整（上）*/
.GyAeWb {
  margin-top: -14px;
}

/*フッター削除*/
div#footcnt {
  display: none;
}

/*画像ページ余白調整*/
.tAcEof,
.ndYZfc {
  margin: 0;
  padding: 0;
}

/*画像ページの検索ボックス上部の余白除去*/
.Lj9fsd {
  top: 1px;
  margin-top: 0;
}

/*画像ページのタブメニューの余白*/
.s8GCU {
  height: 41px;
  min-height: unset;
}

/*-------------------------------------------------
Google検索結果ページのコンパクト化CSS終了
------------------------------------------------------*/

ポイント

「なんか、ここの部分の位置がおかしいな～。この部分と重なってしまって、見にくくなった！」といった場合は、各項目の数字を調整してみてください。

例えば、検索ボックスの上の余白をもう少し設けたい場合は、「検索ボックス上部の余白除去」の「top: 4px;」の数字を増やします。10pxとかです。これで、余白が少し増えます。

ただし、本記事のCSSの場合、どこか一部を変更すると、別の部分も調整しないといけない場合があります。実際の画面を見ながら、好みの数字に弄ってみましょう。

弄りすぎて、ぐちゃぐちゃになった場合は、本記事に戻って、再度CSSを丸々コピペしてみてください。

また、上記CSSの一部に「フッター削除」というコードを書いています。これは、検索結果ページの一番下にある現在地などのフッター項目を削除するコードです。

フッターを消したくない場合は、このコードだけ書かないようにしましょう。

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