広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

【Vivaldi】コマンドチェインのドロップダウンの高さ調整CSS

2022年12月27日カスタムCSS

「Vivaldi」のアイコン

この記事では、「Vivaldi(ヴィヴァルディ)」ブラウザのオリジナルカスタムUI機能を使って、設定画面内にあるコマンドチェインのドロップダウンリストを好きな高さに拡張するCSSについて書きます。

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

「Vivaldi」ブラウザのドロップダウンリストの高さを広げる前と後の比較画像

デフォルトでは、下記画像のようになっていて、数行のコマンドしか表示されません。1回のスクロール行数を増やしている方は、軽くスクロールするだけで、一気にコマンドが飛んでしまいます。ちょっと不便です。

「Vivaldi」ブラウザの設定画面内にあるドロップダウンリスト画像

CSSを使うことで、こちら側が指定した高さにできます。いつでもオンオフできます。コマンドチェインのコマンド選択だけでなく、マウスジェスチャーのドロップダウンリストにも反映されます。

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

ドロップダウンの高さを調整するCSS

以下のCSSになります。

/*設定のドロップダウンリストの高さ*/
.VivaldiSelector .Inner__menu-list {
    max-height: 400px !important;
}
コマンドチェイン設定ページだけで反映させたい場合

以下のCSSになります。コマンドチェインの設定ページだけで、ドロップダウンリストの高さが変わると思います。

/*コマンドチェイン設定のドロップダウンリストの高さ*/
.ChainedCommand .VivaldiSelector .Inner__menu-list {
    max-height: 400px !important;
}

max-height」の数字を、各自で好きなサイズに調整してみてください。上記CSSをそのままコピペするだけでも、見やすくなると思います。

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

Visual Studio Codeのスクリーンショット

Vivaldiブラウザを再起動します。これで設定画面内のドロップダウンリスト(コマンドチェイン)が、指定した高さになります。1ページに表示される項目が増えて、見やすくなります。

「Vivaldi」ブラウザにあるコマンドチェインのドロップダウンリストの高さを広げた画像

マウスジェスチャー項目にも反映されます。

「Vivaldi」ブラウザにあるマウスジェスチャーのドロップダウンリストの高さを広げた画像

元に戻したい場合は、書き込んだCSSを削除して、ブラウザを再起動します。

各項目の行間を調整するCSS

各項目の行間を調整したい場合、以下のCSSを書き込みます。「height」の部分を各自で調整します。もっと間隔を狭めたい場合は、数字を小さくします。小さくしすぎると、項目同士が重なるので注意です。

/*設定のドロップダウン項目間の行間*/
.VivaldiSelector .Inner__option {
    height: 19px !important;
}

適用前と適用後の比較画像を貼っておきます。ぎゅっとなっています。

コマンドチェインのドロップダウンリストの行間を調整した比較画像

感想

以上、「Vivaldi(ヴィヴァルディ)」の設定画面内にあるドロップダウンリストを好きな高さに変更する方法(CSS)でした。

僕が適当に作っただけなので、思わぬところの表示が崩れるかもしれません。その場合、問い合わせより教えていただければ幸いです。

コマンドチェインについては、下記記事を参考にしてみてください。

同じく設定のフィードリストを拡張する記事も書いています。

2022年12月27日カスタムCSS

Posted by ナポリタン寿司