【Vivaldi】Chrome拡張機能とかのツールバーを並び替える方法・CSS

2021年12月19日カスタムCSS

Vivaldiのアイコン

この記事では、Vivaldi でChrome拡張機能ボタンを並べ替える方法と、オリジナルカスタムUI機能を使って、より柔軟に入れ替える方法について書きます。

アドレスバーの左側に拡張機能を配置したスクリーンショット

Chrome拡張機能ボタンは、Shiftを押しながら、マウスでドラッグ&ドロップすることで並び替えできます。

拡張機能の並べ替え

さらに、CSSを使うことで、より柔軟に並べ替えできます。例えば、アドレスバーの左側に配置する、特定の拡張機能だけ、Chrome拡張機能の一覧リストから外れた場所に配置する…といったことができます。

オリジナルカスタムUI(CSS)を使うには?

この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。

有効にしていないという方は、以下の記事を参考にしてみてください。

CSS

ツールバーの並べ替え

CSSは以下になっています。

/*【ツールバー並べ替え】拡張機能*/
.toolbar.toolbar-mainbar.toolbar-extensions.toolbar-large {
    order: 1;
}

/*【ツールバー並べ替え】進む・戻るボタンとか*/
.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-large {
    order: 2;
}

/*【ツールバー並べ替え】アドレスバー*/
.UrlBar-AddressField, .UrlBar-SearchField, .UrlBar-AddressField:focus, .UrlBar-SearchField:focus {
    order: 3;
}

上記のCSSを、エディタ(Visual Studio Codeやメモ帳など)でファイルに書き込みます。以下の感じです。

ツールバーの並べ替えCSS

ブラウザをリロードしたら、反映されます。

「order」の横にある数字順で、左から並ぶようになっています。上記CSSだと、以下の順番になります。

  1. ダウンロード
  2. 拡張機能
  3. ツールバーボタン
  4. アドレスバー
拡張機能を一番左に並べ替え

拡張機能は、クリックで問題なく展開されます。

クリックで拡張機能の展開

といっても矢印の向きが変わるわけではないので、ちょっと違和感です。それに開閉する度に、展開ボタンの位置がずれるので少し不便ですね。

開閉ボタンが動くので押しにくい

拡張機能を「order: 2;」にして、ツールバーボタンを「order: 1;」にすると、下記画像の配置になります。

ツールバーボタン、拡張機能順

特定の拡張機能だけ外に出す

以下のコードを使うと、Google翻訳の拡張機能だけをリスト一覧の外に出せます。

/*【ツールバー並べ替え】Google翻訳*/
.button-toolbar.aapbdbdomjkkjkaonfhkkikfgjllcleb.ExtensionIcon.extensionId {
    order: 1;
}

下記画像のように、Chrome拡張機能ボタン展開の矢印の外に出せます。

Google翻訳だけ外に出す

拡張機能によって、セレクタは異なるので各自で調べてみてくださーい。

特定の拡張機能の拡大もできます。Google翻訳ボタンを拡大すると押しやすくて便利です。

Google翻訳ボタンを拡大するCSSを適用した画像

詳しくは、以下の記事を参考にしてみてください。

参考:【Vivaldi】Google翻訳の拡張機能ボタンを大きくするCSS | ナポリタン寿司のPC日記

感想

以上、拡張機能の並べ替え、及び、より自由に並べ替えるCSSについてでした。

色々試してみて思ったのが、やはりデフォルトの状態がほぼ完成された状態なんだなぁってことです。拡張機能は右上にないとそわそわします。

並べ替えよりも、マウスオーバーで自動開閉が便利です。

参考:【Vivaldi】Chrome拡張機能をマウスオーバーで展開するCSS | ナポリタン寿司のPC日記

Posted by ナポリタン寿司