【Google】検索結果を中央揃え（真ん中）にするCSS
PC版「Google」にアクセスした時、検索結果は左に寄っています。右に結構なスペースがある状態でアンバランスです。
読者の方から「中央に寄せられませんか？」と問い合わせしていただいたので、CSSを使って中央に配置したいと思います。
ただし、僕が適当に作成しただけなので、画像や動画ページでは動作しない…といった欠点があります。やろうと思えばできると思いますが、今のところ手を出していません。
自身の環境上で、他人には影響しません。いつでも元に戻せます。本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。
インストール方法
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕は、メインでは「Stylus」を使っています。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/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」の数値は各自お好みで調整します。検索ボックスの位置です。
本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。
もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。
下記画像のようになれば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を適用させる方法がいいかなと思うんですが、結構手間です。それが一番手っ取り早い感じはします。