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

2021年11月2日カスタムCSS

Vivaldiのアイコン

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

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

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

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

通常、Chrome拡張機能を隠していると、①Chrome拡張機能展開ボタン展開ボタンをクリック→②使いたい拡張機能をクリック…の2クリック必要になります。

本記事で紹介するCSSを使えば、Chrome拡張機能展開ボタン展開ボタンにマウスを乗せる=拡張機能が自動で表示される→使いたい拡張機能をクリックする…の1クリックでできるようになります。

些細な部分ですが、作業効率を上げたい人におすすめです。

Chrome拡張機能展開ボタン展開ボタンのクリックで「ボタンを隠す」に設定している拡張機能を表示します。

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

普段は非表示になっているので、見栄えがすっきりします。

オリジナルカスタム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です。(意味は一緒です)

上記のCSSを、エディター(Visual Studio Codeやメモ帳など)でスタイルシートに書き込みます。以下の感じです。

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

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

ホバーした時だけ拡張機能が展開されます。クリックでそのまま拡張機能を利用できます。

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

拡張機能の展開ボタンクリック前とクリック後の比較画像

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

拡張機能の右クリック ボタンを隠す

感想

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

「見栄えは、極力シンプル・スッキリ、でも使いたい時にすぐ呼び出せる」って状態にしたい方に、おすすめです。

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

ちょっと高度になりますが、JavaScriptを利用することで、タブをマウスオーバーでアクティブ化することもできます。

素早くタブを切り替えたい人におすすめです。

Posted by ナポリタン寿司