【広告】

Amazonブラックフライデーが12月2日まで開催中です!

個人的には、Anker製品か、コカ・コーラがかなり安くなっているのでおすすめです!

高級キーボードで有名な東プレが最近発売した「REALFORCE R3」もセールをやっていました!詳しくはこちらの記事を確認してみてくださーい。

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

2021年10月30日CSS

Vivaldi のアイコン

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

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

ブックマークバーを自動展開するCSSです。マウスをアドレスバー付近に持っていくと、自動でブックマークバーが表示されます。

普段は非表示で必要な時だけ表示させることができるので見栄えがスッキリして便利です。

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

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

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

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

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

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

以下のCSS をエディタで貼り付けます。(Visual Studio Code やメモ帳を利用しましょう)

/* ブックマークバーを非表示 */
.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%;
  }

/* ブックマークバーを自動展開 */
  .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 1s !important;
  }
  
  :not(.address-top).bookmark-bar-top #header:not(:hover)~#main>.bookmark-bar:not(:focus-within):not(:hover) {
    transform: translateY(-100%);
    transition: transform .1s 1s !important;
  }

下記画像の感じです。

ブックマーク自動展開CSS

「/*ブックマークバーを非表示*/」の部分で、デフォルトで表示になっているブックマークバーを隠します。

「/* ブックマークバーを自動展開 */」の部分で、アドレスバーにマウスを乗せた時、ブックマークバーを元通りに表示するという感じになっています。

黄緑ハイライトの部分で非表示にするまでの秒数を調整できます。

例えば、冒頭で紹介した動画のようにしたいなら、「0.5s」と指定しましょう。デフォルトでは1秒でブックマークが非表示になるまでに猶予があります。

このCSSは以下のVivaldi フォーラムの一部を、僕なりにアレンジして活用させてもらいました。感謝です。

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

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

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

Vivaldi のブックマークバーのスクリーンショット

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

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

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

【11月29日追記】垂直タブを少し下にする

僕は垂直タブ(左配置)を使っているんですが、ブックマークバーを展開した時に一番上のタブと被って不便です。

そこでタブ全体を下に表示することで、ブックマークバーを表示した時でも被らないようにしてみました。垂直タブの方はぜひ試してみてください。

タブバーを少し下に配置する

CSS は以下になります。非常にシンプルです。

/* 垂直タブを少し下にずらす */
div#tabs-tabbar-container {
    top: 30px;
}

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

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

ただし、ブックマークバーを閉じている時でも常にタブが下になるのでちょっと不細工です。それでもいいという方は利用しましょう。背景画像をタブバーの色と一緒にするとかで何とかごまかせそうではあります。

まとめ

以上、マウスオーバーで自動展開するブックマークバーを実現するCSSの紹介でした。

つい先日、2021年9月18日にリリースされたブラウザ「Floorp(フロープ)」を触る機会があったんですが、デフォルトでブックマークバーの自動展開機能がついてて便利だなぁと思いました。

そこでVivaldi でもできるかどうか調べたら、CSSで実装できるとのことで早速やってみた次第であります。便利です。

Posted by ナポリタン寿司