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

カスタムCSS

Vivaldiのアイコン

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

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

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

普段は非表示(透明)、マウスを乗せたときだけ表示(不透明)します。

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

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

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

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

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

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

ポイント

本記事は、CSSを使って、マウスホバー時のみ表示するようにしています。

そもそも通常時のスピードダイヤルも非表示にしたい場合は、以下の画像先のURLを参考にしてみてください。

【Vivaldi】スタートページのスピードダイヤルを一括非表示する方法

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

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

この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。

有効にしていないという方は、以下の記事を参考にしてみてください。

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

CSS

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

/*スピードダイヤルホバー時だけ表示*/
/*通常は非表示*/
.speeddial {
  opacity: 0;
  transition-duration: 0.4s;
}
/*ホバー時に表示*/
.speeddial:hover {
  opacity: 1;
}

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

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

以下のような仕組みになっています。

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

書き込めたら、ブラウザを再起動します。

スタートページを開いても、スピードダイヤルが表示されません。

Vivaldiのスタートページ スピードダイヤルの非表示

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

マウスホバーでスピードダイヤルが表示される

マウスを離すと、再び非表示になります。

動画も貼っておきます。

テーマ(Starry Skies of Japan)の背景画像をしっかり楽しめます。

まとめ

以上、Vivaldiのスタートページにあるスピードダイヤルをマウスホバーで表示切り替えするCSSについてでした。

Posted by ナポリタン寿司