【Floorp】メニューバーのCSSから好きなエディターで開く方法

2022年8月22日Floorp

Floorpのアイコン

この記事では、Firefoxベースのブラウザ「Floorp(フロープ)」のメニューバーにある「CSS」から開くテキストエディターを、メモ帳ではなく、「Visual Studio Code」などの別のエディターで開く方法について書きます。

【Floorp】メニューバーのCSSから好きなエディターで開く方法

バージョン10.12.0(2023年4月公開)以降、初めてメニューバーのCSS→「userChrome.cssを編集する」、または「userContent.cssを編集する」をクリックした時、パス設定ダイアログが表示されるようになりました。

Windowsで「Visual Studio Code(ビジュアル・スタジオ・コード)」をインストールしている場合、自動的に「Visual Studio Code」のパスが記述された状態になります。インストールしていない場合は、Windows標準のメモ帳になります。

自分が起動したいソフトのパスに変更することで、好きなテキストエディターでCSSファイルを開けます。

初回だけ表示されて、2回目以降は表示されません。うっかり間違えたパスを書いた場合や、後から変更したくなった場合は、「about:config」ページから変更できます。

about:config」の「view_source.editor.path」項目に設定したパスが記述されているので、変更したいテキストエディターのパスに書き換えます。

Floorpには、メニューバーと呼ばれる機能があります。色々な機能にサクッとアクセスできるバーのことです。右上のメニューアイコン→その他のツール→ツールバーをカスタマイズ→下部にある「ツールバー」のドロップダウンリストから、オンオフできます。

メニューバーの中には、「CSS」という項目があります。Floorpは、自分でブラウザやウェブサイトの外観をカスタマイズできるカスタムCSS機能を搭載しています。

Floorpブラウザ自体については、以下の記事を参考にしてみてください。Firefoxベースで、多機能な国産ブラウザです。

FloorpのCSSファイルを好きなテキストエディターで開く方法

Floorpを起動して、メニューバーにある「CSS」→「userChrome.cssを編集する」、または「userContent.cssを編集する」をクリックします。

Floorpブラウザで初めてメニューバーからCSSファイルを開く手順画像1

初回起動時は、パス設定ダイアログが表示されます。好きなテキストエディターのパスを入力します。

Floorpブラウザで初めてメニューバーからCSSファイルを開く手順画像2

Windowsを使っていて、「Visual Studio Code」をインストールしている場合は、自動的に以下がパスとして入力されていると思います。このままでいい場合は、「OK」をクリックします。

C:\Users\ナポリタン寿司\AppData\Local\Programs\Microsoft VS Code\code.exe

Windows標準のメモ帳にしたい場合は、以下になります。

C:\Windows\notepad.exe

「OK」をクリックすると、指定したテキストエディターで開かれます。「Visual Studio Code」の場合、「信頼されていないファイルを許可しますか?」ダイアログが表示されるかもしれません。許可する場合は「開く」をクリックします。

Floorpブラウザで初めてメニューバーからCSSファイルを開く手順画像3

「Visual Studio Code」で、FloorpのカスタムCSSファイルが開かれます。

Floorpブラウザで初めてメニューバーからCSSファイルを開く手順画像4

次回以降は、指定したテキストエディターで開かれます。毎回パス設定を確認する必要はありません。

一度設定したパスを後から変更する方法

about:config」ページから変更できます。

about:config

Floorpのアドレスバーに貼り付けて開きます。「危険性を承知の上で使用する」をクリックします。

「about:config」の警告画面

開けたら、ページ内の検索ボックスに、以下の文字列を貼り付けます。

view_source.editor.path

1つだけヒットするはずです。その項目の右にある鉛筆マークをクリックします。

FloorpのカスタムCSSを好きなテキストエディターで開く手順画像1

テキストボックスが表示されるので、開きたいテキストエディターの実行ファイルを記述します。書き込めたら、右横のチェックマークをクリックします。

FloorpのカスタムCSSを好きなテキストエディターで開く手順画像2

感想

以上、「Floorp(フロープ)」ブラウザで、メニューバーからカスタムCSSファイルを開く際、任意のテキストエディターで開く方法でした。

全然関係ないんですが、当サイトの読者様のPC知識が高すぎて、毎回感心です。今回の件も含めて、数日に1回のペースで何かしらの情報をいただくのですが、毎回レベルが高すぎます。

堂々と、「PC初心者です」って書いているのに、集まるのはPCつよつよさんばかり…。困ったもんです。嘘です、嬉しいです。もっと叩き込んでほしいです。

2022年8月22日Floorp