【Vivaldi】Chrome拡張機能の展開ボタンを三角形に戻すCSS

カスタムCSS

Vivaldiのアイコン

この記事では、VivaldiブラウザのオリジナルカスタムUI機能を使って、Chrome拡張機能の展開ボタンをジグソーパズルから、以前の左向き三角形に変更するCSSについて書きます。

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

VivaldiのChrome拡張機能の展開ボタンを、5.2以前の左向き三角形に戻した画像

本記事で紹介するCSSを使うことで、VivaldiブラウザのChrome拡張機能の展開ボタンをバージョン5.2以前の左向き三角形に戻せます。

記憶が曖昧なのですが、確か2022年6月1日に公開されたVivaldiバージョン5.3から、Chrome拡張機能の展開ボタンがジグソーパズルになりました。恐らく、VivaldiのベースとなっているChromiumのバージョンアップの影響かなと思います。

正直、ジグソーパズル自体が何かしらのChrome拡張機能に見えてしまい、少し不便です。以前の左向き三角形の方が、「ここをクリックしたら、拡張機能が表示されるんだろうなぁ~」と一目で判断しやすいと思いました。

そこで、Vivaldiの隠し機能であるカスタムCSSで、元の三角形に戻して見ます。サイズ、形、色など完璧に戻せます。全然別のアイコンに差し替えることも可能です。

本記事は、Chrome拡張機能の展開ボタンを変更する方法に絞っていますが、同じ要領で、別のツールバーアイコンも変更できます。最近ツールバーに配置できるようになったコマンドチェインのアイコンも変更できます。

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

Chrome拡張機能の展開ボタンを以前の三角形に戻すCSS

以下のCSSになります。

/*Chromeウェブストアの展開ボタンを以前の三角形に戻す*/
button[name="Extensions"] svg path {
  d: path('M10 13l3.634-3.634c.504-.504 1.366-.147 1.366.566v6.137c0 .713-.862 1.07-1.366.566l-3.634-3.634z');
}

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

「Chromeウェブストアの展開ボタンを以前の三角形に戻す」CSSを書き込んだVisual Studio Code画面

Vivaldiを再起動すると、バージョン5.2以前の左向きの三角形になっているはずです。クリックで、いつも通り非表示にしている拡張機能を展開できます。

Chrome拡張機能の展開ボタンがジグソーパズルではなく、左向き三角形に戻る
注意点

5.2以前は、クリックした時に、左向き三角形から右向き三角形に変化しました。

本記事で紹介したCSSは、表示・非表示関係なしに左向き三角形になります。これは、単純にナポリタン寿司の技術不足です。クリックで右向きと左向き切り替える方法を知りません。

知っている方は、ぜひとも教えていただきたいです。

色を変更する

色を変更したい場合は、上記コードは削除して、代わりに下記コードを利用します。ほぼ一緒ですが、「fill: #619df8;」があるかないかですね。「#619df8」の部分を、好きな色に書き換えます。色は、HTMLカラーコードで指定できます。

/*Chromeウェブストアの展開ボタンを以前の三角形に戻す*/
button[name="Extensions"] svg path {
 d: path('M10 13l3.634-3.634c.504-.504 1.366-.147 1.366.566v6.137c0 .713-.862 1.07-1.366.566l-3.634-3.634z');
 fill: #619df8;
}
展開ボタンの色を「#619df8;」に変更した画像

ちょっと三角形を大きくする

三角形が少し小さいと感じる場合は、代わりに下記コードを利用します。色も一緒に変更したい場合は、下記コードに「fill: #619df8;」を追記します。

/*Chromeウェブストアの展開ボタンを以前の三角形に戻す*/
button[name="Extensions"] svg path {
 d: path('M17.5 6.25v12.5l-11.25-6.25 11.25-6.25z');
}

どどんと三角形が大きくなります。

展開ボタンを少し拡大した画像

そもそも三角形ではなく、丸アイコンにする

三角形じゃなくて、別のアイコンにすることも可能です。本記事では、サンプルとして「〇」アイコンを紹介します。

/*Chromeウェブストアの展開ボタンを以前の三角形に戻す*/
button[name="Extensions"] svg path {
 d: path('M13.714 8c0 3.786-3.071 6.857-6.857 6.857s-6.857-3.071-6.857-6.857 3.071-6.857 6.857-6.857 6.857 3.071 6.857 6.857z');
}

/*Chromeウェブストアの展開ボタンの位置調整*/
button[name="Extensions"] svg {
  margin-top: 7px;
  margin-left: 6px;
}

展開ボタンが、綺麗な丸になります。まぁ、個人的には左向き三角形が一番いいかなと思います。

展開ボタンを三角形ではなく、丸に変更した画像

感想

以上、バージョン5.3から変わってしまったChrome拡張機能の展開ボタンを、5.2以前の左向き三角形に戻すCSSでした。

思ったよりサクッと戻せました。

Posted by ナポリタン寿司