【Vivaldi】テーマをCSSでカスタマイズ。ツールバー周りを桜色に染めてみる

2021年12月5日カスタムCSS

Vivaldi -桜- のアイコン

この記事では、Vivaldi のオリジナルカスタムUI機能を使って、テーマをカスタマイズするCSSについて書きます。

僕が作った桜のテーマをよりVivaldi に馴染ませてみます。

桜のテーマにしたVivaldi

ブラウザの外観を変更して、より使っているテーマの背景画像を際立てさせるCSS です。

アドレスバーの背景をテーマの背景色と一緒にすることで、より馴染みます。テーマの背景色ではなく、好きな色に変更することもできます。

パネルやブックマークバー、ツールバーを透明にすることでより大画面で背景画像を楽しめます。

Vivaldi5.0 からテーマストアの登場、テーマのエクスポートとインポート機能が実装されました。しかし、アドレスバーの背景を変更したり、ブックマークバーの背景を透明にするといった高度なことはできません。CSS を使うことで自由にカスタマイズできます。

ご自身の使っているテーマに合わせて、カスタマイズしてみてください。この記事では、ナポリタン寿司本人が作成したテーマ「Pastel Colors – Cherry blossom(パステルカラー – 桜)」をカスタマイズしてみます。より一層桜色が溢れて最高です。

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

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

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

CSS

今回紹介するCSS はすべて使う、というよりは自分が好きなものだけ選んでいくという形です。適用したスクリーンショットを貼っておくので参考にしてみてください。

アドレスバーの境界線を非表示

アドレスバーの境界線を非表示にするCSS

まずはアドレスバーを周りのツールバーと馴染ませるためにボーダー(境界線)を削除するCSS です。このCSS はツールバー周りをカスタマイズする上では必須かなと思っています。

/*アドレスバーの境界線を非表示&背景色をテーマに合わせる*/
.UrlBar-AddressField,
.UrlBar-SearchField,
.UrlBar-AddressField:focus,
.UrlBar-SearchField:focus {
    border: none !important;
    outline: none !important;
    /*background-color: var(--colorAccentBg);*/
}

/*アドレスバーの境界線を非表示&背景色をテーマに合わせる:フォーカス時*/
:focus {
    border: none !important;
    outline: none !important;
}

このCSS は以下のVivaldi フォーラムを参考にさせていただきました。感謝です。

参考:[SOLVED] How to turn off this border? | Vivaldi Forum

上記画像だと分かりにくいと思ったので分かりやすい画像も用意しました。アドレスバーの背景色を白から別の色にすると一目瞭然です。アドレスバーの周りは白い枠線で囲まれていることが分かります。

桜テーマ - アドレスバーを囲んでいる白い枠線
白い枠線で囲まれている

デフォルトテーマだともっと分かりやすいです。青い枠線で囲まれています。この境界線を削除するのが上記CSS になります。

ライトテーマ - アドレスバーを囲んでいる青い枠線

アドレスバーの背景色変更

上記CSS の一部である以下のコードに手を加えることで、アドレスバーの背景色を変更できます。

/*-----↓↓このコードを------*/
/*アドレスバーの境界線を非表示&背景色をテーマに合わせる*/
.UrlBar-AddressField,
.UrlBar-SearchField,
.UrlBar-AddressField:focus,
.UrlBar-SearchField:focus {
  border: none !important;
  outline: none !important;
  /*background-color: var(--colorAccentBg);*/
}


/*-----↓↓こうする-----*/
/*アドレスバーの境界線を非表示&背景色をテーマに合わせる*/
.UrlBar-AddressField,
.UrlBar-SearchField,
.UrlBar-AddressField:focus,
.UrlBar-SearchField:focus {
  border: none !important;
  outline: none !important;
  background-color: var(--colorAccentBg);
}

最初と最後にある「/*」と「*/」を削除する感じです。コメントアウトが解除されて機能するようになります。

「var(–colorAccentBg);」というのは、自動で背景色に合わせるという意味です。

ここでの背景とは、タイトルバーやブックマークバーの色を指します。つまり「アドレスバーをブックマークバーとかと一緒の色にするよ?」という意味です。これにより一気に馴染んだ感がでます。

アドレスバーの背景色をアクセントカラーと一緒にするCSS

アクセントの背景色ではなく、設定画面などの背景にしたい場合は、以下のCSS になります。

/*アクセントの背景色ではなく、設定画面の背景色にする場合の要素*/
background-color: var(--colorBg);

Vivaldi の設定 → テーマ → エディター画面の「背景」と「アクセント」という項目のことです。

アクティブなタブの色が「アクセント」で、選択していないタブの色が「背景」になります。

テーマ - 色

つまり、「var(–colorAccentBg)」と指定した場合は、自動的に色がアクセントの「#feb4b6」になります。

「var(–colorBg)」にした場合は、背景の「#feeeed」になります。

手動で別の色にしたい場合は以下のようにします。

/*「#87ceeb」の部分を好きなHTMLカラーコードにする*/
background-color: #87ceeb;

上記コードだと、アドレスバーは薄い青色になります。色はHTMLカラーコードで書き込むようにしましょう。

アドレスバーの背景色を青に変更

HTMLカラーコードは以下のサイトで調べれます。

参考:WEB色見本 原色大辞典 – HTMLカラーコード

パステルカラーが好きです。

パステルカラー - HTMLカラーコード
パステルカラー – Pastel Colors

色検索でおおざっぱな検索もできるので便利です。

ブックマークバーの境界線削除

ブックマークバーの境界線削除するCSS

ブックマークバーとアドレスバーの境界線を削除するCSS です。

/*アドレスバーとブックマークバーの境界線非表示*/
.address-top .toolbar-mainbar:after {
  height: unset;
}

.address-bottom .toolbar-mainbar {
  box-shadow: unset;
}

このCSS は以下のVivaldi フォーラムを参考にさせていただきました。感謝です。

参考:How to change Bookmarks Bar colour? Also, 1px border below Address Bar? | Vivaldi Forum

本当に些細な点なんですが、あるのとないのとじゃ結構見栄えが違います。僕はなしにしてアドレスバーとブックマークバーを馴染ませる方が好きです。

ブックマークバーの背景を透明

ブックマークバーの背景を透明にするCSS

ブックマークバーの背景を透明にするCSS です。背景の透過だけなのでアイコンやフォルダーは表示されます。

テーマの背景画像が見えるという状態です。

/*ブックマークバー透明化*/
.bookmark-bar
,.color-behind-tabs-off
.bookmark-bar button
,.color-behind-tabs-on
.bookmark-bar
,.color-behind-tabs-on
.bookmark-bar button {
  background: rgba(0,0,0,0);
  border: none;
}

垂直タブだと少し不細工かもしれません。うーん。ここは好みですね。

垂直タブだと少し不細工かも?
垂直タブ

以下の記事では、垂直タブに移行した名もなき青年(僕)について書いています。

参考:【Vivaldi】垂直タブの使い方。ブラウザヘビーユーザーにちょーおすすめ!

水平タブだと結構いい感じかなと思いました。タブとアドレスバーだけに色がついている状態でスッキリして見えるかもです。

水平タブだといい感じに馴染む
水平タブ

上記CSS だと完全に透過させるという意味です。

透過率を変更したい場合は、rgba値の数字を変更します。

最初の3番目は好きなカラーコードを指定します。4番目の数字を0~1の範囲で変更します。1が透明にしないという意味です。半分だけ透過したい場合は「0.5」にします。

/*ブックマークバー透明化*/
.bookmark-bar
,.color-behind-tabs-off
.bookmark-bar button
,.color-behind-tabs-on
.bookmark-bar
,.color-behind-tabs-on
.bookmark-bar button {
  background: rgba(254,180,182,0.1);
  border: none;
}

「0.1」にしたらこんな感じです。

ブックマークバーの背景の透明度を変更

上記CSS は、僕の桜色テーマを基準としています。自分のテーマに合わせた色にしたい場合は、rgba値の3つの数値を変更しましょう。

Vivaldi の設定を開きます。テーマ → ライブラリーで自分のテーマを選択 → エディタータブをクリック → 色 → アクセント の値(HTMLカラーコード)をコピーします。

テーマ - エディター - アクセント

以下のサイトにアクセスして、コピーしたカラーコードを貼り付けます。「変換する」をクリックします。

参考:カラーコード変換|各種設定用のカラーコードに変換 | すぐに使える便利なWEBツール | Tech-Unlimited

RGBA値が表示されます。これを上記CSS に置き換えましょう。こうすることで自分のテーマに合ったブックマークバーの色になります。

カラーコード変換

僕は完全透過させています。透過率を調整すると、どうしてもアドレスバーと色が異なってしまって不細工に感じました。

ブックマークバー自動開閉CSS と併用

上記のブックマークバーの背景透明化CSS だと、ブックマークバーをマウスオーバーで自動展開するCSS を使っている場合、見た目がかなり不細工になります。

参考:【Vivaldi】ブックマークバーをマウスオーバーで自動開閉するCSS | ナポリタン寿司のPC日記

自動展開のCSS は、普段はツールバーの方に隠しておいて、マウスを乗せるとひょっこり顔を出すという仕組みになっているからです。これにより、ツールバーを透明にしちゃっている場合は、隠れててもブックマークバーが透けて見えちゃう状態になります。

ブックマークバー自動展開との相性は悪い

本記事で紹介する透明化CSS と併用したい場合は、以下の改良版ブックマークバー自動展開CSS を使うようにしましょう。

/*ブックマークバー自動展開*/
.bookmark-bar-top .bookmark-bar {
  margin-bottom: -28px;
  z-index: 2147483647;
  transform: translateY(0);
  transition: transform .1s 0s !important;
  visibility: visible;
  backdrop-filter: blur(10px);
}
.bookmark-bar-top .bookmark-bar::before {
  content: '';
  position: absolute;
  height: 8px;
  width: 100%;
  top: 100%;
}

/*ブックマークバー:ホバーしていない時は非表示*/
.address-top.bookmark-bar-top #header:not(:hover)~#main .toolbar-mainbar:not(:focus-within):not(:hover)~.bookmark-bar:not(:focus-within):not(:hover) {
  transform: translateY(-100%);
  transition: transform .0.5s !important;
  visibility: hidden;
}

:not(.address-top).bookmark-bar-top #header:not(:hover)~#main>.bookmark-bar:not(:focus-within):not(:hover) {
  transform: translateY(-100%);
  transition: transform .0.5s !important;
}

上記CSS は、ブックマークバー自動展開のCSS にたった3行追加しただけです。これだけでしっかり隠れるようになるはずです。

すみません。上記のYouTube 動画は「backdrop-filter: blur(10px);」がオフになっていました。ミスです。実際は下記画像のように背景がすりガラス状になるので見やすいはずです。

backdrop-filter: blur(10px);でバーの背景をすりガラス状に変更

簡単に追加したCSS の意味を書いておきます。

改良版ブックマークバー自動展開に追加したCSS
visibility: visible;マウスを乗せると表示するようにする
visibility: hidden;マウスがない時は表示しないようにする
backdrop-filter: blur(10px);背景を10px分ぼかす(すりガラス)

ブックマークアイコン選択時のデザイン

ブックマークアイコン選択時のデザインを変更するCSS

ブックマークアイコン(またはフォルダ)にマウスを乗せた時のフォーカスデザインを変更するCSS です。具体的には色をテーマに合わせて角丸にしました。

/*ブックマークバーフォーカス時の角丸具合と色変更*/
.color-behind-tabs-off .bookmark-bar button:focus,
.color-behind-tabs-off .bookmark-bar button:hover {
  background-color: var(--colorBg); /*ここで好きな色に変更できる*/
  border-radius: 10px;  /*角丸具合*/
}

アドレスバーは角丸なのにここはカクカク四角なのが許せませんでした。角丸最高!

ツールバー、タブバー、パネルバーの透明化

ブックマークバーを透明にしてふと思いました。ツールバー、タブバー、パネルバー全てを透明にしたら結構面白いんじゃないかなと。早速やってみました。

/*ツールバー*/
.color-behind-tabs-off .toolbar-mainbar
/*タブバー*/
,div#tabs-tabbar-container
/*パネル*/
,div#panels-container
/*垂直タブにしている時のヘッダー*/
,#browser:not(.tabs-top) #header {
  background: transparent !important;
}

/*パネルの影*/
.panel-group {
  box-shadow: none !important;
}

/*タブバーの影*/
#tabs-tabbar-container {
  border:none !important;
}

/*ステータスバー*/
:not(.tabs-bottom)#browser > footer {
  background: transparent !important;
  box-shadow: none;
}

ブックマークバーの透明化と一緒に使うと効果的です。

ツールバー(ヘッダー、タブバー、アドレスバー、ブックマークバー)、パネル、ステータスバー全てを透明にするので、背景画像の桜がブラウザいっぱいに咲き誇ります。

タブバーやツールバー全てを透明化

水平タブだと以下のようになります。

タブバーやツールバー全てを透明化 - 水平タブ

アドレスバーを下配置にしている場合

アドレスバーを下配置にしている場合は、アドレスバー上、ヘッダー下に境界線(影)ができてしまいます。この影を削除するCSS は以下になっています。

/*アドレスバーを下配置にしている場合の境界線削除*/
/*アドレスバー上にある境界線*/
.color-behind-tabs-off.address-bottom .toolbar-mainbar {
    box-shadow: none;
}

/*ヘッダー下の境界線*/
#browser:not(.address-top)>#header {
    box-shadow: none;
}

上記CSS を適用すると、アドレスバー(ツールバー)上部にある1pxの背景色の境界線が消えます。

アドレスバー下配置にしている時の境界線削除

同じように、ヘッダー(タイトルバー)下にある境界線も消えます。

アドレスバー下配置にしている時のヘッダーの影削除

オーバーレイ表示時のステータスバー透明化

ステータス情報をオーバーレイで表示する設定にしている場合のステータスバーを透明にするCSS です。

/*オーバーレイ表示のステータスバー*/
#webview-container~.StatusInfo .StatusInfo-Content {
    border: none;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    background: transparent !important;
}

完全に背景を透明にしちゃうと、さすがにURLが見えにくかったので、すりガラス状にしています。

オーバーレイ表示のステータスバー透明化

「backdrop-filter: blur(5px);」の数字を調整することで、ぼかし具合を調整できます。いらない場合は、行を丸ごと削除しましょう。

アドレスバー内のテキスト非表示

アドレスバー内にある「検索またはアドレスを入力」のテキストを非表示にするCSS です。

/*アドレスバーの「検索またはアドレスを入力」を非表示*/
input::placeholder {
  color: transparent;
}
プレースホルダーの非表示

アドレスバー内にアドレスや単語を入力できるのは既に知っているので、わざわざテキストいらないなと思って非表示にしました。

余談ですが、ここの部分プレースホルダーっていうらしいです。

アドレスバーのドロップダウンリスト透明化

アドレスバーのドロップダウンリスト(検索候補)を透明にするCSS です。

/*アドレスバーのドロップダウンリスト*/
.OmniDropdown {
  background: transparent !important;
}

アドレスバーのドロップダウンリストは人によっては不便かもしれないので気を付けてください。背景が全部透明になって検索候補が見えにくいかもです。僕は透明感がびしびし伝わってきて好きです。

アドレスバーのドロップダウンリストを透明化

ぼかし(すりガラス状)を追加して見やすくしてもいいかもしれません。すりガラスって何でこんな透明感溢れるんですかね。いいですね。

/*アドレスバーのドロップダウンリスト*/
.OmniDropdown {
  background: transparent !important;
  backdrop-filter: blur(10px);  /*背景をすりガラス状にする*/
}

すりガラスにした場合は以下のようになります。背景がぼかされるので検索候補が見やすいです。

アドレスバーのドロップダウンリストを透明化 - すりガラス状

クイックコマンドの透明化

クイックコマンド(F2)の背景を透明 & すりガラスにするCSS です。

/*クリックコマンドの透明化*/
/*【上部】検索欄*/
#modal-bg>div {
    background: transparent;
    backdrop-filter: blur(5px);
}

/*【下部】コマンド欄*/
.quick-command-container .quick-commands {
    background-color: transparent;
    backdrop-filter: blur(5px);
}
クイックコマンドの透明化

スタートページ上での画面は、こんな感じです。透明感溢れていいですね。好きです。

スタートページ上のクイックコマンド

選択時の背景色を変更する場合は、以下のCSS を使ってください。「var(–colorHighlightBg);」の部分を好きなカラーコードに置き換えましょう。

/*選択時(ハイライト)の背景色*/
.hasfocus .quick-command-container .quick-commands .quick-command[data-selected] {
    background-color: var(--colorHighlightBg); /*ここに好きなカラーコードを指定する*/
}

あとで気づいたんですが、セッション管理のダイヤログも透明になりました。

セッションを開くダイヤログの透明化

スピードダイヤルの透明化

スタートページのスピードダイヤルを透明にするCSS です。

/*スピードダイヤル*/
.draggable.dial
,.speeddial .dial:last-of-type {
  box-shadow: 13px 20px 3px #c8c8c8 !important;
  background: transparent !important;
  transition: 0.4s;
}
/*スピードダイヤル:追加しているサイトのホバー時*/
.draggable.dial:hover
,.speeddial .dial:last-of-type:hover {
  box-shadow: -3px 10px 8px #c8c8c8 !important;
}

ついでに影を大きくしてホバー時にへこむようにしました。「transform: translateY()」でアニメーションをつけていたんですが、色々不具合があったのでやめました。影だけでもまぁ悪くないかなと思います。

スピードダイヤル透明化のCSS

好みによって枠線(border)つけてもいいかもです。

翻訳パネル透明化

翻訳パネル(Vivaldi5.0 から実装)のテキスト入力欄と翻訳結果欄の背景を透明にするCSS です。

/*翻訳パネル透明化*/
/*入力欄*/
.panel .TranslatePanel-SrcText
/*翻訳結果欄*/
,.panel .TranslatePanel-TranslatedText {
  background: transparent !important;
  border: none;
  box-shadow: none;
}
翻訳パネルの背景を透明にするCSS

Vivaldiボタンの色変更

ブラウザ左上のVivaldi ボタンの色を変更するCSS です。些細な部分ですが、よりテーマを馴染ませるためには必要です。(きっと)

Vivaldi メニューの色を変更するCSS

桜のテーマをお使いの場合は、目立つ赤にしてワンポイントにすると綺麗かもしれません。

/*Vivaldiボタンの色変更*/
.vivaldi span {
  fill: red;  /*好きなHTMLカラーコードを指定*/
}

fill の「red」の部分を変更することで、好きな色にできます。

例えば「濃い桜色(#feb4b6)」にした場合と「抹茶色(#628045)」にした場合の画像を貼っておきます。

濃い桜色(#feb4b6)にした場合と抹茶色(#628045)にしたVivaldiアイコン

よりこだわりたい方向けに、通常時、ホバー時(マウスを乗せた時)、クリックした時の3つの状態によって色を切り替えれるCSS も用意しました。

/*Vivaldiボタンの色変更*/
.vivaldi span {
  fill: #E41E1E;
}

/*Vivaldiボタンの色変更:ホバー時*/
.vivaldi span:hover {
  fill: #1C77E7;
}

/*Vivaldiボタンの色変更:クリック時*/
.vivaldi span:active {
  fill: #258E53;
}

GIF 動画貼っておきます。通常時は赤色、ホバー時は青色、クリック時は緑色に変化しています。

Vivaldiアイコンの色変化

アクティブ(:active)は、ホバー(:hover)と若干相性が悪いのか、ちょっと動作が不安定です。何回かクリックして色が変わるといった感じです。通常時とホバーの種類で楽しむ方がいいかもしれません。

サイトの四隅を角丸化

サイトの表示領域の四隅を角丸にするCSS です。これ、個人的にかなり好きです。

Windows11 にして晴れて角丸フローティングの虜になったナポリタン寿司なわけですが、ブラウザのサイトとその周りの境界線があまりにカクカクで少し気にくわなかったんですよね。ようやく「これだー!」ってのを見つけた気がします。これにより一気にWindows11 に馴染みます。

サイトとブラウザの外観の境界線を角丸化

CSS は、以下になっています。「20px」の部分を好きなように変更することで角丸具合を調整できます。数字が大きくなればより丸みを帯びます。

/*サイトの四隅を角丸化*/
#webpage-stack {
  border-radius: 20px;  /*数字を大きくするとより角丸になる*/
}

拡大写真も貼っておきます。ブラウザの目立つ場所にあるカクカクが排除されていい感じです。

サイトの角丸化CSSの拡大写真

右クリックメニューを角丸フローティングにする方法と併用することで、よりモダンなデザインにできます。

スピードパネルの右クリックメニュー

記事:【Vivaldi】右クリックメニューをWindows11の角丸フローティングデザインにする方法 | ナポリタン寿司のPC日記

まとめ

以上、ナポリタン寿司の桜色テーマをより桜色に染め上げるCSS についてでした。

ほんとありがたい話なんですが、12月9日現在で1,390もダウンロードされていました。評価も4.6といい感じです。海外の方からコメントがちらほら来ていてめちゃくちゃ嬉しいです。感謝です。

Pastel Colors - Cherry blossom theme by ナポリタン寿司
Pastel Colors – Cherry blossom theme by ナポリタン寿司

Posted by ナポリタン寿司