Googleの黒いナビゲーションバーを白くする(或いはカスタマイズする)にはどうする? - 適宜覚書-Fragments

Googleの黒いナビゲーションバーを白くする(或いはカスタマイズする)にはどうする?

      2017/03/03

黒いGoogleナビメニュー

はじめに

最近Youtubeを手始めにGoogleのWeb検索などの上部メニューが黒背景に灰色文字に変わりました。もしかすると、人によってそうなっている人とそうでない人もいるかもですが、筆者環境ではそうです。

黒いGoogleナビメニュー

黒いGoogleナビメニュー

で、本当に好みの問題なんですが、こんな真っ黒いのじゃなくて、前の白背景の方がいいなーという人もいると思います。設定で選択出来れば良いのですが、どうやら固定の模様です。そこで、今回はGoogleの黒いナビゲーションバーを白くするにはどうするかにつて紹介します。

Googleの黒いナビゲーションバーを白くするにはどうする?

  1. FirefoxやChromeのようにユーザスクリプトを使えるWebブラウザでGoogle Light Navbar for Greasemonkeyを開きます。今回はChromeでの導入を行いました。

    Google Light Navbar

    Google Light Navbar

  2. ページ内の「Install」をクリックします。

    Install

    Install

  3. Chromeの下部に処理を続けて良いかどうかの確認が表示されるので「続行」をクリックします。

    続行

    続行

  4. 「インストールの確認」ウィンドウがポップアップするので「インストール」ボタンをクリックします。

    インストール

    インストール

  5. レンチメニュー付近から吹き出し状ウィンドウでインストール完了の旨表示されます。これで導入は終わりです。

    インストール完了

    インストール完了

使ってみる

  1. 自動で有効になるのでユーザが特に何かすることはありません。既に開いているタブは有効にするのに再読み込みが必要です。
  2. Googleのページを見に行くと下図のように白い以前のナビゲーションバーになっています。
    1. 適用前

      適用前

      適用前

    2. 適用後

      適用後

      適用後

  3. 実はこのスクリプトは白いナビゲーションバー以外にカスタマイズも出来ます。ナビゲーションバーの右側にある設定メニューを開くと、背景色や文字色の設定が表示されます。

    ナビゲーションバーの色カスタマイズ

    ナビゲーションバーの色カスタマイズ

  4. これらをクリックすると色番号の指定画面となります。選択式じゃないのはちょっと面倒ですが、WEB色見本 原色大辞典 - HTML Color Namesカラー コード - Google 検索を参考に設定してみてください。

おわりに

今回は、Googleの黒いナビゲーションバーを白くする(或いはカスタマイズする)にはどうするかについて紹介しました。この記事がお役に立てると嬉しいです。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Google, Tips , , , , ,