【Vivaldi】ブックマークポップアップの高さ・横幅を広げるCSS

2023年2月1日2023年5月23日カスタムCSS

この記事では、「Vivaldi（ヴィヴァルディ）」ブラウザのオリジナルカスタムUI機能を使って、ブックマーク編集ポップアップ画面を、好きな高さ・横幅に調整するCSSについて書きます。

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

「Vivaldi」ブラウザで、アドレスバー内にあるボタンをクリックすると、ブックマーク編集ダイアログが表示されます。この編集画面が、小さいという声を発見しました。（Vivaldiフォーラム）

フォルダーを沢山作成していると、高さが足りなくて、スクロールしても飛ばし飛ばしで表示され、一部フォルダーが見えない状態になります。

沢山フォルダーを作成しても見やすいように、カスタムCSSで好きな大きさに変更してみます。自身の好きなサイズにできます。高さだけでなく、横幅も調整可能です。いつでもオンオフできます。

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

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

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

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

1. ブックマーク作成画面の高さ・横幅を変更する手順
2. 感想

ブックマーク作成画面の高さ・横幅を変更する手順

以下のCSSになります。

/*ブックマーク登録ダイアログの高さ*/
.BookmarkLocationSelector-FolderList {
    height: 400px !important;
}

/*ブックマーク登録ダイアログの横幅*/
form.BookmarkPopup {
    width: 470px !important;
}

.BookmarkPopup-LocationSelector {
    max-width: unset !important;
}

「height」が高さで、「width」が横幅です。好みの数値に調整してみてください。

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