【Vivaldi】スピードダイヤルを非表示。ホバーで表示するCSS

この記事では、Windows版「Vivaldi」ブラウザのオリジナルカスタムUI機能を使って、スタートページのスピードダイヤルをホバー時のみ表示するCSSについて書きます。

スピードダイヤルに邪魔されずに背景画像を楽しみたい方におすすめです。

Windows版「Vivaldi」ブラウザのスタートページにあるスピードダイヤルをマウスホバーで表示/非表示できます。普段は非表示（透明）、マウスを乗せたときだけ表示（不透明）します。

スタートページの背景画像を堪能したい方におすすめです。「背景画像を邪魔する者はスピードダイヤルであろうと何人なんぴとたりとも許せない！」という方ぜひ試してみてください。

使いたくなったらいつでもマウスを乗せて表示できます。

僕みたいなブロガーだとスクショを撮る時にスピードダイヤルも移っちゃってちょっと困る時があるんですよね。

かといってスピードダイヤルを廃止するとよく利用するサイトへのアクセス効率が悪くなる…。というわけで利便性と見た目、両方を維持するためにマウスホバー時だけ表示するようにしてみました。

スピードダイヤルについて

「スピードダイヤルって何？どんなことができるの？」という方は以下の記事を参考にしてみてください。本記事は既に知っている方向けです。

【Vivaldi】スタートページ・スピードダイヤルのカスタマイズ方法

この記事では、「Vivaldi（ヴィヴァルディ）」ブラウザのスタートページやスピードダイヤルをカスタマ ...

https://www.naporitansushi.com/startpage-customize/

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

CSSでブラウザの外観を自分の好きなようにカスタマイズする機能です。

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

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

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

CSSは以下になっています。テキストエディター（Visual Studio Codeやメモ帳など）でファイルに書き込みます。

CSS

/*スピードダイヤルホバー時だけ表示（2025年02月07日修正）*/
.speeddial {
    opacity: 0;
    transition-duration: 0.4s;

    &:hover {
        opacity: 1;
    }
}

以下のような仕組みになっています。普段は「opacity: 0;」で透明にしてマウスを乗せた時（:hover）に「opacity: 1;」で不透明にするって感じです。

スピードダイヤルをホバー時だけ表示するCSSの仕組み
`.speeddial`	スピードダイヤル
`opacity: 0;`	透明にする
`transition-duration: 0.4s;`	アニメーションの遷移時間
`.speeddial:hover`	スピードダイヤルにマウスが乗っかっている時
`opacity: 1;`	不透明にする