ブラウザ関連

Chrome v87 アドレスバー ( URLバー ) の背景色をまぶしい白から変更

商品リンクをクリックし通販サイトへ飛ぶ物は 「 広告 」のリンクです。


はじめに

皆様は Windows でどのブラウザをご使用ですか?
私はメインで Vivaldi 、サブで Chrome を使用しています。

Chrome は使い勝手がいいのですが
アドレスバー ( URLバー ) が文字を入力する為に
マウスで選択すると、以下のように白くなりまぶしいので
黒系にする方法をブログネタ。

この画面の白い部分が

chrome_address_ber_20201215_0001.jpg

このようになります。

chrome_address_ber_20201215_0006.jpg

英語 検索用ワード:
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 の順で指定していきます。

各文字の右にある色の部分をクリックして色を変更します。
右の画面に反映されるので英字でも、どの項目がどこか?はわかる。

chrome_address_ber_20201215_0007a.jpg

私の設定を書いておきます。

[ 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 をダウンロードします、これがテーマ ( スキン ) です。

chrome_address_ber_20201215_0008a.jpg

次は、このテーマ ( スキン ) を書き換えていきます。

【 目次へ戻る 】

アドレスバー ( 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 キー 押して改行すれば見やすい

chrome_address_ber_20201215_0009a.jpg

この場合は、改行したものは元に戻さなくてよい。
追加も画像見たまま3行でよし。

書き込んだら manifest.json を保存します。

【 目次へ戻る 】

テーマ ( スキン ) を作成

上で manifest.json を書き換えましたが
解凍したんだから、そのまま .crx に再圧縮すればいいのでは?

と思うかもしれませんが圧縮は出来ても Chrome では読み込めません。
セキュリティ関連で、ぐぬぬ。
テーマ ( スキン ) を作成する方法を。

Chrome を起動しまして … → その他のツール → 拡張機能。

chrome_address_ber_20201215_0002.jpg

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

chrome_address_ber_20201215_0003.jpg

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

chrome_address_ber_20201215_0004.jpg

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

chrome_address_ber_20201215_0005.jpg

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

完成図。

chrome_address_ber_20201215_0006.jpg

パッケージの作成時に以下のエラーが出る場合は

拡張機能のパッケージ化のエラー
指定した拡張機能の秘密鍵は既に存在します。
その鍵を再利用するか、先に削除してください。

作成したテーマのフォルダ名+ .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 のまぶしい背景色を灰色 (グレー) に変更
関連記事

コメント

コメントがありません。

トラックバック