【Stylebot】Google検索のツールを常に表示しておくCSS
この記事では、Google検索結果のツールを常に表示するCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、Google検索結果の「ツール」ボタンを押さなくても、常に表示することができます。
ツールメニューとは、Googleの検索結果を特定の条件で絞り込める高度なオプションのことです。特定の言語、期間、完全一致かどうかを設定できます。
何かしらの単語で検索した時、検索ボックスの下のタブメニュー（すべて、地図、画像などのこと）の横に、「ツール」というボタンが表示されます。クリックすると、約〇〇〇件といった検索結果の件数から、ツールメニューに切り替えてくれます。
このクリックの手間を省けます。常に、言語や期間限定のメニューを表示します。元々表示されていた検索結果の件数は、右側に配置するので、同時に見れます。
以前、「Google Search date range shortcut」という同様の機能をもったChrome拡張機能を紹介しました。CSSを扱うのが苦手な方は、Chrome拡張機能がおすすめです。余計な拡張機能を導入したくない方は、本記事を参考にしてみてください。
https://www.naporitansushi.com/google-search-date-range-shor...Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
Google検索のツールを常に表示するCSS
Googleにアクセスします。適当な単語で検索して、検索結果ページを開きます。試しに、「Windows11」で検索してみます。
右上の拡張機能アイコン→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*Google検索の｢ツール｣を開いたままにする*/
#hdtbMenus {
padding-top: 3px;
padding-bottom: 7px;
top: 68px;
display: block;
background: transparent;
}
/*検索件数を右横に配置する*/
#result-stats {
position: relative;
left: 62em !important;
}右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.google.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
検索ボックス下の「ツール」ボタンをクリックしなくても、「すべての言語」、「期間指定」、「すべての結果」メニューが表示されます。別単語で検索した際も、最初から表示されます。
これまで通り、普通に利用できます。
今まで表示されていた件数は、右側の上部に配置されます。
使っているモニターや、画面サイズによっては、件数の位置がおかしくなるかもしれません。
その場合、「検索件数を右横に配置する」コード内にある「left: 62em !important;」の数値を調整してみてください。「em」や、「!important;」には手を加えずに、「62」の数字だけ弄ります。好みの位置を探してみてください。
一時的に無効化したい場合は、Stylebot→「www.google.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、Google検索結果のツールメニューを最初から表示しておくCSSでした。
僕は、Google検索を、1日に何度も利用します。長時間利用するからこそ、自分が使いやすいようにカスタマイズしています。最高です。