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

2022年6月8日2022年12月2日カスタムCSS

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

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

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

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

ジグソーパズル自体が、何かしらのChrome拡張機能に見えてしまい、ちょっとだけ不便かもしれません。以前の左向き三角形の方が良かったという方、参考にしてみてください。

サイズ、形、色など完璧に戻せます。別のアイコンに差し替えることも可能です。ただし、左向きアイコンのみの固定になります。以前は、拡張機能を展開すると右向きアイコンに変わってくれましたが、僕の技術不足で、展開時も左向きアイコンになります。

本記事は、Chrome拡張機能の展開ボタンを変更する方法に絞っていますが、同じ要領で、別のツールバーアイコンも変更できます。

【Vivaldi】ツールバーのアイコンを変更するCSS

この記事では、「Vivaldi（ビバルディ）」ブラウザのオリジナルカスタムUI機能を使って、ツールバーに ...

https://www.naporitansushi.com/toolbar-change-icon/

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

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画面

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

Chrome拡張機能の展開ボタンをジグソーパズルから左向き矢印アイコンにした画像

注意点

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

本記事で紹介した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');
 fill: #619df8;
}

ほぼ一緒ですが、「fill: #619df8;」を追記しています。「#619df8」の部分を調整することで、好きな色に変更できます。色は、HTMLカラーコードで指定できます。（参考サイト）

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

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

/*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;
}

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