当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【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」ページから変更できます。「view_source.editor.path」項目に設定したパスが記述されているので、変更したいテキストエディターのパスに書き換えます。

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

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

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

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

Floorpブラウザを起動して、メニューバーにある「CSS」→「userChrome.cssを編集する」、または「userContent.cssを編集する」をクリックします。「userChrome.css」が、Floorpブラウザ本体へのCSSです。「userContent.css」が特定のウェブサイトへのCSSです。

Floorpブラウザで初めてメニューバーからCSSファイルを開く手順画像1
メニューバーの表示・非表示を切り替える方法

メニューバーが表示されていない場合は、ツールバー(アドレスバーなどがある部分)にある適当なボタンを右クリック→「メニューバー」にチェックすることで表示できます。戻る、進む、閉じたタブを開くボタンなどの右クリックです。

Firefoxベースのブラウザ「Floorp」でメニューバーを表示する手順画像

詳しくは、下記記事を参考にしてみてください。

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

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