【Vivaldi】ブックマークポップアップの高さ・横幅を広げるCSS
![「Vivaldi」のアイコン](https://www.naporitansushi.com/wp-content/uploads/2021/05/vivaldi-backup_01.png)
![【Vivaldi】ブックマークポップアップの高さ・横幅を広げるCSS](https://www.naporitansushi.com/wp-content/uploads/2023/02/vivaldi-bookmark-popup-css_01.png)
「Vivaldi」ブラウザで、アドレスバー内にあるボタンをクリックすると、ブックマーク編集ダイアログが表示されます。この編集画面が、小さいという声を発見しました。(Vivaldiフォーラム)
![Vivaldiブラウザの「ブックマークしました」ダイアログ画像](https://www.naporitansushi.com/wp-content/uploads/2023/02/vivaldi-bookmark-popup-css_04.png)
フォルダーを沢山作成していると、高さが足りなくて、スクロールしても飛ばし飛ばしで表示され、一部フォルダーが見えない状態になります。
沢山フォルダーを作成しても見やすいように、カスタムCSSで好きな大きさに変更してみます。自身の好きなサイズにできます。高さだけでなく、横幅も調整可能です。いつでもオンオフできます。
本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。
ブックマーク作成画面の高さ・横幅を変更する手順
以下のCSSになります。
/*ブックマーク登録ダイアログの高さ*/
.BookmarkLocationSelector-FolderList {
height: 400px !important;
}
/*ブックマーク登録ダイアログの横幅*/
form.BookmarkPopup {
width: 470px !important;
}
.BookmarkPopup-LocationSelector {
max-width: unset !important;
}
「height
」が高さで、「width
」が横幅です。好みの数値に調整してみてください。
上記のCSSを、テキストエディター(Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど)でファイルに書き込みます。
![「Visual Studio Code」にVivaldiのブックマークダイヤログのサイズを調整するCSSを書き込んだ画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/vivaldi-bookmark-popup-css_07.png)
Vivaldiを再起動して、適当なページをブックマークして、ダイアログを表示します。CSSで指定した高さ・横幅になります。
![Vivaldiブラウザの「ブックマークしました」ダイアログをCSSで広げた画像1](https://www.naporitansushi.com/wp-content/uploads/2023/02/vivaldi-bookmark-popup-css_02.png)
横幅を拡張しなくていい場合は、「ブックマーク登録ダイアログの高さ
」のコードだけ書き込みます。変更したら、その都度ブラウザを再起動する必要があります。
高さを広げることで、目に入るフォルダーの数が増えます。飛ばし飛ばしスクロール問題が解決します。
![Vivaldiブラウザの「ブックマークしました」ダイアログをCSSで広げた画像2](https://www.naporitansushi.com/wp-content/uploads/2023/02/vivaldi-bookmark-popup-css_03.png)
やっぱり、元に戻したい場合は、カスタムCSSに書き込んだコードを削除して、ブラウザを再起動します。元のサイズに戻ります。
本コードは、Vivaldi側のアップデートにより、利用できなくなる可能性があります。その際は、問い合わせより連絡いただければなと思います。
感想
以上、「Vivaldi(ヴィヴァルディ)」ブラウザのブックマーク作成ポップアップを、好きな高さ・横幅に調整するCSSでした。
他にも、CSS関連の記事を書いています。気になった方は、こちらのカテゴリーをチェックしてみてください。