当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

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

2022年2月19日カスタムCSS

Vivaldiのアイコン

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

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

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

本記事で使うCSSを使えば、Vivaldiブラウザのスタートページにあるスピードダイヤルを、マウスホバーで表示/非表示できます。普段は非表示(透明)、マウスを乗せたときだけ表示(不透明)します。

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

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

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

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

ブックマーク自動開閉と同じ感じです。

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

【余談】そもそもスピードダイヤルを消したい方

本記事は、CSSを使って、マウスホバー時のみ表示するようにしています。そもそもスピードダイヤルを非表示にしたい場合は、下記記事を参考にしてみてください。

ブックマークマネージャーから、スピードダイヤルに設定したフォルダーを解除する方法です。これで、一括で非表示にできます。

オリジナルカスタムUI(CSS)を使うには?

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

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

スピードダイヤルをマウスホバーで表示するCSS

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

/*スピードダイヤルホバー時だけ表示*/
/*通常は非表示*/
.speeddial {
  opacity: 0;
  transition-duration: 0.4s;
}
/*ホバー時に表示*/
.speeddial:hover {
  opacity: 1;
}
Visual Studio Codeのスクリーンショット

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

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

書き込めたら、ブラウザを再起動します。これで、スタートページを開いた時に、スピードダイヤルが表示されなくなります。

マウスをスピードダイヤルがある付近(画面中央あたり)に近づけると、表示されます。アニメーション付きなので、滑らかに出てきます。

スピードダイヤルをマウスホバーで表示・非表示しているGIF画像1

マウスを離すと、再び非表示になります。これで、背景に設定した画像をしっかり堪能できます。いざという時には、スピードダイヤルを利用できるので、利便性も損ないません。クリックで開けます。

アニメーションがいらないって方へ

上記CSSは、アニメーションがあります。ゆっくりと表示・非表示を切り替えます。アニメーションがいらないという方は、代わりに以下のCSSを使ってみてください。上記CSSとの併用はできません。

/*スピードダイヤルをマウスホバーで表示*/
.speeddial:not(:hover) {
  opacity: 0;
}

アニメーションがなくなって、すぐに表示されます。

スピードダイヤルをマウスホバーで表示・非表示しているGIF画像2

感想

以上、Vivaldiブラウザのスタートページにあるスピードダイヤルを、マウスホバーで表示・非表示するCSSでした。

見た目がスッキリしていると、テンション上がりますね。

2022年2月19日カスタムCSS