【Vivaldi】ブックマークバーをマウスオーバーで自動展開するCSS

2021年10月30日カスタムCSS

Vivaldiのアイコン

この記事では、VivaldiのオリジナルカスタムUI機能を使って、ブックマークバーをマウスオーバーで自動開閉するCSSについて書きます。

【Vivaldi】ブックマークバーをマウスオーバーで自動展開するCSS

Vivaldiのブックマークバーを自動展開するCSSです。マウスをアドレスバー付近に持っていくと、自動でブックマークバーが表示されます。普段は、非表示になっています。必要な時だけ表示できるので、見栄えがスッキリします。

言葉だとイメージしにくいと思うので、動画を貼っておきます。

CSSでのカスタマイズなので、展開速度や展開位置を自由に調整できる点も便利です。

「ブックマークバーは使いたいけど、見栄えがごちゃごちゃするのは嫌だ!」という方、ぜひ試してみてください。見栄えのスッキリさを維持したまま、効率性も損なわないので、とても便利です。

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

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

VivaldiのUIをCSSでカスタマイズできる機能です。CSSと呼ばれるプログラミングを理解している必要がありますが、本記事では、全く分からない初心者でもできるように完成状態のコードを紹介しています。コピペするだけでOKです。

CSS

書き込むコードは以下になっています。(Visual Studio Codeやメモ帳を利用しましょう)

/*----------------------------------------
ブックマークバー自動展開
参考:https://forum.vivaldi.net/topic/64142/simple-automate-bookmark-bar-css-mod/14
------------------------------------------*/
.bookmark-bar-top .bookmark-bar {
  margin-bottom: -28px;
  z-index: 1;
  transform: translateY(0);
  transition: transform .1s 0s !important;
  visibility: visible;
  backdrop-filter: blur(10px);
}

.bookmark-bar-top .bookmark-bar::before {
  content: '';
  position: absolute;
  height: 8px;
  width: 100%;
  top: 100%;
}

/*通常時は、ブックマークバー非表示にする*/
.address-top.bookmark-bar-top #header:not(:hover)~#main .toolbar-mainbar:not(:focus-within):not(:hover)~.bookmark-bar:not(:focus-within):not(:hover) {
  transform: translateY(-100%);
  transition: transform .1s 0s !important;
  visibility: hidden;
}

/*トリガーゾーンの拡大(アドレスバーホバー時にも表示する)*/
:not(.address-top).bookmark-bar-top #header:not(:hover)~#main>.bookmark-bar:not(:focus-within):not(:hover) {
  transform: translateY(-100%);
  transition: transform .1s 0s !important;
}

/*----------------------------------------
ブックマークバー自動展開終了
------------------------------------------*/

下記画像の感じです。

ブックマーク自動展開CSS Visual Studio Code

このCSSは、以下のVivaldiフォーラムを参考にさせていただきました。感謝です。

参考:Simple Automate Bookmark Bar CSS mod | Vivaldi Forum

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

マウスをアドレスバー付近に持っていくと、ブックマークバーが自動で展開します。アドレスバーから離れると再び自動で非表示になります。

マウスオーバーでブックマークバー自動展開のGIF
ブックマークバーがでてこない!という方へ

CSSが間違っているという可能性もありますが、ブックマークバーを非表示にしている可能性もあります。

設定→ブックマーク→ブックマークバーを表示にチェックを入れます。

ブックマーク ブックマークバーを表示

ブックマークバーを下配置にしている場合は、以下のCSSになります。

/*----------------------------------------
ブックマークバー自動展開(下配置用)
参考:https://forum.vivaldi.net/topic/64142/simple-automate-bookmark-bar-css-mod/14
------------------------------------------*/
.bookmark-bar-bottom .bookmark-bar {
  margin-top: -28px;
  z-index: 1;
  transform: translateY(0);
  transition: transform .1s 0s !important;
}

.bookmark-bar-bottom .bookmark-bar::before {
  content: '';
  position: absolute;
  height: 4px;
  width: 100%;
  bottom: 100%;
}

.bookmark-bar-bottom .bookmark-bar:not(:focus-within):not(:hover) {
  transform: translateY(100%);
  transition: transform .1s 0s !important;
}
/*----------------------------------------
ブックマークバー自動展開(下配置用)終了
------------------------------------------*/

ブックマークバーが下からひょっこり顔を出すようになります。

本CSSの懸念点

垂直タブとの相性

僕は、垂直タブ(左配置)を使っているんですが、ブックマークバー自動展開のCSSと少し相性が悪いです。

ブックマークバーを展開した時に、一番上のタブと被ってしまうからです。

ブックマークバーを見る時に、一番上のタブが隠れてしまい、クリックできないようになります。少し不便です。そこで、タブ全体を少しだけ下にずらして表示するCSSを追記することで、ブックマークバーを表示した時でも被らないようにしてみました。

/*垂直タブ*/
#tabs-container.left .resize, #tabs-container.right .resize {
  margin-top: 22px; /*少し下にずらす*/
}
タブバーを少し下にずらした画像

垂直タブの方は、ぜひ試してみてください。かなり原始的・無理やり感が否めない汚いコードです。もっと綺麗で使いやすいコードを知っているという方、ぜひ教えていただければなと思います。

「22px」の数値は各自で調整してみてください。

上記CSSを適用した後だと、マウスオーバーでブックマークバーを表示してもタブと被らないようになります。

ブックマークバーを展開してもタブと被らない

しかし、ブックマークバーを閉じている時でも、タブが常に下になるので、見た目は不細工です。それでもいいという方だけ利用しましょう。

スタートページのナビゲーションバーと被る問題

スタートページにナビゲーションバーを表示している場合、ブックマークバーをひょっこり表示した時に被ってしまい、ナビゲーションバーが見えなくなります。

この問題は、ナビゲーションバーを下配置にすることで解決します。下記記事にて詳しい方法(CSS)を紹介しています。

スタートページのナビゲーションバーを下配置にした画像

ページ内検索(Ctrl+F)と被る問題

ページ内検索(CtrlF)のバーを出していると、ブックマークバーをひょっこり表示した時に被ってしまい、ページ内検索が見えなくなります。

ブックマークバー自動展開CSSを使っていると、ページ内検索(Ctrl+F)と被ってしまう

この問題は、ページ内検索のバーを下配置にすることで解決します。慣れるまでは大変かもしれませんが、どうしても被るのが耐えられないという方は、ページ内検索を下配置にしてみましょう。下記記事にて詳しい方法(CSS)を紹介しています。

感想

以上、マウスオーバーで自動展開するブックマークバーCSSについてでした。見栄えがスッキリするので最高です。

Chrome拡張機能の自動展開CSSもあります。

ちょっと高度になりますが、JavaScriptを利用することで、タブをマウスオーバーでアクティブ化することもできます。素早くタブを切り替えたい人におすすめです。

Posted by ナポリタン寿司