【Vim Vixen】GitHubページ下部の白いバーを消す方法

2022年07月16日公開

当サイトはアフィリエイト広告を使用しています

GitHubのページ下部に白いバーが出現します。

Issuesにいくつか解決方法がありましたが、一番簡単そうなこちらを適用しました。アドオンあり（Stylus導入）と、アドオンなし（userContent.css導入）の方法があります。いずれもcss.vimvixen-console-frame { color-scheme: light !important; }を書き込みます。アドオンあり（Stylus導入）の方が手順は少なく簡単です。環境

Windows 10

Firefox 102.0.1

Vim Vixen 1.2.3

解決方法：アドオンあり（Stylus導入）アドオンStylusをインストールアイコンをクリックしてから「管理」をクリック

「新スタイルを作成」をクリック

右側にある「＋」をクリックして適用先を指定

コード1に下記cssをコピペ、適当な名前をつけて保存をクリック.vimvixen-console-frame { color-scheme: light !important; }

(Dark Reader（4.9.52）を使っていると、すべてのページの下部に白いバーがでるので、すべてのページで適用しました。)解決方法：アドオンなし（userContent.css導入）やや手順が多いですがアドオンなしで解決できます。大まかな手順

userContent.cssが読み込めるように設定

chromeフォルダーの作成

userContent.cssファイルの作成

FirefoxにuserContent.cssが読み込めるように設定Firefoxのアドレスバーにabout:configと入力

「危険性を承知の上で使用する」をクリック。

設定名を検索するところにtoolkit.legacyUserProfileCustomizations.stylesheetと入力。右側の切り替えマークをつかって値をtrueにする。

chromeフォルダーの作成アドレスバーにabout:supportと入力してEnterキーを押すとトラブルシューティング情報の画面がでます。プロファイルフォルダーの欄の「フォルダーを開く」をクリック。

開いたフォルダーのなかにchromeという名前のフォルダーを作ります。

userContent.cssファイルの作成メモ帳などのテキストエディターを開いて下記cssをコピペ（@charset "UTF-8";を付けた方がいいらしい）すべてのページ@charset "UTF-8"; .vimvixen-console-frame { color-scheme: light !important; }GitHubのみに適用する場合はこちら、@document - CSS: カスケーディングスタイルシート | MDNを見ると@charset "UTF-8"; @-moz-document domain(github.com) { .vimvixen-console-frame { color-scheme: light !important; } }複数のページ（ドメイン）に適用する場合はこちら、Client-side user custom CSS single file for overriding multiple domains - Stack Overflowを見ると@charset "UTF-8"; @namespace url(http://www.w3.org/1999/xhtml); @-moz-document domain(example1.com), domain(example2.com), domain(example3.com) { .vimvixen-console-frame { color-scheme: light !important; } }@namespace url(http://www.w3.org/1999/xhtml);はなくても動きました。最後に、ファイル名userContent.css、文字コードUTF-8にして上で作成したchromeフォルダー内に保存。Firefoxを再起動すれば適用されます。