【Google】検索結果を中央揃え（真ん中）にするCSS

2024年4月15日2024年6月12日Google

PC版「Google」にアクセスした時、検索結果は左に寄っています。右に結構なスペースがある状態でアンバランスです。

読者の方から「中央に寄せられませんか？」と問い合わせしていただいたので、CSSを使って中央に配置したいと思います。

ただし、僕が適当に作成しただけなので、画像や動画ページでは動作しない…といった欠点があります。やろうと思えばできると思いますが、今のところ手を出していません。

自身の環境上で、他人には影響しません。いつでも元に戻せます。本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。

インストール方法

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は拡張機能のオーバーフローメニューを開いて「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

Googleの検索結果を中央に寄せるCSS

「Google」にアクセスします。インストールした「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。

/*メインの検索結果を中央に寄せる*/
div#rcnt {
    margin: 0 auto !important;
}

/*検索結果上部のナビゲーションバーを中央に寄せる*/
[role="navigation"] {
    margin: 0 auto !important;
}

/*検索結果上部の検索ボックスを中央に寄せる（数値を自分で調整）*/
form#tsf {
    margin-left: 16% !important;
}

「margin-left」の数値は各自お好みで調整します。検索ボックスの位置です。

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

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

適当なキーワードで検索します。例として「ナポリタン寿司」で検索してみます。検索結果が中央に表示されます。

Googleのドメイン上（検索結果）だけの反映なので、クリックした先の記事ページには反映されません。

本CSSは不完成です。画像タブや動画タブに切り替えた時のバーは通常どおりの配置になります。

本記事のCSSに限った話じゃないんですが、「Google」は通常の検索結果（すべてタブ）と画像タブなどで、ページの構造を変えてきています。そのせいで、画像タブや動画タブでも中央揃えにしたい場合は、それなりにCSSを追記しないといけません。めんどくさいので放置しています。

どうしても～みたいな方がいらっしゃったら、問い合わせしていただければなと思います。時間があれば見てみたいと思います。

一時的に無効化したい場合は、拡張機能メニュー内にある「Stylebot」アイコンを左クリック→「www.google.com」」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

【追記】説明文の横幅を広げてそれっぽくするCSS

「Twitter」にて説明文の横幅を広げることで、中央よりに見えるCSSを使っていると教えていただきました。「お、確かにいいですね」と思ったので、僕も作成してみました。中央に配置するCSSと併用するとおかしくなると思うので、どちらかだけ使います。

/*Google検索結果の横幅を広げる。数値はお好みで調整*/
div#rcnt {
    max-width: 100% !important;

    & div#rso div>div[lang][style^="width"] {
        width: 1000px !important;
    }
}

/*Google検索結果の右側サイドバーの位置調整（不要なら数値を100%にすると画面外に弾ける）*/
div#rcnt>div#center_col {
    width: 60% !important;
}

「width: 1000px !important;」の数値部分をお好みで調整します。数値を大きくすると、それだけ説明文が横に広がります。僕の環境だと、1400pxくらいにすると説明文（ディスクリプション）が1行で表示されました。

広げすぎると右側のサイドバーが見切れます。「width: 60% !important;」の数値を調整することで、位置を変えられます。そもそも右側のサブパネルは不要という場合、100%にすると完全に画面外にいって見えなくなると思います。

【余談】「Bing」検索結果でも同様に中央揃えにしたい場合

以前、「Microsoft Bing」ページの検索結果を中央に配置する記事を書きました。同様に真ん中配置したい方は参考にしてみてください。

感想

以上、PCウェブサイト版「Google」の検索結果ページを真ん中に寄せるCSSでした。

画像や動画ページでどうするかですよねぇ…。「margin: 0 auto !important;」しても同じ位置にならないんですよね。となると各ページで「margin-left」を使って、ちょーどいい位置に調整する方法がいいかなと思うんですが、どうやって画像や動画ページごとにCSSを適用するかですよね。

シンプルに「Stylebot」や「Stylus」に搭載されている、ドメインごとではなくワイルドカードや正規表現を使って個別ページにCSSを適用させる方法がいいかなと思うんですが、結構手間です。それが一番手っ取り早い感じはします。