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

Stylebot&Stylus

Stylebotのアイコン

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

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

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

本記事で紹介するCSSを使えば、Googleの検索結果ページをスタイリッシュにできます。具体的には、検索ボックスの上部にある余白、タブバーの上下余白、ツールメニューの余白、フッターの除去です。

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

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

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

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

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

CSS

Googleにアクセスします。適当な単語で検索して検索結果ページを表示します。試しに「ナポリタン」で検索してみます。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotの画面 Stylebotを開くをクリック

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

/*検索ボックス上部の余白除去*/
.srp #searchform {
  top: 4px;
  margin-top: 0;
}

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

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

/*通常ページ余白調整(上)*/
.GyAeWb {
  margin-top: -14px !important;
}

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

/*画像ページ余白調整*/
.tAcEof,
.ndYZfc {
  margin: 0 !important;
  padding: 0 !important;
}
/*画像ページの検索ボックス上部の余白除去*/
.Lj9fsd {
  top: 1px;
  margin-top: 0;
}
/*画像ページのタブメニューの余白*/
.s8GCU {
  height: 41px;
  min-height: unset;
}
ポイント

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

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

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

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

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

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

書き込めたら、右上の「×」でスタイルシートを閉じます。

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

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

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

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

ダークモードにしたGoogle検索結果ページ

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

「ナポリタン」の画像検索結果ページを表示した画像

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

感想

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

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

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

Posted by ナポリタン寿司