【Vivaldi】Chrome拡張機能をマウスオーバーで展開するCSS
この記事では、Vivaldi のオリジナルカスタムUI機能を使って、Chrome拡張機能をマウスオーバーで展開する方法について書きます。
見栄えがすっきりします。
Chrome拡張機能の
展開ボタン（矢印ボタン）にマウスを乗せるだけで、拡張機能を展開するCSSです。
通常、Chrome拡張機能を隠していると、①展開ボタンをクリック→②使いたい拡張機能をクリック…の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-extensions | Chrome拡張機能 |
| not(:hover) | マウスを乗せていない時 |
| not(:focus-within) | フォーカスされていない時 |
| display: none; | 非表示にする |
つまり、マウスを乗せた時に表示するというよりかは、ホバーしていない時に非表示、それ以外の時に表示するCSSです。（意味は一緒です）
上記のCSSを、エディター（Visual Studio Codeやメモ帳など）でスタイルシートに書き込みます。以下の感じです。
ブラウザを再起動します。
ホバーした時だけ拡張機能が展開されます。クリックでそのまま拡張機能を利用できます。
展開ボタンをクリックすると、「ボタンを隠す」にしている拡張機能たちが表示されます。
拡張機能は、右クリック→ボタンを隠すで非表示にできます。
感想
以上、Chrome拡張機能をマウスオーバーで展開するCSSについてでした。
「見栄えは、極力シンプル・スッキリ、でも使いたい時にすぐ呼び出せる」って状態にしたい方に、おすすめです。
同じようなホバー系では、ブックマークバーの自動展開CSSがあります。気になった方は、以下の記事も合わせて参考にしてみてください。
ちょっと高度になりますが、JavaScriptを利用することで、タブをマウスオーバーでアクティブ化することもできます。
素早くタブを切り替えたい人におすすめです。