Floorp カスタム CSS について！

概要

Floorp でのカスタム CSS の使い方を解説します。垂直タブを使いたいかた向けの CSS も公開されていますので是非、ご覧ください。

カスタム CSS の見本は、GitHub で Mozilla Public License 2.0 で公開しています！

必要なもの

・CSS 編集の技術
・10分の時間

Floorp のカスタム CSS が利用可能になりました！

Floorp では、既定でカスタム CSS の機能がオンになっています。about:config の設定を変更する必要はありません。いくつかの簡単なステップで Floorp を改造して、自分だけの Floorp を作ることができます。Firefox で利用可能な CSS は互換性が多少はありますが、Floorp 独自の CSS が存在するため、完全にはありません。あまりにも難しい CSS は動作しないと思ってくれると幸いです。

カスタム CSS のセットアップ

  1. about:support にアクセス（URLバーに入力して入れます）
About:support のサイト

2. プロファイルフォルダーを開きます。「プロファイルフォルダー」から「フォルダーを開く」をクリックするだけです。

3. プロファイルフォルダーに「chrome」というフォルダーを作成します。

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 を読み取ってブラウザに適用します。

画像に alt 属性が指定されていません。ファイル名: image-10-1024x784.png

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 の使い方を、ナポリタン寿司様がブログで書いてくださっているので、わからないことがあれば、こちら を参照してみてください。解決するかもしれません。