【Google】検索ボックス下の「画像」を「すべて」の横に配置するCSS

2022年6月13日2022年6月15日Stylebot&Stylus

この記事では、Google検索結果の検索ボックス下にある各種ボタンを並び替えて、「画像」タブを、常に「すべて」の右横に配置するCSSについて書きます。

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

本記事で紹介するCSSを使えば、Google検索ボックス下にある各種ボタンを並び替えることができます。本記事では、「すべて」の横に画像を配置する方法について書きます。

デフォルトでは、左から、すべて、地図、画像、動画、ニュース、もっと見るになっています。

ずっとこの配置ならいいんですが、厄介なことに、開いているページによって並びが異なってしまいます。例えば、ショッピングページを開いている時は、左からすべて、画像、地図、ショッピング、もっと見るになっています。

頻繁に画像検索を利用する方にとっては、不便だと思います。

開いているページによって並びが変わるので、「えっと、画像は確か左から3番目だったよな。ポチッとな…って、あぁショッピングページを開いている時は、左から2番目だったんだ！くそ！間違えた！」と押し間違えます。

そこで、どのページを開いている時でも、固定で「すべて」タブの右横に「画像」タブを配置してみたいと思います。

「Google検索ボックス下の画像タブボタンを頻繁に利用するけれど、あっちこっちに移動されて鬱陶しい！常にすべてボタンの横に配置したい！」という方、ぜひ参考にしてみてください。CSSで並びを変えるだけなので、いつでも元に戻せます。

CSS初心者の僕は、かなり苦戦しました。たった数十行のコードですが、1時間くらい費やしたと思います。この苦労が水の泡にならないように、記事にして残しておきたいと思います。

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

2022年6月15日追記

検索する単語によっては、全然並びが固定化されない不具合を発見しました。

正直、CSSだと限界があるなと感じました。そこで、何か代替案がないか探してみたところ、「検索メニュー固定器」というChrome拡張機能として公開している方がいました。詳しくは、下記記事を参考にしてみてください。

Googleのすべて、画像、地図といった各種ボタンを固定する拡張機能

この記事では、Googleの検索ボックス下の各種ボタン（すべて、画像、動画、地図など）を、好きな並び順 ...

https://www.naporitansushi.com/google-search-menu-stator/

こちらの拡張機能を使うことで、確実に検索メニューを固定化できます。

本記事よりも、遥かにおすすめです。本記事の内容は、全然使えないので、非表示にしようか迷いましたが、いちおナポリタン寿司は頑張ってみたという証拠で、残しておきたいと思います。

1. インストール方法
2. CSS
3. 感想

インストール方法

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

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

Stylebot - Chrome Web Store

Change the appearance of the web instantly

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

Firefox・Edgeをご利用の場合

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

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

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

【Stylebot】サイトにCSSを適用できるChrome拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

CSS

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

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。若干長いですが、当サイトの場合、右上の「Copy」ボタンでワンクリックコピーできます。

/*【検索ボックス下のボタン】並び替えの許可*/
body:not([jsaction*="dbOUL:.CLIENT;"]) #hdtb-msb>div,
body:not([jsaction*="dbOUL:.CLIENT;"]) .T47uwc {
  display: flex;
}

/*【検索ボックス下のボタン】すべて*/
.MUFPAc div:nth-of-type(1),
a[data-hveid="CAEQAA"] {
  order: 1;
}

/*【検索ボックス下のボタン】地図*/
.MUFPAc div:nth-of-type(2),
a[data-hveid="CAEQAQ"] {
  order: 3;
}

/*【検索ボックス下のボタン】画像*/
.MUFPAc div:nth-of-type(3),
span.rQEFy.NZmxZe {
  order: 2;
}

/*【検索ボックス下のボタン】動画*/
.MUFPAc div:nth-of-type(4),
a[data-hveid="CAEQAw"] {
  order: 4;
}

/*【検索ボックス下のボタン】ニュース*/
.MUFPAc div:nth-of-type(5),
a[data-hveid="CAEQBA"] {
  order: 5;
}

/*【検索ボックス下のボタン】もっと見る*/
.MUFPAc div:nth-of-type(6),
span[jscontroller="nabPbb"] {
  order: 6;
}

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

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

無時に、「画像」ボタンが「すべて」の横に配置されます。左から2番目です。

実際に適用する前と、適用した後の動画を貼っておきます。どのページを開いていても、「画像」ボタンが左から2番目に配置されます。

ショッピングページを開いている時は、元々2番目に「画像」ボタンがあったので、そのまま変更しないようにしています。この処理が非常に難しかったです。

正直、完璧かと言われればまだ甘いです。CSSを適用したら分かりますが、ショッピングページを開くと、一瞬、「すべて、地図、画像」…という順番で表示されます。その後、「すべて、画像、地図」の順番に戻ります。僕が書いたCSSの仕様です。まぁ一瞬なので、許容範囲かな…という感じです。

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

感想

以上、Google検索ボックス下の「画像」ボタンを「すべて」の右横に配置するCSSでした。

余談ですが、並びはそのままで、「画像」ボタンにだけ背景を付けることも可能です。「画像」だけに色がつくので、並びが変わっても、他のボタンより識別しやすくなります。

/*「画像」ボタンの背景に色を付ける*/
a[href*="tbm=isch&"]:not(.ZZ7G7b.A6Smgb) {
  background-color: #4081ca !important; /*背景色*/
  color: #fff; /*文字色*/
  border-top-left-radius: 10px; /*角丸具合（左上）*/
  border-top-right-radius: 10px; /*角丸具合（右上）*/
  height: 16px; /*高さ調整*/
}