【Vivaldi】Chrome拡張機能をマウスオーバーで展開させるCSS

2021年11月2日2021年11月7日CSS

この記事では、Vivaldi のオリジナルカスタムUI機能を使って、Chrome拡張機能をマウスオーバーで展開する方法について書きます。

見栄えがすっきりして便利です。

Chrome拡張機能の展開ボタン（矢印ボタン）にマウスを乗せるだけで、拡張機能を展開するCSS です。

通常、Chrome拡張機能を隠していると、展開で1クリック → 使いたい拡張機能を1クリックの合計で2クリック必要になります。少し手間です。

今回紹介するCSS を使えば、展開ボタンにマウスを乗せる＝拡張機能を表示 → 使いたい拡張機能を1クリックのひと手間できます。本当に些細な部分ですが、作業効率が上がります。

マウスオーバーで拡張機能を表示して、クリックで「ボタンを隠す」に設定している拡張機能を表示します。

言葉だと難しいので、動画を貼っておきます。

とても便利です。

オリジナルカスタムUI（CSS）を使うには？

この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。

有効にしていないという方は、以下の記事を参考にしてみてください。

【Vivaldi】自分で作成したCSS を適用する方法。より高度なカスタマイズをしてみよう

この記事では、ウェブブラウザ「Vivaldi」に、CSS を適用する方法について書きます。 Vivaldi では、オ ...

https://www.naporitansushi.com/vivaldi-css/

CSS は以下になっています。

/* マウスオーバーでChrome拡張機能を展開 */
.toolbar-extensions:not(:hover):not(:focus-within) .ExtensionIcon {
  display: none;
}

このCSS は、以下のVivaldi フォーラムを参考にさせていただきました。感謝です。

僕はCSS 初心者なので完全な理解は難しいですが、多分以下の構成になっているはずです。

つまり、マウスを乗せた時に表示する…というよりは、マウスが乗っていない時に非表示にして、それ以外の時に表示するってことですね。（意味としては一緒ですね）

上記のCSS を、エディタ（Visual Studio Code など）でCSS に書き込みます。以下の感じです。

ブラウザを再起動します。以上です。

以上、Chrome拡張機能をマウスオーバーで展開するCSS についてでした。

僕は、「見栄えは極力シンプル・スッキリ、でも使いたい時にすぐ呼び出せる」って状態が理想なので、こういうのはほんとありがたいです。

同じく、ブックマークバーの自動展開CSS もあるので、気になったらそちらも参考にしてみてください。

【Vivaldi】ブックマークバーをマウスオーバーで自動開閉するCSS

この記事では、Vivaldi のオリジナルカスタムUI機能を使って、ブックマークバーをマウスオーバーで自動 ...

https://www.naporitansushi.com/auto-bookmarkbar/