【Vivaldi】スピードダイヤルのサムネイル更新ボタンを非表示にするCSS

2022年4月13日カスタムCSS

Vivaldiのアイコン

この記事では、VivaldiのオリジナルカスタムUI機能を使って、スタートページのスピードダイヤル内に表示されているサムネイルの更新ボタンを非表示にするCSSについて書きます。

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

Vivaldiのスタートページのスピードダイヤル内にある「サムネイル更新ボタン」

CSSを使うことで、Vivaldiのスタートページにあるスピードダイヤルの「サムネイル更新ボタン」を非表示にできます。「サムネイル更新ボタン」←このアイコンのことです。

2022年4月時点で、設定→スタートページ→「サムネイルコントロールボタンを表示する」のチェックを外せば、自動的に非表示にはなります。削除ボタンも同様に「削除ボタンを表示する」のチェックを外せば、非表示にできます。

ただし、「サムネイル画像を選択」、「サムネイルを更新」ボタンがセットで非表示になり、どちらか個別に非表示にするといったことはできません。

Vivaldi設定:スタートページ サムネイルコントロールボタンを表示する

CSSを使うことで、「サムネイル画像を選択」は表示したまま、「サムネイル更新」ボタンだけ非表示にするといったことが可能です。

「よく押し間違えて、サムネイル更新ボタンを押してしまう!そしたら、折角カスタマイズしたアイコンがパーになってリセットされてしまう!」といった現象に悩んでいる方、ぜひ試してみてください。

まぁ、わざわざCSSで非表示にしなくても、先ほども言った通り、設定からコントロールボタン自体を非表示にする方が手軽です。サムネイル画像の変更は、スピードダイヤルの右クリック→「カスタムサムネイル画像を選択」でできますからね。

スピードダイヤルの右クリックメニュー カスタムサムネイル画像を選択

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

スタートページについては、以下の記事を参考にしてみてください。

CSS

以下のCSSになります。

/*スタートページのスピードダイヤルの更新ボタン*/
.circular.update-thumbnail {
  display: none !important; /*非表示*/
}

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

スタートページのスピードダイヤルの更新ボタンを非表示にするCSS Visual Studio Code

Vivaldiを再起動して、スタートページ(vivaldi://startpage/)にアクセスします。

適用後は、設定で「サムネイルコントロールボタンを表示する」にチェックを入れている場合でも、「サムネイル更新(サムネイル更新ボタン)」ボタンが非表示になります。

サムネイルの更新ボタンを非表示にする前と後の比較画像

【余談】サムネイル選択ボタンの非表示

「いや、サムネイル更新ボタンではなく、サムネイル画像選択ボタンを非表示にしてほしい!」といった場合は、以下のCSSになります。

/*スタートページのスピードダイヤルのサムネイル選択ボタン*/
.circular.set-custom-thumbnail {
  display: none !important; /*非表示*/
}

「サムネイル画像の選択」ボタンが消えて、更新ボタンが左に詰められます。

サムネイル選択ボタンを非表示にするCSSを適用した画像

両方消したい場合は、CSSではなく、設定から非表示にするのがおすすめです。

感想

以上、Vivaldiのスタートページのスピードダイヤルのサムネイル更新ボタンだけを非表示にするCSSについてでした。

そろそろスタートページのカスタマイズネタが尽きそうです。何かネタがあれば、ぜひとも教えていただければなと思います。

Posted by ナポリタン寿司