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

2022年2月21日カスタムCSS

Vivaldiのアイコン

この記事では、VivaldiのオリジナルカスタムUI機能を使って、ツールバーにあるアイコンを変更するCSSについて書きます。

好きなSVG画像と差し替えれます。

Vivaldiのツールバーを変更してみた画像

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

具体的には、以下のようなボタンを変更できます。

  • Vivaldiメニュー
  • 新しいタブで開く
  • 再読み込み
  • アドレスバー内の検索
  • アドレスバー内の広告ブロッカー
  • 閉じたタブを表示
  • (ウィンドウグループ)最小化
  • (ウィンドウグループ)最大化
  • (ウィンドウグループ)閉じる
  • ダウンロード

アイコンは、SVG画像で登録されているので、ここの画像を、CSSで上書きすることで変更できます。

好きな色、拡大率、透明度にできます。

SVGのフリー素材画像は、インターネット上に数多く配布されているので、コピペで利用できます。

Windows版Vivaldiの最小化、最大化、閉じるボタンを、Mac風にすることも可能です。気になった方は、こちらを参考にしてみてください。

僕はCSS初心者なので、まだ研究途中です。

SVGは、パッチ(path)じゃないと登録できないのか、ローカル環境の画像も登録できるかなどなど…。詳しい方、コメントお待ちしております。

「誰にも迷惑かけずに、自分の好きなSVG画像にしたい!」という方、ぜひ試してみてください。

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

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

自分で書いたCSSで、ブラウザの外観を好きなようにカスタマイズできる機能です。デフォルトではオンになっていないので、設定でオンにする必要があります。

CSSと呼ばれるプログラミング言語をある程度理解している必要がありますが、使いこなせれば、自由にブラウザを好みの外観に変更できます。

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

いくつかテーマ関連のCSSコードのサンプルを、以下の記事に書いています。

気になった方は、合わせて参考にしてみてください。色々な部分の背景色を透明化したりできます。

CSS

流れとしては、以下の4ステップです。普通のCSSよりも若干、手間がかかります。

  1. SVG画像を用意する(path コード)
  2. pathコードの整理
  3. 変更したいツールバーのセレクタを特定する
  4. CSSを書き込む

最終的に、以下のような形になります。

/*Vivaldiメニューアイコン*/
.vivaldi[title="メニュー"] svg path {
  d: path('M 0, 5.5 C 0, 2.585 2.585, 0 5.5, 0 S 11, 2.585 11, 5.5 8.415, 11 5.5, 11 0, 8.415 0, 5.5');
  /*ここに好きなSVG画像(path)を指定する*/
}

最初に、完成形態を見ておいた方が、理解が深まるかなと思います。

上記コードになるように、早速作成していきましょう。

SVG画像を用意する(path コード)

まずは、差し替えたいSVG画像(path コード)を用意します。

一般的な画像拡張子の「PNG」や、「JPG」などではダメです。もしかしたらいけるかもしれませんが、本記事ではSVGを前提にします。

自分で作成できる人は、自作してもOKです。初心者(僕)には、まず無理なので、無料で提供されている素材サイトを利用してみましょう。

いくつか、僕が知っているサイトを貼っておきます。

SVG画像素材サイト
IcoMoon Appモノクロでシンプルなアイコン素材を配布しているサイト
Simple Icons各企業、Webサービス、SNSなどのSVG画像を配布しているサイト
Squircley | SVG Squircle Maker好きな色の円、四角のSVG画像を作成できるサイト
JXNBLK-PATHS簡易的な図形(SVG)を自分で作成できるサイト

IcoMoon App

モノクロでシンプルなアイコン画像を、SVGのPathで確認できるサイトです。

VivaldiのCSSでは、Pathと呼ばれるコードで画像を指定するので、そのまま本サイトのコードを活用できます。

IcoMoon Appのスクリーンショット

Pathを取得したい画像を選択したら、左下の「Generate SVG & More」をクリックします。複数選択することも可能です。

欲しいアイコンを選択 Generate SVG & More

右側でサイズを指定します。16、32、48、64の中から選択できます。

欲しいSVG画像サイズを指定する
ポイント

Vivaldiで使う場合は、サイズは一番小さい「16」がおすすめです。

大きすぎると、ツールバーからはみ出ます。CSSで調整するのも手間なので、ちょーどいいくらいの「16」にしましょう。

サイズを指定できたら、アイコンの下にある「Get Code」をクリックします。

「Get Code」をクリック

CSSが表示されます。

2番目にある「Symbol Definition(s)」の部分を使います。

CSSのコードが表示されるのでコピーする

Simple Icons

Amazon、YouTube、Twitter、NIKEなどの企業やWebサービス、SNSなどのアイコンをSVGで配布しているサイトです。

Simple Iconsのスクリーンショット

クリックでコードをクリップボードにコピーします。

クリックでNIKEのロゴ画像(SVG)をコピー

検索ボックスに入力する時は、英語・ローマ字で入力しましょう。

日本で有名な企業、サービスなど数多くありました。

Simple Iconsで自分が見たことある企業やWebサービスのアイコン一覧
参考:Simple Icons

Squircley | SVG Squircle Maker

好きな色で、円、四角のSVGを作成できるサイトです。

Squircley | SVG Squircle Makerのスクリーンショット

シンプルな四角や円を作成したい場合は、このサイトだけで十分です。

試しに、本サービスを利用して作成した丸い画像を適用してみました。すごくシンプルなんですが、Vivaldiのデザインに合いました。

Vivaldiメニューをシンプルな丸アイコンに変更

個人的にはこのくらいで十分です。

JXNBLK-PATHS

自分で好きな図形のSVG画像を作成できるサイトです。

「角」を好きなように追加できるので、三角形、四角形、六角形などを作成できます。

JXNBLK-PATHSのスクリーンショット

作成できたら、左下の「Download」をクリックします。

JXNBLK-PATHS Download

pathコードの整理

Vivaldiでpathコードを使うには、ちょっとだけ整理する必要があります。

SVG画像としてパソコンに保存した場合は、pathコードの確認、「IcoMoon App」などのサービスで、コードを直接コピーした場合は、必要な部分の洗い出し作業が必要になります。

SVG画像のpath コード確認

コードではなく、拡張子SVGでローカル上に保存した場合は、pathコードに変換する必要があります。

ダウンロードしたSVG画像をクリックして、ブラウザで開きます。

ダウンロードしたSVG画像をダブルクリックで起動

起動したら、アイコンが小さく表示されているので、右クリック→検証をクリックします。またはショートカットキーのF12でもOKです。

ページの右クリック 検証(F12)

開発者ツールが起動します。ヘッダーの「Elements(要素)」タブをクリックします。

その中から、「path d="〇〇"」といった部分を探します。

<path d="M8 48 L56 48 L32 12 Z"></path>
開発者ツール <path d="M8 48 L56 48 L32 12 Z"></path>

SVG画像によっては、色々余計な物が書かれていたりするかもしれませんが、基本的な構造は一緒のはずです。

見つけたら、さらにその中の「〇〇〇」の部分をコピーします。

上記画像の場合は、以下の部分になります。

M8 48 L56 48 L32 12 Z

これが、SVG画像を文字で表しているpathです。この文字列をコピーすることで、全く同じ画像を表示できます。

必要な部分の洗い出し

SVG画像の保存ではなく、コードをコピーできるサイトの場合は、必要なコードを切り取ります。

例えば、「IcoMoon App」のサイトで、コードをコピーしたとします。

Symbol Definition(s)内のコードをコピー

普通は以下のようになります。

<symbol id="icon-cool2" viewBox="0 0 16 16">
<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8c4.418 0 8-3.582 8-8s-3.582-8-8-8zM8 13c-0.757 0-1.475-0.169-2.118-0.47l0.518-0.864c0.49 0.214 1.031 0.334 1.6 0.334 1.456 0 2.731-0.778 3.43-1.942l0.858 0.515c-0.874 1.454-2.467 2.427-4.288 2.427zM13 6c0 0.55-0.45 1-1 1h-2c-0.55 0-1-0.45-1-1h-2c0 0.55-0.45 1-1 1h-2c-0.55 0-1-0.45-1-1v-1.5c0-0.275 0.225-0.5 0.5-0.5h3c0.275 0 0.5 0.225 0.5 0.5v0.5h2v-0.5c0-0.275 0.225-0.5 0.5-0.5h3c0.275 0 0.5 0.225 0.5 0.5v1.5z"></path>
</symbol>

この中で必要になるのは、「<path d="〇〇〇"></path>」の「〇〇〇」の部分です。

M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8c4.418 0 8-3.582 8-8s-3.582-8-8-8zM8 13c-0.757 0-1.475-0.169-2.118-0.47l0.518-0.864c0.49 0.214 1.031 0.334 1.6 0.334 1.456 0 2.731-0.778 3.43-1.942l0.858 0.515c-0.874 1.454-2.467 2.427-4.288 2.427zM13 6c0 0.55-0.45 1-1 1h-2c-0.55 0-1-0.45-1-1h-2c0 0.55-0.45 1-1 1h-2c-0.55 0-1-0.45-1-1v-1.5c0-0.275 0.225-0.5 0.5-0.5h3c0.275 0 0.5 0.225 0.5 0.5v0.5h2v-0.5c0-0.275 0.225-0.5 0.5-0.5h3c0.275 0 0.5 0.225 0.5 0.5v1.5z

この部分が必要になるので、どこかにコピーします。

変更したいツールバーのセレクタを特定する

変更したいボタンのセレクタを特定します。

自分で調べれる方は分かると思うので、分からない方のために、僕が調べたボタンを書いておきます。これ以外にも変更したい箇所があれば、コメント欄にて教えていただければなと思います。

/*Vivaldiメニューアイコン*/
.vivaldi[title="メニュー"] svg path {
  d: path('〇〇〇');
}

/*「新しいタブで開く」アイコン*/
#tabs-container .newtab svg path {
  d: path('〇〇〇');
}

/*再読み込みボタン*/
.ToolbarButton-Button[title="現在のページを再読み込み"] svg path {
  d: path('〇〇〇');
}

/*アドレスバー内の検索ボタン*/
.button-addressfield[title="サイト情報"] svg path {
  d: path('〇〇〇');
}

/*アドレスバー内の広告ブロッカー*/
.ContentBlocker-Control button svg path {
  d: path('〇〇〇');
}

/*閉じたタブを表示ボタン(ゴミ箱)*/
.toggle-trash button svg path {
  d: path('〇〇〇');
}

/*最小化ボタン*/
.window-buttongroup .window-minimize svg path {
  d: path('〇〇〇');
}

/*最大化ボタン*/
.window-buttongroup .window-maximize svg path {
  d: path('〇〇〇');
}

/*閉じるボタン*/
.window-buttongroup .window-close svg path {
  d: path('〇〇〇');
}

/*ダウンロードボタン*/
.ToolbarButton-Button[title="ダウンロード"] svg path {
  d: path('〇〇〇');
}

上記の中から、変更したいツールバーのボタンのコードを丸々コピーして、スタイルシート(VivaldiのCSSを書き込む場所)に貼り付けます。

ポイント

一部コードは、日本語専用コードになっています。

設定で、英語などの別言語にしている場合は、正常に反映されないので、気を付けてください。

CSSを書き込む

実際にCSSを書き込みます。

ステップ2で用意したpathコードと、ステップ3で用意したセレクタの下書きを合体させます。

Vivaldiメニュー

例えば、ブラウザの左上にあるVivaldiのアイコンVivaldiメニューを、サングラスをかけた絵文字アイコンにする場合は、以下のCSSになります。

/*Vivaldiメニューアイコン*/
.vivaldi[title="メニュー"] svg path {
  d: path('M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8c4.418 0 8-3.582 8-8s-3.582-8-8-8zM8 13c-0.757 0-1.475-0.169-2.118-0.47l0.518-0.864c0.49 0.214 1.031 0.334 1.6 0.334 1.456 0 2.731-0.778 3.43-1.942l0.858 0.515c-0.874 1.454-2.467 2.427-4.288 2.427zM13 6c0 0.55-0.45 1-1 1h-2c-0.55 0-1-0.45-1-1h-2c0 0.55-0.45 1-1 1h-2c-0.55 0-1-0.45-1-1v-1.5c0-0.275 0.225-0.5 0.5-0.5h3c0.275 0 0.5 0.225 0.5 0.5v0.5h2v-0.5c0-0.275 0.225-0.5 0.5-0.5h3c0.275 0 0.5 0.225 0.5 0.5v1.5z');
}

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

Vivaldiメニューアイコン変更CSS Visual Studio Code

ブラウザを再起動すると、アイコンが変更されています。にんまりサングラス顔文字です。

ブラウザを再起動すると、Vivaldiメニューアイコンがサングラス顔文字に変更される

位置がおかしい時は、以下のCSSを一緒に使います。

/*位置がおかしい時に使う。調整用*/
.vivaldi[title="メニュー"] svg {
  margin-top: 7px;
  margin-left: 4px;
}

それぞれの数字を微調整して、自分の好きな位置にします。例えば、もう少し下にしたい場合は、「margin-top: 10px;」といったように数字を大きくします。

再読み込みボタン

再読み込みボタンをNIKEアイコンにする場合は、以下のCSSになります。

/*再読み込みボタン*/
.ToolbarButton-Button[title="現在のページを再読み込み"] svg path {
  d: path('M24 7.8L6.442 15.276c-1.456.616-2.679.925-3.668.925-1.12 0-1.933-.392-2.437-1.177-.317-.504-.41-1.143-.28-1.918.13-.775.476-1.6 1.036-2.478.467-.71 1.232-1.643 2.297-2.8a6.122 6.122 0 00-.784 1.848c-.28 1.195-.028 2.072.756 2.632.373.261.886.392 1.54.392.522 0 1.11-.084 1.764-.252L24 7.8z');
}

NIKE風の再読み込みボタンになります。

再読み込みボタンをNIKE風のロゴ画像に変更

閉じたタブを表示(ゴミ箱)と新しいタブで開く

「閉じたタブを表示」をMicrosoft Edgeアイコン、「新しいタブで開く」をFirefoxアイコンにする場合は、以下のCSSになります。

/*閉じたタブを表示ボタン(ゴミ箱)*/
.toggle-trash button svg path {
  d: path('M21.86 17.86q.14 0 .25.12.1.13.1.25t-.11.33l-.32.46-.43.53-.44.5q-.21.25-.38.42l-.22.23q-.58.53-1.34 1.04-.76.51-1.6.91-.86.4-1.74.64t-1.67.24q-.9 0-1.69-.28-.8-.28-1.48-.78-.68-.5-1.22-1.17-.53-.66-.92-1.44-.38-.77-.58-1.6-.2-.83-.2-1.67 0-1 .32-1.96.33-.97.87-1.8.14.95.55 1.77.41.82 1.02 1.5.6.68 1.38 1.21.78.54 1.64.9.86.36 1.77.56.92.2 1.8.2 1.12 0 2.18-.24 1.06-.23 2.06-.72l.2-.1.2-.05zm-15.5-1.27q0 1.1.27 2.15.27 1.06.78 2.03.51.96 1.24 1.77.74.82 1.66 1.4-1.47-.2-2.8-.74-1.33-.55-2.48-1.37-1.15-.83-2.08-1.9-.92-1.07-1.58-2.33T.36 14.94Q0 13.54 0 12.06q0-.81.32-1.49.31-.68.83-1.23.53-.55 1.2-.96.66-.4 1.35-.66.74-.27 1.5-.39.78-.12 1.55-.12.7 0 1.42.1.72.12 1.4.35.68.23 1.32.57.63.35 1.16.83-.35 0-.7.07-.33.07-.65.23v-.02q-.63.28-1.2.74-.57.46-1.05 1.04-.48.58-.87 1.26-.38.67-.65 1.39-.27.71-.42 1.44-.15.72-.15 1.38zM11.96.06q1.7 0 3.33.39 1.63.38 3.07 1.15 1.43.77 2.62 1.93 1.18 1.16 1.98 2.7.49.94.76 1.96.28 1 .28 2.08 0 .89-.23 1.7-.24.8-.69 1.48-.45.68-1.1 1.22-.64.53-1.45.88-.54.24-1.11.36-.58.13-1.16.13-.42 0-.97-.03-.54-.03-1.1-.12-.55-.1-1.05-.28-.5-.19-.84-.5-.12-.09-.23-.24-.1-.16-.1-.33 0-.15.16-.35.16-.2.35-.5.2-.28.36-.68.16-.4.16-.95 0-1.06-.4-1.96-.4-.91-1.06-1.64-.66-.74-1.52-1.28-.86-.55-1.79-.89-.84-.3-1.72-.44-.87-.14-1.76-.14-1.55 0-3.06.45T.94 7.55q.71-1.74 1.81-3.13 1.1-1.38 2.52-2.35Q6.68 1.1 8.37.58q1.7-.52 3.58-.52Z');
}

/*「新しいタブで開く」アイコン*/
#tabs-container .newtab svg path {
  d: path('M8.824 7.287c.008 0 .004 0 0 0zm-2.8-1.4c.006 0 .003 0 0 0zm16.754 2.161c-.505-1.215-1.53-2.528-2.333-2.943.654 1.283 1.033 2.57 1.177 3.53l.002.02c-1.314-3.278-3.544-4.6-5.366-7.477-.091-.147-.184-.292-.273-.446a3.545 3.545 0 01-.13-.24 2.118 2.118 0 01-.172-.46.03.03 0 00-.027-.03.038.038 0 00-.021 0l-.006.001a.037.037 0 00-.01.005L15.624 0c-2.585 1.515-3.657 4.168-3.932 5.856a6.197 6.197 0 00-2.305.587.297.297 0 00-.147.37c.057.162.24.24.396.17a5.622 5.622 0 012.008-.523l.067-.005a5.847 5.847 0 011.957.222l.095.03a5.816 5.816 0 01.616.228c.08.036.16.073.238.112l.107.055a5.835 5.835 0 01.368.211 5.953 5.953 0 012.034 2.104c-.62-.437-1.733-.868-2.803-.681 4.183 2.09 3.06 9.292-2.737 9.02a5.164 5.164 0 01-1.513-.292 4.42 4.42 0 01-.538-.232c-1.42-.735-2.593-2.121-2.74-3.806 0 0 .537-2 3.845-2 .357 0 1.38-.998 1.398-1.287-.005-.095-2.029-.9-2.817-1.677-.422-.416-.622-.616-.8-.767a3.47 3.47 0 00-.301-.227 5.388 5.388 0 01-.032-2.842c-1.195.544-2.124 1.403-2.8 2.163h-.006c-.46-.584-.428-2.51-.402-2.913-.006-.025-.343.176-.389.206-.406.29-.787.616-1.136.974-.397.403-.76.839-1.085 1.303a9.816 9.816 0 00-1.562 3.52c-.003.013-.11.487-.19 1.073-.013.09-.026.181-.037.272a7.8 7.8 0 00-.069.667l-.002.034-.023.387-.001.06C.386 18.795 5.593 24 12.016 24c5.752 0 10.527-4.176 11.463-9.661.02-.149.035-.298.052-.448.232-1.994-.025-4.09-.753-5.844z');
}

Vivaldiに喧嘩を売るようなデザインになります。(くれぐれも見つかりませんように)

FirefoxとMicrosoft Edgeのアイコンに変更

色を付けたい場合は、それぞれに「fill: #色;」でカラーコードを指定します。

/*閉じたタブを表示ボタン(ゴミ箱)*/
.toggle-trash button svg path {
  d: path('M21.86 17.86q.14 0 .25.12.1.13.1.25t-.11.33l-.32.46-.43.53-.44.5q-.21.25-.38.42l-.22.23q-.58.53-1.34 1.04-.76.51-1.6.91-.86.4-1.74.64t-1.67.24q-.9 0-1.69-.28-.8-.28-1.48-.78-.68-.5-1.22-1.17-.53-.66-.92-1.44-.38-.77-.58-1.6-.2-.83-.2-1.67 0-1 .32-1.96.33-.97.87-1.8.14.95.55 1.77.41.82 1.02 1.5.6.68 1.38 1.21.78.54 1.64.9.86.36 1.77.56.92.2 1.8.2 1.12 0 2.18-.24 1.06-.23 2.06-.72l.2-.1.2-.05zm-15.5-1.27q0 1.1.27 2.15.27 1.06.78 2.03.51.96 1.24 1.77.74.82 1.66 1.4-1.47-.2-2.8-.74-1.33-.55-2.48-1.37-1.15-.83-2.08-1.9-.92-1.07-1.58-2.33T.36 14.94Q0 13.54 0 12.06q0-.81.32-1.49.31-.68.83-1.23.53-.55 1.2-.96.66-.4 1.35-.66.74-.27 1.5-.39.78-.12 1.55-.12.7 0 1.42.1.72.12 1.4.35.68.23 1.32.57.63.35 1.16.83-.35 0-.7.07-.33.07-.65.23v-.02q-.63.28-1.2.74-.57.46-1.05 1.04-.48.58-.87 1.26-.38.67-.65 1.39-.27.71-.42 1.44-.15.72-.15 1.38zM11.96.06q1.7 0 3.33.39 1.63.38 3.07 1.15 1.43.77 2.62 1.93 1.18 1.16 1.98 2.7.49.94.76 1.96.28 1 .28 2.08 0 .89-.23 1.7-.24.8-.69 1.48-.45.68-1.1 1.22-.64.53-1.45.88-.54.24-1.11.36-.58.13-1.16.13-.42 0-.97-.03-.54-.03-1.1-.12-.55-.1-1.05-.28-.5-.19-.84-.5-.12-.09-.23-.24-.1-.16-.1-.33 0-.15.16-.35.16-.2.35-.5.2-.28.36-.68.16-.4.16-.95 0-1.06-.4-1.96-.4-.91-1.06-1.64-.66-.74-1.52-1.28-.86-.55-1.79-.89-.84-.3-1.72-.44-.87-.14-1.76-.14-1.55 0-3.06.45T.94 7.55q.71-1.74 1.81-3.13 1.1-1.38 2.52-2.35Q6.68 1.1 8.37.58q1.7-.52 3.58-.52Z');
  fill: #0078D7;
}

/*「新しいタブで開く」アイコン*/
#tabs-container .newtab svg path {
  d: path('M8.824 7.287c.008 0 .004 0 0 0zm-2.8-1.4c.006 0 .003 0 0 0zm16.754 2.161c-.505-1.215-1.53-2.528-2.333-2.943.654 1.283 1.033 2.57 1.177 3.53l.002.02c-1.314-3.278-3.544-4.6-5.366-7.477-.091-.147-.184-.292-.273-.446a3.545 3.545 0 01-.13-.24 2.118 2.118 0 01-.172-.46.03.03 0 00-.027-.03.038.038 0 00-.021 0l-.006.001a.037.037 0 00-.01.005L15.624 0c-2.585 1.515-3.657 4.168-3.932 5.856a6.197 6.197 0 00-2.305.587.297.297 0 00-.147.37c.057.162.24.24.396.17a5.622 5.622 0 012.008-.523l.067-.005a5.847 5.847 0 011.957.222l.095.03a5.816 5.816 0 01.616.228c.08.036.16.073.238.112l.107.055a5.835 5.835 0 01.368.211 5.953 5.953 0 012.034 2.104c-.62-.437-1.733-.868-2.803-.681 4.183 2.09 3.06 9.292-2.737 9.02a5.164 5.164 0 01-1.513-.292 4.42 4.42 0 01-.538-.232c-1.42-.735-2.593-2.121-2.74-3.806 0 0 .537-2 3.845-2 .357 0 1.38-.998 1.398-1.287-.005-.095-2.029-.9-2.817-1.677-.422-.416-.622-.616-.8-.767a3.47 3.47 0 00-.301-.227 5.388 5.388 0 01-.032-2.842c-1.195.544-2.124 1.403-2.8 2.163h-.006c-.46-.584-.428-2.51-.402-2.913-.006-.025-.343.176-.389.206-.406.29-.787.616-1.136.974-.397.403-.76.839-1.085 1.303a9.816 9.816 0 00-1.562 3.52c-.003.013-.11.487-.19 1.073-.013.09-.026.181-.037.272a7.8 7.8 0 00-.069.667l-.002.034-.023.387-.001.06C.386 18.795 5.593 24 12.016 24c5.752 0 10.527-4.176 11.463-9.661.02-.149.035-.298.052-.448.232-1.994-.025-4.09-.753-5.844z');
  fill: #FF7139;
}

色が付きます。

FirefoxとMicrosoft EdgeのSVGアイコンに色をつける

デフォルトでは、ボタンの透明度が0.6に設定されています。ほぼ半透明状態です。このせいで、色をつけても薄いと感じるかもしれません。

「色が薄いの、嫌だなぁ」という方は、以下のCSSを追加してみてください。

/*ツールバーボタンの透明度*/
.toolbar-tabbar>.button-toolbar>button, .toolbar-tabbar>.toolbar-group>.button-toolbar>button {
  opacity: 1 !important;
}

不透明になり、指定したカラーコード通りの色になります。少し薄めたい場合は、「0.9」といったようにしてみてください。

【おまけ】Mac風のボタンにする

Windows版Vivaldiのウィンドウグループ(最小化、最大化、閉じるボタン)を、Macの信号っぽいアイコンにすることもできます。

アイコン素材含めた完成状態のCSSを貼っておくので、コピペするだけでOKです。

/*--------------------------------------------------
ウィンドウグループ(最大化、最小化、閉じるボタン)のMac化
----------------------------------------------------*/
/*最小化ボタン*/
.window-buttongroup .window-minimize svg path {
  d: path('M 0, 4.5 C 0, 1.8 1.8, 0 4.5, 0 S 9, 1.8 9, 4.5 7.2, 9 4.5, 9 0, 7.2 0, 4.5');
  fill: #ffbb3f;
}

/*最大化ボタン*/
.window-buttongroup .window-maximize svg path {
  d: path('M 0, 4.5 C 0, 1.8 1.8, 0 4.5, 0 S 9, 1.8 9, 4.5 7.2, 9 4.5, 9 0, 7.2 0, 4.5');
  fill: #31c747;
}

/*閉じるボタン*/
.window-buttongroup .window-close svg path {
  d: path('M 0, 4.5 C 0, 1.8 1.8, 0 4.5, 0 S 9, 1.8 9, 4.5 7.2, 9 4.5, 9 0, 7.2 0, 4.5');
  fill: #fe5d55;
}

/*ちょっと大きくする*/
/*最小化ボタン*/
.window-minimize svg,
/*最大化ボタン*/
.window-maximize svg,
/*閉じるボタン*/
.window-close svg {
  transform: scale(1.5); /*好きな拡大率を指定する*/
}
/*--------------------------------------------------
ウィンドウグループ(最大化、最小化、閉じるボタン)のMac化終了
----------------------------------------------------*/

CSSを適用すると、3つのウィンドウ操作ボタンが、Macっぽい信号ボタンになります。

Windows版Vivaldiの最大化、最小化、閉じるボタンをMac風の信号ボタンに変更

本当は、SVG側でサイズ指定したかったんですが、SVGの方で大きい画像を使用すると、見切れてしまいました。

SVG画像が大きすぎると、見切れてしまう

そこで、あえて小さい画像サイズにして、「ちょっと大きくする」の部分で、強制的にズーム(拡大)しています。

拡大率を変更したい場合は、「transform: scale(1.5);」の1.5(倍)の部分を調整します。1.8倍、2倍といったように自由に調整できます。

配置はそのままです。

ボタンの配置
黄色の丸最小化
緑色の丸最大化
赤色の丸閉じる

各ボタンの配置変更

僕、Mac持ってないので分からないんですが、調べるとWindowsと配置が違うようですね。

配置もMac風にしたい場合は、以下のCSSを追加で書き込みます。

/*最小化ボタン*/
.window-buttongroup .window-minimize {
  order: 2;
}

/*最大化ボタン*/
.window-buttongroup .window-maximize {
  order: 3;
}

/*閉じるボタン*/
.window-buttongroup .window-close {
  order: 1;
}

1番左に「閉じる」、2番目に「最小化」、3番目に「最大化」になります。これでパッと見はMacです!

ウィンドウボタンをCSSで並び替えて、よりMacっぽくする

もし、配置が間違っている場合は、各自で「order: 〇;」の数字を変更してみてください。数字が小さい順に、左から並ぶようになっています。

一番左に移動、Vivaldiメニューをずらす

Macのスクリーンショットを見ると、そもそもウィンドウ操作ボタンがWindowsと違って、左側にあるんですね。だから、赤色の丸閉じるボタンが左なのですね。納得です。

ということで、よりMac風にしたい方は、以下のCSSを追加で利用してみてください。

/*ウィンドウ操作ボタンを左側に移動*/
#browser.win.win10 .window-buttongroup {
  position: relative !important;
  top: 0;
}

/*Vivaldiメニューとウィンドウ操作ボタンが重ならないようにする*/
div#titlebar {
  display: flex;
}

.vivaldi {
  position: relative;
  order: 2;
}

WindowsのVivaldiで、ウィンドウ操作ボタン(最大化、最小化、閉じる)が左側に移動します。Vivaldiメニューは、緑色の丸最大化ボタンの右側に配置されます。

Windowsのウィンドウ操作ボタンをMacと同じように左側に配置する

Vivaldiメニューをクリックすると、その場でポップアップが表示されて、問題なくメニューにアクセスできます。

Vivaldiメニューの配置変更、ポップアップの表示

急に「こんなの需要あるのかよ!」と、気分が萎えてきたので、ここらへんにしておきます。そもそもWindowsの癖に、Vivaldi上だけ操作ボタンをMac風に変更するの違和感だと思います。

するとしても、デザインの変更のみで配置は変えない方がいいのかなぁという印象です。友達に見せびらかす目的で使うなら全然ありだと思います。

【余談】Windows全体をMac風にする方法

Windows11の外観をMac風にしてみたスクリーンショット

Vivaldiとは全然関係ないんですが、全てのウィンドウに対してMacの信号アイコンにすることもできます。WindowsのテーマにMacテーマを適用するという方法です。

少し操作は複雑ですが、初心者の僕でもできました。

気になった方は、以下の記事を参考にしてみてください。

感想

以上、Vivaldiのツールバーのアイコンを変更するCSSについてでした。

後半から、アイコン変更することよりも、いかにWindows版VivaldiをMac風にするかに躍起になってました(笑)

Posted by ナポリタン寿司