【Vivaldi】「アップデートの準備ができました」を非表示にするCSS

2022年4月17日2022年12月4日カスタムCSS

この記事では、「Vivaldi（ヴィヴァルディ）」ブラウザのオリジナルカスタムUI機能を使って、ツールバーの「アップデートの準備ができました」の文字を非表示にする方法を書きます。

本記事は、オリジナルカスタムUIが有効になっている前提です。詳しくは、こちらを参考にしてみてください。

Windows版「Vivaldi」には、サイレントアップデート機能が搭載されています。アップデートがあったら、自動的にインストールする機能です。

設定→一般→更新→「アップデートを自動ダウンロード・インストールする」にチェックすることで有効になります。

アップデートがあった場合に、バックグラウンドで更新ファイルをダウンロードしてくれます。ダウンロードできたら、アドレスバーとChrome拡張機能の間に、「」というボタンが表示されます。クリックすると「Vivaldi」が再起動され、晴れてアップデート完了です。

ファイルをダウンロードするのがめんどくさいズボラな僕にとっては、ありがたい便利機能です。

しかし、「アップデートの準備ができました」という文言は少々邪魔くさいです。「アイコンだけ表示されれば、それでいいや」と思ったので、CSSを使って文章非表示にしてみます。いつでも元に戻せます。

アップデート機能を停止するわけではありません。文字を削除するだけです。

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

【Vivaldi】カスタムCSSの導入方法。自由にカスタマイズしてみよう！

この記事では、ウェブブラウザ「Vivaldi」にCSSを適用する方法について書きます。ブラウザの外観（UI） ...

https://www.naporitansushi.com/vivaldi-css/

1. 「アップデートの準備ができました」を非表示にするCSS
2. アイコンを変更するCSS
3. 【余談】ボタンの配置を変更する方法
4. 感想

「アップデートの準備ができました」を非表示にするCSS

以下のCSSになります。

/*「アップデートの準備ができました」非表示*/
button[title="アップデートの準備ができました"] .button-title {
  display: none;
}

上記のCSSを、テキストエディター（Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど）でファイルに書き込みます。

ブラウザを再起動すると、「アップデートの準備ができました」という文字が非表示になります。更新アイコンは、これまで通り表示されます。

クリックでダイアログを表示します。

アイコンを変更するCSS

更新ボタンのアイコンは変更できます。少々難易度は上がりますが、「path」で指定できます。

例として、Vivaldiメニューにも使われている「」に置き換えてみます。

/*「アップデートの準備ができました」のボタンをVivaldiアイコン化*/
button[title="アップデートの準備ができました"] span svg path {
  d: path("M 18.6 3.4 C 17.1 2 14.9 2 11 2 S 4.9 2 3.4 3.4 C 2 4.9 2 7.1 2 11 s 0 6.1 1.4 7.6 C 4.9 20 7.1 20 11 20 s 6.1 0 7.6 -1.4 C 20 17.1 20 14.9 20 11 s 0 -6.1 -1.4 -7.6 Z m -2.2 5.2 l -4.2 7.2 c -0.3 0.4 -0.6 0.7 -1.1 0.8 c -0.6 0 -1 -0.2 -1.3 -0.7 c -0.9 -1.5 -1.7 -3 -2.6 -4.5 c -0.5 -0.9 -1.1 -1.8 -1.6 -2.8 c -0.6 -0.9 0 -2 1.1 -2.1 c 0.6 0 1 0.2 1.3 0.7 c 0.4 0.7 0.8 1.3 1.2 2 c 0.3 0.5 0.6 1 0.8 1.5 c 0.4 0.7 1 1.1 1.8 1.1 c 1.2 0.1 2.2 -0.8 2.4 -2 v -0.2 c 0 -0.4 -0.1 -0.7 -0.2 -1 c -0.4 -0.9 0 -1.8 1 -2 c 0.8 -0.2 1.6 0.4 1.7 1.2 c 0 0.2 -0.1 0.5 -0.3 0.8 Z") !important;
  fill: #fe5d55;
  transform: scale(1.1);
}

何の需要があるかは不明ですが、更新ボタンが「Vivaldiアイコン」化します。「fill: #fe5d55;」を変更すると、好きな色にできます。HTMLカラーコードは、こちらのサイトで調べられます。