【Floorp】アクリル効果をアドレスバー、ブックマークバーにも適用する方法

2022年5月2日Floorp

Floorpのアイコン

この記事では、Firefoxベースのウェブブラウザ「Floorp」のカスタムCSS機能を使って、「Mica for Everyone」の適用範囲を、ツールバー全体に拡大させるCSSについて書きます。

Windows11のデザインに合って最高です。

Floorpの「Mica for Everyone」効果の適用範囲を拡大した画像

2022年4月後半に、Floorpブラウザが8.7.2にアップデートしました。大きな目玉機能は、「Mica for Everyone」のサポートです。これにより、タブバーの背景にアクリル(すりガラス)、マイカ効果を適用できるようになりました。

背景を透過してぼかす、すりガラスデザインが好きな方には、とても嬉しいアップデートだと思います。早速僕も適用してみて、朝から感動していました。しかし、1つだけ気になる点がありました。ツールバーの背景色です。

タブバーの背景はすりガラスになって綺麗なのですが、その下にあるツールバーは白いまま(テーマによる)で、少し浮いている感じがしました。「どーせだったら、ここもすりガラスにしてみたい!」と思い、食べているミントガムの味がなくなるまでの間、そそくさと研究したのでした。

Floorp8.7.2で実装された「Mica for Everyoneによるブラウザーのデザイン変更を許可する」をオンにした画像

「すりガラスデザイン大好きだけど、アドレスバーやブックマークバーなどのツールバー全体に適用させたい!」という方、ぜひ試してみてください。以下のようにできます。

本記事のCSSを使えば、アドレスバーやブックマークバーにもアクリル効果を適用できる

CSSで変更しているだけなので、元に戻すのも簡単です。

記事執筆時のバージョン:8.7.2(2022年4月29日公開)

前提

本記事の方法を使うには、3つの条件をクリアしていないといけません。全ての準備が終わってから、ようやく本記事の方法が適用できます。どれかが欠けていたらできないので注意です。

「カスタムCSS」の有効化

Floorpには、自分で作成したCSSを適用して、ブラウザの外観をカスタマイズできるカスタムCSSという機能が実装されています。本記事は、CSSと呼ばれるコードを適用して、ブラウザの外観を変更するので、まずはこの機能を有効にしておかないといけません。

初心者でもできるように、以下の記事にまとめています。まだ有効にしていない方は、参考にしてみてください。

「Mica for Everyone」のインストール

Floorpですりガラス効果を適用するには、外部ソフト「Mica for Everyone」が必要です。Windows11のウィンドウ(タイトルバー)にアクリル効果・マイカ効果を強制できるフリーソフトです。

Mica for Everyoneでエクスプローラーをすりガラス風にした画像

詳しいインストール方法、使い方については以下の記事を参考にしてみてください。

Floorpで「Mica for Everyone」の有効化

「Mica for Everyone」は、本来、ウィンドウのタイトルバーのみに適用できるソフトです。Floorpではオプションが用意されていて、オンにすることでタブバーまで適用できるようになっています。

Floorpを起動して、右上のケバブメニュー(三点ボタン)→設定をクリックします。

ケバブメニュー→設定

「一般(Preferences)」ページをスクロールして、下の方にある「Mica for Everyoneによるブラウザーのデザイン変更を許可する」をオンにします。オンにできたら、ブラウザを再起動します。

一般(Preferences)→Mica for Everyoneによるブラウザーのデザイン変更を許可する

CSS

CSSは、以下になります。

/*アドレスバー透明化*/
#urlbar,
.browser-toolbar:not(.titlebar-color) {
  background-color: transparent !important;
}

/*タブの形(角丸化)*/
.tab-background {
  border-radius: 6px !important;
  overflow: hidden !important;
}

/*ブックマークバーの下にある白線の除去*/
#browser {
  margin-top: -1px;
}

メモ帳やVisual Studio Codeを使って、chromeフォルダーの「userChrome.css」に書き込みます。

Visual Studio Codeに「アドレスバー透明化」コードを書き込んだ画面

書き込めたら、ファイルを上書き保存して、ブラウザを再起動します。

タブバーのみに反映されていたアクリル効果が、ツールバー全体(アドレスバー、ブックマークバー)に適用されます。

アドレスバーやブックマークバーにもアクリル効果が反映される
【ポイント】タブの形をもっと角丸にしたい!いや、その逆で四角にしたい!

上記CSSの中にある「border-radius: 6px !important;」が角丸具合を表しています。ここの「6px」という数値を変更することで、好きな角丸具合にできます。もっと角丸にしたい場合は、「20px」といったようにしてください。

タブ選択背景を、角丸20pxにした画像

「0」や「2px」といったように数字を小さくすると、四角になります。

タブを角丸にしたくない方

タブの右下、左下を角丸にしたくない方は、以下のCSSを使ってみてください。上記CSSだと、FirefoxのProtonUIって感じなので、嫌いな人が多いかもしれません。僕は好きですけどね。

/*アドレスバー透明化*/
#urlbar,
.browser-toolbar:not(.titlebar-color) {
  background-color: transparent !important;
}

/*タブ*/
.tab-background {
  overflow: hidden !important;
}

/*ブックマークバーの下にある白線の除去*/
#browser {
  margin-top: -1px;
}

タブの形は維持したまま、ツールバー全体をアクリルにします。

タブの角丸化を解除した画像

感想

以上、Floorp8.7.2で実装された「Mica for Everyone」の適用範囲を拡大するCSSについてでした。

8.7.2では、僕が要望していたブックマークバーの自動展開、サイドボタンによる最適化などが実装されて嬉しいです。最高です。

Posted by ナポリタン寿司