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

2022年12月4日カスタムCSS

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

見栄えがすっきりします。

本記事のCSSを使うことで、ナビゲーションバー内にあるChrome拡張機能（）をマウスオーバーで展開できます。

通常、Chrome拡張機能を隠していると、以下の手順で展開する必要があります。人によっては手間だと感じるかもしれません。

1. 展開ボタンをクリック
2. 使いたい拡張機能をクリック

導入すると、展開ボタンにマウスを乗せるだけで、拡張機能が表示されます。些細な点ですが、見栄えをスッキリさせたい方に、便利かもしれません。展開ボタンをクリックすると、「ボタンを隠す」に設定している拡張機能を表示します。

言葉だと難しいので、動画を貼っておきます。普段は非表示になっているので、見栄えがすっきりします。

本記事は、オリジナルカスタムUIが有効になっていることを前提に書きます。有効にしていないという方は、以下の記事を参考にしてみてください。

【Vivaldi】カスタムCSSの導入方法。自由にカスタマイズしてみよう！

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

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

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

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

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

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

カスタムCSSファイルを、テキストエディター（Visual Studio Codeやメモ帳など）で開いて、書き込みます。

書き込んだら、上書き保存して、ブラウザを再起動します。

これで、マウスを乗せた時だけ拡張機能エリアが展開します。クリックで拡張機能を利用できます。

展開ボタンをクリックすると、「ボタンを隠す」にしている拡張機能が表示されます。

拡張機能は、右クリック→「ボタンを隠す」で非表示にできます。

感想

以上、「Vivaldi（ヴィヴァルディ）」ブラウザのナビゲーションバー内にあるChrome拡張機能エリアを、マウスオーバーで展開するCSSでした。

同じようなホバー系で、ブックマークバーの自動展開があります。気になった方は、参考にしてみてください。

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

この記事では、「Vivaldi」のオリジナルカスタムUI機能（カスタムCSS）を使って、ブックマークバーをマ ...

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

ちょっと高度になりますが、「JavaScript」を利用することで、タブをマウスオーバーでアクティブ化できます。素早くタブを切り替えたい人におすすめです。

【Vivaldi】マウスオーバーでタブをアクティブ化する方法。Javascript！

この記事では、「Vivaldi（ビバルディ）」ブラウザのオリジナルカスタムUI機能を使って、マウスオーバ ...

 https://www.naporitansushi.com/tab-mouseover-active/