Open in app

Sign in

Write

Sign in

Googleの検索結果を中央に表示させる

ゾゥ™
20 min readDec 26, 2019

--

更新日時：2024年3月22日（インポート版：Mozilla形式）

更新内容：

  1. レイアウトの位置ズレを修正

課題

PCでGoogle検索すると左に寄りすぎていて首が痛くなるのでサクッと解決する。

左に寄り過ぎ

やったぜ☆

ウルトラワイドモニターなど16:9以外のアスペクト比でも中央揃えで表示可能。

解決方法

まずブラウザに拡張機能を入れる。

リンク先の右上から拡張機能を追加。Chrome、firefox、Operaが対応している。

Stylus :: add0n.com
https://add0n.com/stylus.html

Stylusのアイコンをクリックして[管理]をクリック。

Stylusの画面が開いたら、左上の[新スタイルを作成]をクリック。

次に[インポート]をクリック。

表示されたウィンドウに下記の「Mozilla形式のコード」をコピペする。

Mozilla形式のコード

@-moz-document regexp("^(?=https://www.google.com/search?)(?!.*&tbm=lcl)(?!.*&tbm=isch)(?!.*&tbm=shop)(?!.*&udm=).*$") {
/*適用先：全体*//*アカウントアイコン*/
#gb {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1130px;
    right: 0;
}/*検索設定*/
.c58wS {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 745px;
    right: 0;
}
}@-moz-document regexp("^(?=https://www.google.com/search?)(?!.*&tbm=)(?!.*&udm=).*$") {
/*適用先：通常検索のみ*//*検索バー（通常検索専用）更新：2022-09-09*/
.tsf {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1100px;
}/*結果全体（通常検索専用）更新：2022-09-09*/
.main {
    margin: auto!important;
    width: 1400px!important;
    position: absolute;
    top: 0;
    /*bottom: 0;*/
    left: 0;
    right: -300px;
}/*doodle背景イラスト（通常検索専用）*/
.J1hqV {
    margin: auto!important;
    width: 0!important;
    right: -105px;
}
}@-moz-document regexp("^(?=https://www.google.com/search?)(?=.*&tbm=)(?!.*&tbm=lcl)(?!.*&tbm=isch)(?!.*&tbm=shop)(?!.*&udm=).*$") {
/*適用先：テーマ検索のみ*//*検索バー*/
.tsf {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1100px;
}/*結果全体 */
.main {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    /*bottom: 0;*/
    left: 0;
    right: -220px; /*更新:2023-10-14*/
}/*doodle背景イラスト*/
.CU3Cw {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1100px;
}
}

貼り付けたら「スタイルを上書き」をクリック

以下の画像のようになっていれば正常にインポートされている。

仕上げ

スタイル名を入力する。ここでは、

Center Google Search Result

としておく。

編集画面で[保存]を押し、☑有効にチェックを入れて完成。

もう首は痛くならない。

もし表示が変わらない場合はURLを確認してほしい。

上記のコードはgoogle.comのドメインを対象に作成しているため、利用しているURLがgoogle.co.jpとなっている場合は適用されない。そのため、google.comのドメインから検索して再度動作を確認してください。

また、表示位置がおかしくなってしまう場合は先程のコードの数字を少しずつ変えることで調整が可能です。

それでは快適な検索ライフを。

過去の更新内容

2022年9月9日（インポート版：Mozilla形式）

更新内容：

  1. ログインした状態において検索窓に検索設定アイコンが重なる不具合を修正
  2. テーマ検索において検索結果が中央寄りにならない不具合を修正

2022年2月16日（インポート版：Mozilla形式）

更新内容：

  1. 通常検索の結果画面において、右端に表示される情報表示パネルの位置が最下部に移動してしまう問題を修正。

2021年9月27日（インポート版：Mozilla形式）

更新内容：

  1. 通常の検索結果画面において、doodle背景イラストが正常に表示されない不具合を修正。
  2. Google側の仕様変更に柔軟に対応できるよう、適用先URLを検索テーマごとに区分し、個別にCSSを適用できるよう実装方法を変更。

2021年9月21日（インポート版：Mozilla形式）

メインの検索結果についてのみ、表示がずれるようになったので専用の「コード 2:」セクションを追加。「コード 1:」についてはコード内容、適用先ともに変更なしです。また今回から設定操作の簡略化のためStylusのインポート機能を使用した方法に変更しています。

2021年8月6日

正規表現で適用先URLを制限する方式への移行に伴い、画像検索画面向けコードを削除。今回は適用先についても合わせてご変更ください。

2021年7月2日

新たに配置された検索設定のアイコンに対応。

2021年4月22日

左上のGoogleロゴ付近にたまに表示されてるdoodleの背景イラストの位置を中央揃えにするコードを末尾に追加。

2021年3月25日

画像検索画面でアカウントアイコンが右端からはみ出てしまう問題に対処するコードを末尾に追加。

過去のコード

2022年9月9日以前（Mozilla形式）

@-moz-document regexp("^(?=https://www.google.com/search?)(?!.*&tbm=lcl)(?!.*&tbm=isch)(?!.*&tbm=shop).*$") {
/*適用先：全体*//*検索バー*/
.tsf {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}/*アカウントアイコン*/
#gb {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1130px;
    right: 0;
}/*検索設定*/
.c58wS {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 730px;
    right: 0;
}
}@-moz-document regexp("^(?=https://www.google.com/search?)(?!.*&tbm=).*$") {
/*適用先：通常検索のみ*//*結果全体（通常検索専用）更新：2022-02-14*/
.main {
    margin: auto!important;
    width: 1400px!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -400px;
}/*doodle背景イラスト（通常検索専用）*/
.J1hqV {
    margin: auto!important;
    width: 0!important;
    right: -105px;
}
}@-moz-document regexp("^(?=https://www.google.com/search?)(?=.*&tbm=)(?!.*&tbm=lcl)(?!.*&tbm=isch)(?!.*&tbm=shop).*$") {
/*適用先：テーマ検索のみ*//*結果全体*/
.main {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}/*doodle背景イラスト*/
.CU3Cw {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}
}

2022年2月15日以前（Mozilla形式）

@-moz-document regexp("^(?=https://www.google.com/search?)(?!.*&tbm=lcl)(?!.*&tbm=isch)(?!.*&tbm=shop).*$") {
/*適用先：全体*//*検索バー*/
.tsf {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}/*アカウントアイコン*/
#gb {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1130px;
    right: 0;
}/*検索設定*/
.c58wS {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 730px;
    right: 0;
}
}@-moz-document regexp("^(?=https://www.google.com/search?)(?!.*&tbm=).*$") {
/*適用先：通常検索のみ*//*結果全体（通常検索専用）*/
.main {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -120px;
}/*doodle背景イラスト（通常検索専用）*/
.J1hqV {
    margin: auto!important;
    width: 0!important;
    right: -105px;
}
}@-moz-document regexp("^(?=https://www.google.com/search?)(?=.*&tbm=)(?!.*&tbm=lcl)(?!.*&tbm=isch)(?!.*&tbm=shop).*$") {
/*適用先：テーマ検索のみ*//*結果全体*/
.main {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}/*doodle背景イラスト*/
.CU3Cw {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}
}

2021年9月27日以前（Mozilla形式）

@-moz-document regexp("^(?=https://www.google.com/search?)(?!.*&tbm=lcl)(?!.*&tbm=isch)(?!.*&tbm=shop).*$") {
/*結果全体*/
.main {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}/*検索バー*/
.tsf {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}/*アカウントアイコン*/
#gb {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1130px;
    right: 0;
}/*検索設定*/
.c58wS {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 730px;
    right: 0;
}/*doodle背景イラスト*/
.CU3Cw {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}}
@-moz-document regexp("^(?=https://www.google.com/search?)(?!.*&tbm=).*$") {
/*結果全体（通常検索専用）*/
.main {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -120px;
}
}

2021年8月6日以前

/*結果全体*/
.main {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}/*検索バー*/
.tsf {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}/*アカウントアイコン*/
#gb {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1130px;
    right: 0;
}/*検索設定*/
.c58wS {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 730px;
    right: 0;
}/*doodle背景イラスト*/
.CU3Cw {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}/*アカウントアイコン (画像検索)*/
.Si7Nvc {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0!important;
    bottom: 0;
    left: 0;
    right: 9000px; /*ウルトラワイド画面対応のため十分に大きな値を設定*/
}/*検索設定 (画像検索)*/
.LEv8df {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 900px;
    right: 0;
}

2021年7月2日以前

/*アカウントアイコン*/
#gb {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1010px;
    right: 0;
}/*検索バー*/
.tsf {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}/*結果全体*/
.main {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}/*アカウントアイコン 画像検索画面*/
.Si7Nvc {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0!important;
    bottom: 0;
    left: 0;
    right: 9000px; /*ウルトラワイド画面対応のため十分に大きな値を設定*/
}/*doodle背景イラスト*/
.CU3Cw {
    margin: auto!important;
    width: 0!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}

2021年3月25日以前

/*アカウントロゴ*/
#gb {
    margin: auto!important;
    width: 0px!important;
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 950px;
    right: 0;
}/*検索バー*/
.tsf {
    margin: auto!important;
    width: 0px!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}/*結果全体*/
.main {
    margin: auto!important;
    width: 0px!important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 1000px;
}

2020年12月13日以前

#tsf {
    margin: auto!important;
}#gb {
    width: 890px!important;
    margin: auto!important;
    right: 0px!important;
}.mw {
    margin: auto!important;
    width: 990px!important;
    margin-top: -0px!important;
}#appbar, #hdtbSum {
    width: 990px!important;
    margin: auto!important;
    right:0px!important;
}.hdtb-mn-cont {
    width: 1010px!important;
    margin: auto!important;
    right:0px!important;
}.A8SBwf {
    width: 0px!important;
    margin: auto!important;
    right: 365px!important;
}#resultStats{
    width: 870px!important;
    right: 0px!important;
}#ab_ctls {
    width: 120px!important;
}

2020年3月25日以前

#tsf {
    margin: auto!important;
}#gb {
    width: 790px!important;
    margin: auto!important;
    right: 0px!important;
}.mw {
    margin: auto!important;
    width: 990px!important;
    margin-top: -0px!important;
}#appbar, #hdtbSum, .hdtb-mn-cont {
    width: 990px!important;
    margin: auto!important;
    right:0px!important;
}.A8SBwf {
    width: 0px!important;
    margin: auto!important;
    right: 365px!important;
}#resultStats{
    width: 870px!important;
    right: 0px!important;
}#ab_ctls {
    width: 120px!important;
}
Google Search
CSS
HTML
Productivity

--

--

ゾゥ™
ゾゥ™

Written by ゾゥ™

3 Followers
1 Following

まだ誰も解説していないTipsを書いていく

Responses (2)

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams