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

2021年10月30日カスタムCSS

Vivaldiのアイコン

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

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

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

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

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

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

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

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

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

ブックマークバーの自動展開CSS

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

/*----------------------------------------
ブックマークバー自動展開
参考:https://forum.vivaldi.net/post/586233
------------------------------------------*/
.bookmark-bar-top .bookmark-bar {
  margin-bottom: -28px;
  z-index: 1;
  transform: translateY(0);
  transition: transform .1s 0s !important;
}

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

:not(.address-top).bookmark-bar-top #header:not(:hover)~#main>.bookmark-bar:not(:focus-within):not(:hover),
.address-top.bookmark-bar-top #header:not(:hover)~#main .mainbar:not(:focus-within):not(:hover)~.bookmark-bar:not(:focus-within):not(:hover) {
  transform: translateY(-100%);
  transition: transform .1s 0s !important;
}
/*----------------------------------------
ブックマークバー自動展開終了
------------------------------------------*/

下記画像の感じです。

ブックマークバー自動展開CSSを書き込んだVisual Studio Code画面

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

参考:Auto hide bookmark bar | Vivaldi Forum

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

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

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

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

Vivaldi設定:ブックマーク ブックマークバーを表示

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

/*----------------------------------------
ブックマークバー自動展開(下配置用)
参考:https://forum.vivaldi.net/post/586233
------------------------------------------*/
.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 0 !important;
}
/*----------------------------------------
ブックマークバー自動展開(下配置用)終了
------------------------------------------*/

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

本CSSの注意点

ブックマークバーの自動展開CSSは、普通に利用する分には問題ないのですが、特定の条件が揃うと、動作しなくなる可能性があります。

垂直タブとの相性

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

ブックマークバーを見る時に、一番上のタブが隠れてしまいます。少し不便です。

そこで、タブ全体を少しだけ下にずらして、表示するCSSを追記しました。これで、ブックマークバーを表示した時でも被らなくなります。

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

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

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

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

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

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

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

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

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

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

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

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

ツールバーを透明化している時の相性

アドレスバーやツールバーを透明にする別のCSSを使っている場合、ブックマークバーが透けて不細工です。

アドレスバーやツールバーを透明にしている場合、ブックマークバー自動展開CSSと相性が悪い

この場合、ブックマークバーの自動展開コードの一部を書き換えることで解決します。以下のコードを利用します。

/*----------------------------------------
ブックマークバー自動展開
参考:https://forum.vivaldi.net/post/586233
------------------------------------------*/
.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%;
}

:not(.address-top).bookmark-bar-top #header:not(:hover)~#main>.bookmark-bar:not(:focus-within):not(:hover),
.address-top.bookmark-bar-top #header:not(:hover)~#main .mainbar:not(:focus-within):not(:hover)~.bookmark-bar:not(:focus-within):not(:hover) {
  transform: translateY(-100%);
  transition: transform .1s 0s !important;
  visibility: hidden;
}
/*----------------------------------------
ブックマークバー自動展開終了
------------------------------------------*/

ほぼ一緒ですが、「visibility: visible;」や「visibility: hidden;」などが新しく追記しました。これにより、ツールバー周りを透明にしていても、正常にブックマークバーの自動展開CSSを利用できます。

感想

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

余談ですが、Chrome拡張機能の自動展開CSSもあります。

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

Posted by ナポリタン寿司