Chrome v87 アドレスバー ( URLバー ) の背景色をまぶしい白から変更
記事の執筆に AI な類は使用しておりません。
【 目次 】
はじめに中級者~向け、シンプル説明
初心者様 (テーマ、スキンを触ったことがない人) 向け
テーマ ( スキン ) を入手
アドレスバー ( URLバー ) の色情報を追加
テーマ ( スキン ) を作成
おすすめリンク/関連記事
はじめに
皆様は Windows でどのブラウザをご使用ですか?私はメインで Vivaldi 、サブで Chrome を使用しています。
Chrome は使い勝手がいいのですが
アドレスバー ( URLバー ) が文字を入力する為に
マウスで選択すると、以下のように白くなりまぶしいので
黒系にする方法をブログネタ。
この画面の白い部分が

このようになります。

英語 検索用ワード:
url ber / address ber / white / gray / change / setting / skin / theme
【 目次へ戻る 】
中級者~向け、シンプル説明
ここは書き換える箇所だけわかる人向けです。初心者様、意味がわからない方は下へどうぞ、詳細説明あります。
やっている事はアドレスバー ( URLバー ) の部分に
色情報を付加するだけ。
Chrome 用のテーマ ( スキン ) を用意して解凍し
manifest.json に以下を追加、保存。
スキンを作り直し、拡張機能画面から読み込む。
"background_tab_incognito_inactive": [55,55,55],
"omnibox_background": [50,50,50],
"omnibox_text": [180,180,180],
上2つが背景色、3つ目が文字色です。
色の指定により、背景色と文字色が同色になり ( 自動調節される? )
一部見えなくなる事があります。
その場合は色を調節してください。
上の色設定なら問題はありません。
【 目次へ戻る 】
スキンを入手
ここからはテーマ ( スキン ) の入手と書き換え方をご紹介。最初にテーマを入手します。
これを書き換えて適用すれば簡単なので。
以下のページに飛びます。
好きな色でテーマを作成可能なサイト。
Chrome Theme Creator
Create Custom Google Chrome Themes Online
左上の Image / Colors / Pack の順で指定していきます。
各文字の右にある色の部分をクリックして色を変更します。
右の画面に反映されるので英字でも、どの項目がどこか?はわかる。

私の設定を書いておきます。
[ Image ]
NTP Background → c0c0c0
Frame → 202020
Toolbar → 908c8f
Tab Background → 202020
[ Colors ]
Toolbar → 000000
Tab Text → 000000
Background Tab Text → c0c0c0
Bookmark Text → 000000
NTP Text → 000000
NTP Link → 063774
Control Buttons → 202020
Buttons → 000000
設定が終了したら Pack → Pack and Download で
.crx をダウンロードします、これがテーマ ( スキン ) です。

次は、このテーマ ( スキン ) を書き換えていきます。
【 目次へ戻る 】
アドレスバー ( URLバー ) の色情報を追加
上で入手しましたテーマ ( スキン ) を書き換えます。ダウンロードした .crx ファイルは圧縮ファイルなので
ZIP 形式が解凍できるアプリにドラッグなどして解凍します。
手持ちの解凍アプリで出来ない場合は
PeaZip / EXPLZH / WinRAR で可能です。
※入れる場合は関連付けが変わると思うので
解凍するだけで使用可能な以下がオススメ
PeaZip Portable の評価・使い方 - フリーソフト100
manifest.json と images フォルダが出来るので
デスクトップに 「 灰色テーマ 」 というフォルダに
全部コピーしたとしまして説明します。
灰色テーマ\manifest.json
灰色テーマ\images
manifest.json をメモ帳などのエディタで開きます。
横に文字がズラーッとありますので "colors" で検索します。
※ 最前と最後尾の "" も含めて検索
それより後ろの括弧範囲ならどこでもいいのですが
( **は指定したものにより数値が変化 )
"ntp_link":[**,**,**],
この , の後ろに以下を挿入
"background_tab_incognito_inactive": [55,55,55],
"omnibox_background": [50,50,50],
"omnibox_text": [180,180,180],
3行になっていますが1行にして下さい。
前方の , と 後方の , が消えたり2つ連続であるなどに注意
※エラーが出ます
挿入箇所がわからない場合は
], の後ろ全て、自分で Enter キー 押して改行すれば見やすい

この場合は、改行したものは元に戻さなくてよい。
追加も画像見たまま3行でよし。
書き込んだら manifest.json を保存します。
【 目次へ戻る 】
テーマ ( スキン ) を作成
上で manifest.json を書き換えましたが解凍したんだから、そのまま .crx に再圧縮すればいいのでは?
と思うかもしれませんが圧縮は出来ても Chrome では読み込めません。
セキュリティ関連で、ぐぬぬ。
テーマ ( スキン ) を作成する方法を。
Chrome を起動しまして … → その他のツール → 拡張機能。

デベロッパーモードを有効に ( 右にスライドさせる )
( 発言すると舌噛みそうな名前は何度見ても噴く )

拡張機能をパッケージ化。

上の拡張機能のルートディレクトリの 観覧 を選択し
manifest.json のあるフォルダを選択 → 拡張機能をパッケージ化。
※秘密鍵ファイルは省略可能

作成された テーマ、拡張子 .crx が作成されるので
Chrome の拡張機能画面にドラッグして終了。
完成図。

パッケージの作成時に以下のエラーが出る場合は
拡張機能のパッケージ化のエラー
指定した拡張機能の秘密鍵は既に存在します。
その鍵を再利用するか、先に削除してください。
作成したテーマのフォルダ名+ .pem という拡張子が
あるのでそれを消せば問題ない。
作り直す場合、2回目の作成時に通常はこれらを
消してないと思うのでエラーが出る事が多い。
-----
とまあ、こんな感じで
Chrome のアドレスバー ( URLバー ) の
まぶしい背景色の白色を変更しようでした。
こんな事をしなくても Windows10 のダークモードを使用すればいいのに
となりますが、 Windows のテーマをハイコントラストで使用していると
ダークモードが使えないので、色も白のままだという。
それでは皆様に、まぶしくない画面でブラウジングを快適に行えますよう
ブラウジングの神様にお願いをいたしまして、これにて終了です。
まぶしい画面にバイバーイ。
以上。
おすすめリンク
・Amazon / 楽天市場 / Yahoo! でお買い物をする。関連リンク
・Comodo IceDragon 日本語化、タブ色変更方法、その他。・Vivaldi v3.3.2022.39 プライベートウィンドウのテーマを元に戻す ( 使っていたテーマに )
・Win10 2009 October 2020 のまぶしい背景色を灰色 (グレー) に変更
・【画面全体・ブラウザ・エクスプローラ】パソコン画面のまぶしさをなくそう
・Firefox stylish (Stylus) アドオンでまぶしい背景色を暗く(灰色)にするCSS その2
・Firefox テーマ ( 外見 ) を変更するアドオン 「 Firefox Color 」( URL・検索蘭の色も変更可 )
・【設定】デスクトップをホイール上下し画面の明るさを変更 MouseGestureL.ahk と f.lux 使用
・Vivaldi ポータブルでの使用・設定方法とタブ/背景/文字色のまぶしくない設定
・Firefox Vivaldi Chrome ブックマークをHTMLで書き
Dropbox / Googleドライブで共有
・Firefox Vivaldi Chrome 現在のウィンドウに保存したタブを復元
日本語訳と使用方法
・Win10 ハイコントラストテーマで Vivaldi/Chrome/Edge の配色が変を直す
・Win10 May 2021 Update 21H1 のまぶしい背景色を灰色 (グレー) に変更
- 関連記事
-
- uMarix ( 拡張機能/アドオン ) 開いたサイトと 1st-party だけデフォルトで許可する設定方法 (2023/11/13)
- 2023/09 Vivaldi v6.2 ~ V6.4 で設定した事のまとめ/余分な機能の停止など (2023/09/08)
- タイッツーの背景色を灰色 ( グレー ) にし文字を大きくする CSS / Stylusアドオン使用 (2023/08/05)
- パソコン/タイッツーで開いた画像のタブを MouseGestureL.ahk で閉じる (マウスジェスチャー) (2023/08/03)
- Firefox 終了時にブックマークをファイル出力/Twitter フォロワーを一気にタブで開く (2023/07/06)
- 2023/03 パソコン版ツイッターで検索やトレンドが 「申し訳ありません。問題が発生しました。」 (2023/03/23)
- Firefox 装飾キーとマウスホイール回転の動作を変更 ( Alt / Ctrl / Shift / Win キー ) (2023/01/19)
- Firefox SwitchyOmega でVPN接続が詰まる/パケロス的に読み込まないの改善 (2022/10/03)
- Firefox v105 ツイッターなどのページでスクロールが引っかかるを改善 (2022/09/26)
- パソコン版ツイッター投稿画面の 全員 ( オーディエンス ) /認証済み組織の表示を消す Firefox Chrome Vivaldi Edge (2022/06/17)