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

2022年7月22日Google

Googleのアイコン

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

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

【Stylebot】Google検索結果の余計な余白を除去するCSS

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

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

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

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

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

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

Googleの検索結果ページは、余白だらけということを示した画像

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

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

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

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

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

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

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

/*-------------------------------------------------
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です。右上の「×」でスタイルシートを閉じます。

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

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

Googleの検索結果ページの上部らへんの余白が狭くなって、コンパクトになります。比較用のGIF画像を貼っておきます。結構違うことが分かります。

本記事のCSS適用前と適用後の比較GIF画像

ダークモードにしている場合でも動作します。

Google検索結果をコンパクトにした比較画像1

画像ページでも動作します。

Google検索結果をコンパクトにした比較画像2

フッター(ページ下部)もスタイリッシュになります。現在地などをまとめて削除しています。

Google検索結果をコンパクトにした比較画像3

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

感想

以上、Googleの検索結果ページをスタイリッシュに、コンパクト化するCSSでした。

些細な部分ですが、結構違います。余談ですが、YouTubeのチャンネルページも同様にコンパクト化できます。

Google関連のCSSは、他にも色々公開しているので、合わせて参考にしてみてください。

Posted by ナポリタン寿司