【Vivaldi】ブラウザ右上の閉じるボタンを押せないようにするCSS

2022年4月30日カスタムCSS

Vivaldiのアイコン

この記事では、VivaldiブラウザのオリジナルカスタムUI機能を使って、ブラウザの右上にある「閉じるボタン(終了)」を押せないようにする、あるいは存在自体を抹消するCSSについて書きます。

「Vivaldi最高だから、ずっと起動しっぱなし。閉じるボタンなんか不要」という方におすすめです。

Vivaldiの右上にある閉じるボタンを非表示にしたイメージ画像

本記事で紹介するCSSを使うことで、ブラウザ右上にある「×」ボタンを無効化できます。

マウスフォーカスしてクリックしても反応しなくする=終了できなくすることが可能です。または、閉じるボタン自体を消し去って、その横にある最大化ボタンを右詰めにすることも可能です。

「最大化しようと思ったら、うっかり閉じるボタン押してしまう時があるから、そもそも押せないようにしたい!終了する場合は、クイックコマンドやショートカットキー、Vivaldiメニュー内を利用するから、右上の×ボタンは完全にいらない!」という方、ぜひ参考にしてみてください。

水平タブ、垂直タブどちらにも対応しています。

おまけで、非表示にした場合の代替案をいくつか紹介します。色々な選択肢が用意されている点も、Vivaldiの良さだと思います。僕が知っている限り、5つくらいあります。

CSSで非表示にしているだけなので、いつでも元に戻せます。最小化、最大化ボタンはこれまで通り表示します。合わせて非表示にすることも可能です。

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

※本記事は、狂ったほどのVivaldiヘビーユーザー向けです。一般のライトユーザーの方には、閉じるボタンを消すとかえって不便だと思います。

CSS

押せなくするだけのCSS

「×アイコンは表示したまま、押せないようにしたい!」といった方は、こちらのCSSになります。×ボタン自体を消したい方は、こちらを参考にしてみてください。

/*ブラウザ右上の「閉じるボタン」を押せなくする*/
.window-buttongroup button.window-close {
  pointer-events: none;
}

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

Visual Studio Codeで、ブラウザ右上の「閉じるボタンを押せなくするコードを書いた画像

Vivaldiを再起動して、マウスカーソルを「閉じるボタン」の上に乗せます。本来なら、背景が赤くなり、クリックできるのですが、「pointer-events: none;」で無効化しているので、何も反応しなくなります。

CSS適用後、マウスを乗せても反応しなくなる

動画を貼っておきます。副作用で、閉じるボタンをダブルクリックすると最大化されてしまいます。これはVivaldiのせいではなく、Windowsの仕様です。

閉じるボタン自体を抹消するCSS

閉じるボタン自体を抹消して、最大化ボタンを右に詰めたい場合は、以下のCSSになります。

/*ブラウザ右上の「閉じるボタン」を抹消する*/
.window-buttongroup button.window-close {
  display: none;
}

上記CSSを適用すると、閉じるボタンが丸々消えます。当然、押すボタンがないので閉じれません。最大化と最小化ボタンが右端に詰められます。こちらは、正常にクリックできます。

CSS適用後、閉じるボタン自体が非表示になる

水平タブを使っている場合でも一緒です。

水平タブを使っていて、閉じるボタンを消すコード適用時の画像

【おまけ】ウィンドウ操作ボタン全部非表示

需要があるのか不明ですが、最小化、最大化、閉じるボタン全てを非表示にするCSSも紹介しておきます。

/*ブラウザ右上の「ウィンドウ操作ボタン」全てを抹消する*/
div#header .window-buttongroup {
    display: none !important;
}

全部消えます。Windows11では、ウィンドウのスナップ機能が強化されたので、わんちゃん不要かもしれません。いや、そんなことはないか。ショートカットキーやタスクバーアイコンで操作する方には不要かもですね。

ウィンドウ操作ボタン全て(最小化、最大化、閉じるボタン)を非表示にした画像

閉じるボタン以外で、Vivaldiを終了する方法

以下、本記事のCSSで閉じるボタンを廃止した場合の、代わりの終了方法を紹介します。

Vivaldiメニュー

Vivaldiメニュー内には、終了ボタンがあります。クリックすると、閉じるボタンを押した時と同じようにVivaldiを終了します。

Vivaldiメニュー→終了

クイックコマンド

クイックコマンド(デフォルトではF2で起動)内で「終了」と入力すると、コマンドがヒットするのでEnterで実行します。

クイックコマンド 終了コマンド

余談ですが、クイックコマンドでいけるということは、そうです。コマンドチェインにも組み込めます。他の操作と終了を同時にしたい場合は、コマンドチェインの方がいいかもしれません。

何か終了する前にしておきたいルーティン作業ってありますかね。僕は全然思いつきません。「全てのタブをセッションとして保存」→遅延(その間に名前を決めて保存する)→終了とかが使えるかもしれませんね。

コマンドチェインのスクリーンショット end(セッション保存してVivaldi終了)

指定のタブを開いてから終了する…ってのも使えるかもしれませんね。毎回起動時に、1~9番目の中で開くタブがある場合とかに使えそうです。終了前に次回開きたいタブをアクティブにしてくれるので、次回起動時は、自然とそのページが1番に表示されます。

コマンドチェインのスクリーンショット end(1つ目のタブに切り替えて終了)

ショートカットキー

ショートカットキーも設定できます。Vivaldiの設定→キーボード→ウィンドウの中にあります。

Vivaldi設定:キーボード 終了(Alt+E)

注意点ですが、単一キーはおすすめしません。マウスがテキスト入力モードになっている時に反応しない場合があるためです。

全てのウェブサイトで動作させたい場合は、修飾キー(WindowsAltCtrlShift)と別のキーの組み合わせがいいかなと思います。AltEとかどうですかね。「End」のEです。

実際の動画を貼っておきます。

マウスジェスチャー

マウスジェスチャーにも設定できます。設定→マウス→「終了」と検索すると、コマンドがヒットします。

Vivaldi設定;マウス コマンドを選択してください

個人的にはマウスジェスチャー大好きです。まぁでも「終了」は、うっかり誤作動で発動しちゃう可能性もあるから、マウスジェスチャーとは相性が悪いかもしれません。

タスクバーの右クリック

Macの方は知りませんが、Windowsの場合は、タスクバーのアイコンを右クリックすると、「すべてのウィンドウを閉じる」項目があります。クリックで全ウィンドウを終了します。

タスクバーのVivaldiアイコンの右クリック→すべてのウィンドウを閉じる

ただ1つ注意点があります。文字通り、全てのウィンドウを同時に終了…してくれるのかと思いきや、処理上では、順番に閉じているようです。

起動時に開くページを「最後のセッション」にしている場合、ここから同時に複数ウィンドウを閉じることによって、次回複数ウィンドウが同時に復元されるかと思いきや、実際の処理上では順番に閉じているため、復元されるウィンドウは、最後にアクティブだったウィンドウ1つのみということになります。

ここらへん勘違いしそうなので注意です。複数ウィンドウを開かない、起動時に開くページを「最後のセッション」にしていない方には関係ないかと思います。

感想

以上、VivaldiのカスタムCSSを使って、右上の×ボタンを押せなくする、あるいは存在自体を消す方法についてでした。やっぱり元に戻したい場合は、本記事を見て書き込んだコードを削除してブラウザを再起動するだけです。

余談ですが、同じようにCSSを使うことで、ツールバーのボタンを好きなアイコンに変えることもできます。(Windowsのウィンドウ操作ボタンをMac風にするのは、一番ナンセンスか笑)

Windows版Vivaldiのウィンドウ操作ボタンを、Macの信号っぽいデザインにした画像

Posted by ナポリタン寿司