【広告】

Amazonブラックフライデーが12月2日まで開催中です!

個人的には、Anker製品か、コカ・コーラがかなり安くなっているのでおすすめです!

高級キーボードで有名な東プレが最近発売した「REALFORCE R3」もセールをやっていました!詳しくはこちらの記事を確認してみてくださーい。

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

2021年11月2日CSS

Vivaldi のアイコン

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

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

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

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

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

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

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

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

とても便利です。

オリジナルカスタムUI(CSS)を使うには?

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

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

CSS

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

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

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

参考:Toggle extension on hover | Vivaldi Forum

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

CSS意味
.toolbar-extensionsChrome拡張機能
not(:hover)マウスを乗せていない時
not(:focus-within)フォーカスされていない時
display: none;非表示にする

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

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

マウスオーバーでChrome拡張機能を展開するCSS

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

まとめ

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

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

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

Posted by ナポリタン寿司