概要
Floorp でのカスタム CSS の使い方を解説します。垂直タブを使いたいかた向けの CSS も公開されていますので是非、ご覧ください。
カスタム CSS の見本は、GitHub で Mozilla Public License 2.0 で公開しています!
このCSSは、Floorp に内臓されたために削除されました
必要なもの
・CSS 編集の技術
・10分の時間
Floorp のカスタム CSS が利用可能になりました!
Floorp では、既定でカスタム CSS の機能がオンになっています。about:config の設定を変更する必要はありません。いくつかの簡単なステップで Floorp を改造して、自分だけの Floorp を作ることができます。Firefox で利用可能な CSS は互換性が多少はありますが、Floorp 独自の CSS が存在するため、完全にはありません。あまりにも難しい CSS は動作しないと思ってくれると幸いです。
カスタム CSS のセットアップ
- about:support にアクセス(URLバーに入力して入れます)

2. プロファイルフォルダーを開きます。「プロファイルフォルダー」から「フォルダーを開く」をクリックするだけです。
3. プロファイルフォルダーに「chrome」というフォルダーを作成します。

4. 「chrome」フォルダーを開きます。開いたら右クリックして、「新規作成」を選択。「テキストドキュメント」をクリックして、「.txt」拡張子のファイルを生成します。拡張子が表示されない場合、以下を参考にしてください。
Windows 11 のエクスプローラーで拡張子を表示させる https://paso-kake.com/it/windows11/10756/
Windows 10 のエクスプローラーで拡張子を表示させる https://pc-karuma.net/windows-10-show-explorer-file-name-extension/
5. 「userChrome.css」を生成します。新規 テキストドキュメントとなっているファイルがあると思うので、名前を変更して、「userChrome.css」にリネームします。以下のように、「userChrome.css」を作成してください。Floorp はここに記載されている CSS を読み取ってブラウザに適用します。

6. userChrome.css を開き、編集します。編集するには、Microsoft 社が提供する無料のテキストエディタである「Visual Studio Code」をお勧めします。macOS、Windows、Linux で使えます。サイトは英語ですが、インストールして開くと、英語になります。

7. CSSを記述してみましょう!最初に以下のCSSをコピーしてペーストしてください!これは、Floorp に CSS の適用先を教えるものとなっています。
@charset "UTF-8";
@-moz-document url(chrome://browser/content/browser.xhtml) {
/*以下にCSSを記述*/
}
次に、Floorp に適用させられる CSS を記載します。以下が CSS です。これで水平タブの場所を削除できます。
.tabbrowser-tab {
display: none;
}
#tabs-newtab-button {
display: none;
}

8. 保存して、Floorp を再起動します。「Visual Studio Code」の左上にある「フォルダ」を選択し、保存をクリックします。自動保存を有効化するのもありです。保存が完了したら、Floorp を落として再度、起動します。適用されていない場合、起動時キャッシュを削除してみてください。

9. 完成!以下のように上のタブが削除されました!

その他の情報
Floorp のカスタム CSS の使い方を、ナポリタン寿司様がブログで書いてくださっているので、わからないことがあれば、こちら を参照してみてください。解決するかもしれません。