当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【Stylebot】Google検索のツールを常に表示しておくCSS

2022年7月22日Google

Googleのアイコン

この記事では、PCウェブサイト版「Google」の検索結果の「ツール」を常に表示するCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」や「Stylus(スタイラス)」を利用します。

Google検索のツールメニューを常に表示させた画像

ツールメニューとは、Googleの検索結果を特定の条件で絞り込める高度なオプションのことです。特定の言語、期間、完全一致かどうかを設定できます。

何かしらの単語で検索した時、検索ボックスの下のタブメニュー(すべて、地図、画像などのこと)の横に、「ツール」というボタンが表示されます。クリックすると、約〇〇〇件といった検索結果の件数から、ツールメニューに切り替えてくれます。

PCウェブサイト版「Google」の検索結果に表示されているツールメニュー画像

本記事で紹介するCSSを導入することで、常に言語や期間限定のメニューを表示します。元々表示されていた検索結果の件数は、右側に配置するので同時に見れます。

以前、「Google Search date range shortcut」という同様の機能をもったChrome拡張機能の記事を書きました。CSSを扱うのが苦手な方は、Chrome拡張機能がおすすめです。余計な拡張機能を導入したくない方は、本記事の方法がいいかもしれません。

インストール方法

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

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

「Stylebot」拡張機能をインストールする手順画像1

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

「Stylebot」拡張機能をインストールする手順画像2

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

「Stylebot」拡張機能をインストールする手順画像3

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

「Stylebot」拡張機能を直接ツールバーに配置する手順画像

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

Google検索のツールを常に表示するCSS

Google」にアクセスします。適当な単語で検索して検索結果ページを開きます。試しに「Windows11」で検索してみます。

右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

「Stylebot」拡張機能のスクリーンショット1

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

/*Google検索の「ツール」を開いたままにする*/
div#hdtbMenus {
    top: 20px !important;
    display: flex !important;
    position: relative !important;
}

top」の数値で位置を調整できます。もしかしたら皆さんが使っているモニター、PC環境によっては上記CSSのままだと位置がおかしいかもしれません。皆さんの環境にあうよう数値を調整してみてください。

注意事項

本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。

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

「Stylebot」拡張機能のスクリーンショット2

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

検索ボックス下の「ツール」ボタンをクリックしなくても、「すべての言語」、「期間指定」、「すべての結果」メニューが表示されるようになります。別単語で検索した際も、最初から表示されます。

PCウェブサイト版「Google」の検索結果にあるツールメニューをCSSで最初から表示させた画像1

絞り込み機能も問題なく利用できます。

PCウェブサイト版「Google」の検索結果にあるツールメニューをCSSで最初から表示させた画像2

今まで表示されていた件数は、右側の上部に配置されます。

PCウェブサイト版「Google」の検索結果にある結果件数を右側に配置した画像

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

感想

以上、PCウェブサイト版「Google」の検索結果にあるツールメニューを最初から表示しておくCSSでした。

僕はGoogle検索を1日に何度も利用します。長時間利用するからこそ、自分が使いやすいようにカスタマイズしています。最高です。

2022年7月22日Google