【Vivaldi】スピードダイヤルを非表示。ホバーで表示するCSS
この記事では、VivaldiブラウザのオリジナルカスタムUI機能を使って、スタートページのスピードダイヤルをホバー時のみ表示するCSSについて書きます。
スピードダイヤルに邪魔されずに、背景画像を楽しみたい方におすすめです。
本記事で使うCSSを使えば、Vivaldiブラウザのスタートページにあるスピードダイヤルを、マウスホバーで表示/非表示できます。普段は非表示（透明）、マウスを乗せたときだけ表示（不透明）します。
スタートページの背景画像を堪能したい方におすすめです。「背景画像を邪魔する者は、スピードダイヤルであろうと、何人たりとも許せない！」という方、ぜひ試してみてください。
使いたくなったら、いつでもマウスを乗せて表示できます。
僕みたいなブロガーだと、スクショを撮る時にスピードダイヤルも移っちゃって、ちょっと困る時があるんですよね。
かといって、スピードダイヤルを廃止すると、よく利用するサイトへのアクセス効率が悪くなる…。というわけで、利便性と見た目、両方を維持するために、マウスホバー時だけ表示するようにしてみました。
ブックマーク自動開閉と同じ感じです。
https://www.naporitansushi.com/auto-bookmarkbar/「スピードダイヤルって何？どんなことができるの？」という方は、以下の記事を参考にしてみてください。本記事は既に知っている方向けです。
本記事は、CSSを使って、マウスホバー時のみ表示するようにしています。そもそもスピードダイヤルを非表示にしたい場合は、下記記事を参考にしてみてください。
ブックマークマネージャーから、スピードダイヤルに設定したフォルダーを解除する方法です。これで、一括で非表示にできます。
オリジナルカスタムUI（CSS）を使うには？
この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。有効にしていないという方は、以下の記事を参考にしてみてください。
CSSでブラウザの外観を自分の好きなようにカスタマイズする機能です。
スピードダイヤルをマウスホバーで表示するCSS
CSSは、以下になっています。テキストエディター（Visual Studio Codeやメモ帳など）でファイルに書き込みます。
/*スピードダイヤルホバー時だけ表示*/
/*通常は非表示*/
.speeddial {
opacity: 0;
transition-duration: 0.4s;
}
/*ホバー時に表示*/
.speeddial:hover {
opacity: 1;
}
以下のような仕組みになっています。普段は「opacity: 0;」で透明にして、マウスを乗せた時（:hover）に、「opacity: 1;」で不透明にするって感じです。
| スピードダイヤルをホバー時だけ表示するCSSの仕組み | |
|---|---|
| .speeddial | スピードダイヤル |
| opacity: 0; | 透明にする |
| transition-duration: 0.4s; | アニメーションの偏移時間 |
| .speeddial:hover | スピードダイヤルにマウスが乗っかっている時 |
| opacity: 1; | 不透明にする |
書き込めたら、ブラウザを再起動します。これで、スタートページを開いた時に、スピードダイヤルが表示されなくなります。
マウスをスピードダイヤルがある付近（画面中央あたり）に近づけると、表示されます。アニメーション付きなので、滑らかに出てきます。
マウスを離すと、再び非表示になります。これで、背景に設定した画像をしっかり堪能できます。いざという時には、スピードダイヤルを利用できるので、利便性も損ないません。クリックで開けます。
上記CSSは、アニメーションがあります。ゆっくりと表示・非表示を切り替えます。アニメーションがいらないという方は、代わりに以下のCSSを使ってみてください。上記CSSとの併用はできません。
/*スピードダイヤルをマウスホバーで表示*/
.speeddial:not(:hover) {
opacity: 0;
}アニメーションがなくなって、すぐに表示されます。
感想
以上、Vivaldiブラウザのスタートページにあるスピードダイヤルを、マウスホバーで表示・非表示するCSSでした。
見た目がスッキリしていると、テンション上がりますね。