【Floorp】ブックマークをアイコンのみ表示、フォルダーはテキスト表示にするCSS

2022年2月6日Floorp

Floorpのアイコン

この記事では、ブラウザFloorpで、ブックマークバー(ツールバー)のアイテムをアイコンのみ表示、フォルダーだけはアイコン+テキスト表示にする方法について書きます。

カスタムCSSを利用します。

【Floorp】ブックマークをアイコンのみ表示、フォルダーはテキスト表示にするCSS

カスタムCSSを利用することで、ブラウザFloorp (Firefox ベースのブラウザ)のブックマークバー(ツールバー)のアイテムを、アイコンのみ表示、フォルダーだけはアイコン+テキスト表示にすることができます。

ブックマークのテキストを非表示にして、アイコンだけの表示にするのでスッキリします。

フォルダーは、アイコンとテキストを表示するので間違える心配もありません。

カスタムCSSなので、フォルダーのテキストも合わせて非表示にする、アイコンを非表示にしてテキストだけを表示する…といったように、自分の好みに合わせてカスタマイズできます。

Vivaldiには、標準で選択できるオプションが用意されていますが、Floorpにはパッと見た感じなかったので、自分で実装してみました。

Vivaldiのブックマークバーの表示設定

前提

本記事では、カスタムCSSを有効にしている前提です。「カスタムCSSって何?」って方は、以下の記事を参考にしてみてください。

CSS(プログラミング)を使って、自分好みのブラウザデザインにできる機能です。

指定の場所に、「userChrome.css」ファイルを作成して、自分で書き込んでいきます。CSSを理解している必要がありますが、使えるようになれば、自分だけの最強ブラウザ環境が構築できます。

本記事では、完成状態のCSSを公開しているので、上記サイトで下準備さえできれば、後はコピペするだけでOKです。

CSS

「userChrome.css」に書き込むコードは、以下のようになっています。

/*ブックマークバーのテキスト非表示(フォルダーはテキストも表示)*/
.bookmark-item:not([type="menu"]) .toolbarbutton-text {
  display: none !important;
}
アイコンテキスト
通常のブックマーク×
フォルダー
Visual Studio Codeを使ってuserChrome.cssにCSSを書き込む

書き込めたら、Floorpを再起動します。無事に、ブックマークがアイコンのみの表示になっています。

Floorp(Firefoxベースのブラウザ)のブックマークバーのテキストが非表示になる

あくまでブックマークバーのみの反映なので、フォルダー内のアイテムについては、今まで通りアイコン+テキスト表示です。

フォルダーや、中身は今まで通りアイコンとテキスト表示

ケバブメニュー(三点ボタン)などの表示には、影響しません。いつも通り表示されます。

ケバブメニュー内には影響しない。あくまでブックマークバーのみ

このCSSは、どのテーマを利用していても反映されると思います。反映されないテーマがありましたら、コメント欄にて教えていただければなと思います。

以下、ちょっと変わった表示のCSSを紹介します。

フォルダーのテキストも非表示

上記CSSは、ブックマークバーに直接登録しているサイトをファビコン表示、フォルダーをファビコン+テキスト表示にするCSSです。「フォルダーのテキストも非表示にしたい!」って方は、以下のCSSを利用してみてください。

/*ブックマークバーのテキスト非表示(フォルダーのテキストも非表示)*/
.bookmark-item .toolbarbutton-text {
  display: none !important;
}
アイコンテキスト
通常のブックマーク×
フォルダー×

フォルダーの文字も非表示になります。

フォルダーのテキストも非表示になり、アイコンのみ表示になる

アイコン非表示、テキストのみ表示(フォルダーアイコン含む)

「アイコンを非表示にして、テキストだけ表示させたい!」って方は、以下のCSSを利用してみてください。

/*ブックマークバーのアイコン非表示(フォルダーアイコン含む)*/
.bookmark-item .toolbarbutton-icon {
  display: none !important;
}
アイコンテキスト
通常のブックマーク×
フォルダー×

全てのアイコンが非表示になり、テキストのみになります。

アイコンを非表示にして、テキストのみ表示

アイコン非表示、テキストのみ表示(フォルダーアイコン含めない)

フォルダーアイコンだけは表示したい場合、以下のCSSになります。

/*ブックマークバーのアイコン非表示(フォルダーアイコン含めない)*/
.bookmark-item:not([type="menu"]) .toolbarbutton-icon {
  display: none !important;
}
アイコンテキスト
通常のブックマーク×
フォルダー

フォルダーのアイコンが表示されるようになります。

アイコンを非表示にして、テキストのみ表示(フォルダーは今まで通り表示)

アイコンとテキスト表示(フォルダーアイコンのみ非表示)

通常のブックマークは今まで通りの表示(アイコン+テキスト)、フォルダーのアイコンだけ非表示にしたい場合は、以下のCSSになります。

/*ブックマークバーのフォルダーアイコンのみ非表示*/
.bookmark-item[type="menu"] .toolbarbutton-icon {
	display: none !important;
}
アイコンテキスト
通常のブックマーク
フォルダー×

フォルダーのアイコンだけが消えて、文字だけになります。

ブックマークバーのフォルダーアイコンのみ非表示

感想

以上、Floorpのブックマークバー(ツールバー)のテキストを非表示にして、すっきりする方法についてでした。

ブックマークバー自体を非表示にすると、もっとスッキリするんでしょうが、作業効率に響くのでアイコンのみ表示にしています。便利です。

余談ですが、ブックマークバーをクリックしたときに「常に新しいタブで開く」ようにすることも可能です。色々調べものをする方に便利です。「about:config」からサクッと有効にできます。

Posted by ナポリタン寿司