【Vivaldi】テーマをCSSでカスタマイズ。もっともっと桜色に!

2021年12月5日カスタムCSS

Vivaldiのアイコン

この記事では、ウェブブラウザ「Vivaldi」のオリジナルカスタムUI機能を使って、テーマをカスタマイズする方法について書きます。

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

桜のテーマにしたVivaldi

皆さん、僕が自作した桜のテーマ使っていますか!??僕は、めちゃめちゃ使っています。しかし、使っていくうちに徐々にそれだけでは満足いかなくなりました。というのも、アドレスバーとかタブバーの色が少し強すぎる感じがしました。

色を変更してもいいのですが、根本的に「もっと背景画像を際立たせたい」という欲がわいてきました。

そこで、Vivaldiに用意されているオリジナルカスタムUI(カスタムCSS)という機能を使って、もっと桜が目立つようにしてみました。自分の好きなようにカスタマイズすることで、ハッピーな気持ちでブラウジングできます。

具体的には、以下のようなCSSを考えました。

  • アドレスバーの背景色変更
  • ブックマークバーの背景透明化
  • ツールバーの背景透明化
  • タブバー、パネルの背景透明化
  • アドレスバー内のテキスト非表示
  • クイックコマンドの透明化
  • スピードダイヤルの透明化
  • ウェブサイト表示領域の四隅を角丸化

基本的には、いたるところを透明化するコードです。

アドレスバーの背景を、テーマの背景色と一緒にすることで、より馴染みます。テーマの背景色ではなく、好きな色に変更することもできます。パネルやブックマークバー、ツールバーを透明にすることで、より大画面で背景画像を楽しめます。

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

本記事では、ナポリタン寿司本人が作成したテーマ「Pastel Colors Cherry blossom(パステルカラー 桜)」を使っている前提ですが、それ以外のテーマにも使えます。

2022年6月17日追記

Vivaldiは結構な頻度でアップデートが行われています。その際に、CSSの内容もちょくちょく変わっています。

内容が変わると、従来のCSSのコードが使えなくなり、書き込んでも何も変化しない、あるいは想定していない表示になる場合があります。

僕自身、ちょくちょくチェックして、動作しなくなっていたら、修正するようにしています。しかし、確認不足で、以前のCSSが記事内に紹介されている可能性があります。

「CSS書き込んだのに、適用されない~!」といった場合は、問い合わせより教えていただければ幸いです。よっぽど乱暴な口調でない限りは、修正されたコードを送らせていただきます。

目次

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

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

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

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

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

基本の流れ

本記事で紹介するCSSは、「全部使う」ではなく、「自分が好きなものだけ選んでいく」という形です。バイキング形式みたいな感じで、好きなコードを組み合わせて作成していくという流れです。

コードは、1つのCSSファイルに複数書き込めます。逆に、複数のCSSファイルに個別に書いていっても、適用されないので注意してください。

VivaldiカスタムCSSは、複数に分けて書いてはダメ!

下記画像のように、1つのCSSファイルに、ずらずらとコピペしていきます。間の改行は好みです。

1つのファイルにまとめて、CSSを書いていく

書き込めたら、ファイルを上書き保存してVivaldiを再起動します。再起動するまでがセットです。

CSS

それでは、ずらずらと紹介していきます。

【アドレスバー】境界線を削除

アドレスバーを、周りのツールバーと馴染ませるためにボーダー(境界線)を削除するCSSです。このCSSは、ツールバー周りをカスタマイズする上では必須かなと思っています。特に「【アドレスバー】背景を透明化」と相性がいいです。

/*【アドレスバー】境界線を削除*/
.UrlBar-AddressField,
.UrlBar-SearchField,
.UrlBar-AddressField:focus,
.UrlBar-SearchField:focus {
  border: none !important;
  outline: none !important;
}
Vivaldiブラウザのアドレスバーを囲んでいる白い境界線

【アドレスバー】背景色をツールバーの背景に合わせる

アドレスバーの背景色をツールバーの背景色と合わせます。デフォルトでは、アドレスバーは白になっていて、ツールバー(アドレスバー以外のブックマークバー、拡張機能などの部分のこと)と色が区別されています。その区別を撤廃して、同じ色にします。

/*【アドレスバー】背景色をツールバーの背景に合わせる*/
.UrlBar-AddressField,
.UrlBar-SearchField,
.UrlBar-AddressField:focus,
.UrlBar-SearchField:focus {
  background-color: var(--colorAccentBg);
}
アドレスバーの背景色をツールバーの背景に合わせる前と後の比較画像

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

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

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

/*【アドレスバー】背景色を設定画面などの背景に合わせる*/
.UrlBar-AddressField,
.UrlBar-SearchField,
.UrlBar-AddressField:focus,
.UrlBar-SearchField:focus {
  background-color: var(--colorBg);
}

【アドレスバー】背景色を好きな色に変更する

「ツールバーの色と同化したくない!自分で好きな色を指定したい!」という方向けのコードです。

/*【アドレスバー】背景色を手動で好きな色に変更する*/
.UrlBar-AddressField,
.UrlBar-SearchField,
.UrlBar-AddressField:focus,
.UrlBar-SearchField:focus {
  background-color: #87ceeb; /*ここを好きなHTMLカラーコードにする*/
}
アドレスバーの背景色を青に変更

上記コードだと、アドレスバーは薄い青色になります。「#87ceeb」の部分を指定したいHTMLカラーコードに置き換えてみましょう。HTMLカラーコードはこちらのサイトで調べられます。

【アドレスバー】背景を透明化

アドレスバー(デフォルトでは、白い部分)の背景を透明化するコードです。後で紹介するツールバー周りの背景透明化と併用するといい感じになります。

/*【アドレスバー】背景色を手動で好きな色に変更する*/
.UrlBar-AddressField,
.UrlBar-SearchField,
.UrlBar-AddressField:focus,
.UrlBar-SearchField:focus {
  background: transparent;
}
アドレスバーの背景を透明化した画像

【ブックマークバー】背景を透明化

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

/*【ブックマークバー】背景を透明化*/
.bookmark-bar,
.color-behind-tabs-off .bookmark-bar button,
.color-behind-tabs-on .bookmark-bar,
.color-behind-tabs-on .bookmark-bar button,
.bookmark-bar .observer {
  background: transparent;
  border: none;
}
ブックマークバーの背景を透明にしてみた画像

テーマの背景画像の上に、ブックマークバーが重なる状態で表示されるということです。

【ブックマークバー】背景透明化&すりガラス化

一つ前に紹介したコード「【ブックマークバー】背景を透明化」だと、完全にブックマークバーを透過させるという意味です。完全透過だと少し見にくいという場合は、すりガラス状にしてみましょう。

/*【ブックマークバー】背景透明化&すりガラス化*/
.bookmark-bar,
.color-behind-tabs-off .bookmark-bar button,
.color-behind-tabs-on .bookmark-bar,
.color-behind-tabs-on .bookmark-bar button,
.bookmark-bar .observer {
  background: transparent;
  backdrop-filter: var(--backgroundBlur) !important;
  border: none;
}

個人的には、Windows11のようなフローティングデザインっぽくなって美しいかなと思います。背景をぼかすことで、見やすくなります。

「backdrop-filter: var(–backgroundBlur);」にすることで、Vivaldiのぼかし設定と連動するようになります。ぼかしの設定は、テーマエディターの「設定」タブ→ぼかしから調整できます。タブバーの背景と一緒にブックマークバーもぼかせれるということです。

Vivaldi設定:テーマ エディター設定

【ブックマークバー】半透明にする

「完全透過、すりガラス、どれも気に食わない!若干色をつけた状態で半透明にしたい!」という場合は、以下のコードになります。

/*【ブックマークバー】半透明にする*/
.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;
}

「background: rgba(〇, 〇, 〇, 〇);」の最初の3つの数字が色を表しています。「rgba 変換」といった感じでググると、HTMLカラーコードをrgbaに変換してくれるツールなどがヒットするかと思います。上記CSSの「254, 180, 182」は、僕の桜色テーマを基準にしたピンクっぽい色になっています。

4つ目の数字を、0~1の範囲で指定します。1が透明にしないという意味です。半分だけ透過したい場合は「0.5」にします。「0.1」にしたら下記画像のようになります。

ブックマークバーの背景を半透明(0.1)にしてみた画像

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

Vivaldi設定:テーマ エディター 色

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

rgba値が表示されます。

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

【ブックマークバー】アイコンフォーカス時のデザイン変更

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

/*【ブックマークバー】アイコンフォーカス時のデザイン変更*/
.color-behind-tabs-off .bookmark-bar button:focus,
.color-behind-tabs-off .bookmark-bar button:hover {
  background-color: var(--colorBg); /*好きな色に変更可能*/
  border-radius: var(--radius); /*角丸具合*/
}
ブックマークアイコンフォーカス時のデザイン変更前と変更後の比較画像

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

「border-radius: var(–radius);」は、Vivaldi設定のテーマ→エディター→設定の「角を丸くする」と連動しています。こちらの数値を変更することで、フォーカス時の角丸具合も変化します。

【ブックマークバー】アイコンの中央揃え

ブックマークバーアイコンを中央揃えにするCSSです。

/*【ブックマークバー】アイコンの中央揃え*/
.bookmark-bar .observer {
  justify-content: center;
}
ブックマークアイコンを中央揃えにした画像

【ツールバー】境界線を削除

ブックマークバー、ツールバー、拡張機能にある境界線を削除するコードです。

/*【ツールバー】境界線を削除*/
/*ブックマークバー*/
.address-top .toolbar-mainbar:after,
/*拡張機能*/
.color-behind-tabs-off.address-top .mainbar > .toolbar-mainbar .toolbar-extensions:after,
.color-behind-tabs-off.address-top .mainbar > .toolbar-mainbar:after {
  background-color: transparent !important;
  height: unset;
}
ブックマークバーとツールバーの境界線を、削除する前と後の比較画像

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

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

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

【ツールバー】背景の透明化

アドレスバー以外のツールバーの背景を透明化するコードです。アドレスバーの左右にある余白、ブラウザの戻る、進む、再読み込み、ホームボタン、拡張機能などのことです。

/*【ツールバー】背景の透明化*/
.toolbar-mainbar, /*アドレスバー以外のツールバー*/
.toolbar-mainbar .toolbar-extensions, /*表示している拡張機能*/
.toolbar-extensions>div /*「ボタンを隠す」で非表示にしている拡張機能*/ {
  background: transparent !important;
}
ツールバーの背景を透明にしてみた画像

【ツールバー】背景の透明化(アドレスバーのボトム表示時)

【ツールバー】背景の透明化」は、アドレスバーを上配置にしている前提で作っています。アドレスバーを下配置にしている場合、アドレスバー上、ヘッダー下に境界線(影)ができてしまいます。この影を削除するCSSです。

ツールバーの背景の透明化CSSを併用して使うことが可能です。

/*【アドレスバー】ボトム表示にしている時に表示される境界線削除*/
.color-behind-tabs-off.address-bottom .toolbar-mainbar, /*アドレスバー上にある境界線*/
#browser:not(.address-top)>#header /*ヘッダー下の境界線*/ {
  box-shadow: none;
}
アドレスバーを下配置にしている時に、表示される境界線を削除する前と後の比較画像

アドレスバー(ツールバー)上部にある1pxの背景色の境界線が消えます。同じように、ヘッダー(タイトルバー)下にある境界線も消えます。

アドレスバーを下配置にしている時に、表示されるヘッダーの境界線を削除する前と後の比較画像

【ヘッダー】背景の透明化

このCSSは、垂直タブ(右、または左)を利用している方向けです。水平タブだと意味がありません。

/*【ヘッダー】背景の透明化*/
#browser:not(.tabs-top) #header {
  background: transparent !important;
}
ヘッダーの背景を透明化した画像

【ヘッダー】ページタイトルの中央揃え

2022年4月6日(水)に公開されたVivaldi5.2から、何故かヘッダーのページタイトルが左揃えになってしまいました。この仕様変更は、垂直タブを利用している方のみに影響します。水平タブだとそもそもタイトルは表示されないので関係ありません。

以前のようにページタイトルを中央揃えにしたい方は、以下のコードを使うことで中央揃えにできます。

/*【ヘッダー】ページタイトルの中央揃え*/
#pagetitle span {
  text-align: center !important;
}
Vivaldi5.2から左揃えになった(垂直タブにしている時のみ表示される)ページタイトルを中央揃えにした比較画像

【ページタイトル】フォント変更

/*ページタイトル*/
#pagetitle span {
  font-family: "ふい字"; /*フォントの種類*/
  font-weight: 600; /*文字の太さ*/
}

垂直タブにしている時に表示されるヘッダーのページタイトルのフォントを変更するCSSです。上記CSSだと、フォントが手書きっぽく可愛らしいフォント「ふい字」になります。(※ご自身のPCにふい字をインストールしている必要があります。)

フッターのページタイトルのフォントを「ふい字」にした画像

「font-weight: 600;」は、文字の太さです。不要な場合は、行ごと削除してください。100単位で指定でき、700、800…と大きくなればなるほど太くなります。

【パネル】背景の透明化

パネルを透明化するコードです。パネルのバー、各パネルのメイン部分を透明化します。合わせて、影や境界線も削除しています。

/*【パネル】背景の透明化*/
#panels-container {
  background: transparent;
}

/*【パネル】オーバーレイにしている時のパネルの背景透明化*/
.panel-group {
  background: transparent !important;
  backdrop-filter: var(--backgroundBlur) !important;
}

/*【パネル】影の削除*/
#panels-container.right:not(.overlay) .panel-group, #panels-container.right.icons .panel-group, #panels-container.right.icons.overlay {
  box-shadow: none;
}

適用前と適用後の画像を貼っておきます。

パネルの背景を透明化した前と後の比較画像

パネルをオーバーレイ表示にしている場合でも、透明化されます。オーバーレイにしている時は、完全透過すると少し見えにくくなると思ったので、「backdrop-filter: var(–backgroundBlur) !important;」で、すりガラス状にしています。

パネルをオーバーレイ表示にしている場合でも、透明化コードは適用される

【パネル】翻訳パネルの入力、出力部分の背景透明化

翻訳パネルの入力欄、出力欄の背景を透明化するコードです。

/*【パネル】翻訳パネルの入力、出力部分の背景透明化*/
/*入力欄*/
.panel .TranslatePanel-SrcText,
/*翻訳結果欄*/
.panel .TranslatePanel-TranslatedText {
  background: transparent;
  border: none;
  box-shadow: none;
}
翻訳パネルの入力欄、出力欄を透明化する前と後の比較画像

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

これまで紹介してきたツールバーやブックマークバーの背景透明化関連のCSSは、ブックマークバーの自動展開CSSを使っている場合、見た目が、かなり不細工になります。

「ブックマークバーの自動展開?何それ?」という方は、以下の記事を参考にしてみてください。マウスをブックマークバーに近づけると、ひょいっと表示されるという機能です。

見た目はスッキリ、作業効率性は重視する便利な機能です。2022年4月時点でVivaldiには標準搭載されていないのでCSSで実装する必要があります。

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

ブックマークバー自動開閉と、ツールバーの背景透明化のCSSを併用すると、ブックマークバーが被ってしまうので相性が悪い

本記事で紹介する透明化CSSと併用したい場合は、以下の「改良版ブックマークバー自動展開CSS」を使ってみてください。

/*ブックマークバー自動展開*/
.bookmark-bar-top .bookmark-bar {
  margin-bottom: -28px;
  z-index: 2147483647;
  transform: translateY(0);
  transition: transform .1s 0s !important;
  visibility: visible;
}

.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に数行追加しただけです。

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

改良版ブックマークバー自動展開に追加したCSS
visibility: visible;マウスを乗せると表示するようにする
visibility: hidden;マウスがない時は表示しないようにする

【ステータスバー】背景の透明化

ステータスバーを「表示する」にしている方向けです。下に表示されるステータスバーの背景を透明化するコードです。

/*【ステータスバー】背景の透明化*/
footer {
  background: transparent !important;
  box-shadow: none !important;
}

【ステータスバー】背景の透明化&角丸化(オーバーレイ表示)

ステータスバーを「ステータス情報をオーバーレイで表示する」にしている方向けです。オーバーレイで表示されるステータスバーを透明にするコードです。

/*【ステータスバー】背景の透明化&角丸化*/
#webview-container~.StatusInfo .StatusInfo-Content {
  background: transparent;
  border: none;
  border-radius: var(--radius);
  backdrop-filter: var(--backgroundBlur);
}
オーバーレイ表示にしているステータスバーの背景を透明にした前と後の比較画像

完全に背景を透過すると、URLが見えにくかったので、すりガラス状にしています。ぼかし具合は、Vivaldiの設定に連動しています。

ぼかしてもちょっと見えにくいという場合は、若干背景色を付けてみましょう。

/*【ステータスバー】背景の透明化&角丸化*/
#webview-container ~ .StatusInfo .StatusInfo-Content {
  background-color: var(--colorBgAlphaHeavy); /*背景で指定した色の65%の不透明度*/
  border: none; /*枠線の削除*/
  backdrop-filter: var(--backgroundBlur); /*ぼかし*/
}

「background-color: var(–colorBgAlphaHeavy);」が、Vivaldiのテーマで指定した「背景」の65%の不透明度の色にするという意味です。これにより、ちょっとだけ色がつくので、完全に透明にするよりかは見えやすいと思います。

オーバーレイ表示のステータスバーの背景に若干色をつけた画像

【アドレスバー】プレースホルダー(テキスト)非表示

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

/*【アドレスバー】「検索またはアドレスを入力」を非表示*/
input::placeholder {
  color: transparent;
}
検索ボックス内に書かれているプレースホルダーのテキスト非表示前と後の比較画像

僕は、アドレスバーに文字を入力できることを既に知っています。わざわざテキストはいらないなと思って非表示にしました。

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

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

/*【アドレスバー】ドロップダウンリストの透明化*/
.OmniDropdown {
  background: transparent !important;
}
アドレスバーのドロップダウンリストを透明にしてみた画像

このCSSは、背景が全部透明になるので、検索候補が見えにくくなる場合があります。ぼかし(すりガラス状)を追加すると見やすくなるかもしれません。

/*【アドレスバー】ドロップダウンリストの透明化&すりガラス状*/
.OmniDropdown {
  background: transparent;
  backdrop-filter: var(--backgroundBlur);
}

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

アドレスバーのドロップダウンリストを透明、かつすりガラス状にしてみた画像

【クイックコマンド&セッションダイアログ】背景の透明化

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

/*【クイックコマンド】背景の透明化*/
/*上部の検索欄*/
#modal-bg>div {
  background: transparent;
  backdrop-filter: var(--backgroundBlur);
}

/*下部のコマンド欄*/
.quick-command-container .quick-commands {
  background-color: transparent;
  backdrop-filter: var(--backgroundBlur);
}
クイックコマンドの背景を透明化した前と後の比較画像

項目にフォーカスした時の背景色を変更する場合は、以下の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でカスタマイズした後のデザインを撮影したGIF画像

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

「影やアニメーション不要だ!」という方は、以下のコードになります。2022年4月現在、僕はこちらのコードを使っています。

/*スピードダイヤル*/
.startpage .dial {
  background-color: transparent; /*背景の透明化*/
  box-shadow: unset; /*影を無効化*/
}

スタートページのカスタマイズについては、以下の記事を参考にしてみてください。

【プライバシー統計バー】背景の透明化

Vivaldi5.2(2022年4月6日に公開)から実装されたスタートページのプライバシー統計バーの背景を透明化するコードです。

/*スピードダイヤルのプライバシー統計バー*/
.SpeedDial-Blocked-Counter {
  background-color: transparent; /*背景透明化*/
}
プライバシー統計バーを透明化する前と後の比較画像

【ダイアログ】角丸強化

セッション、プライバシー統計バーなどのダイアログの角丸を強化するコードです。

/*ダイアログ関連(セッション、プライバシー統計バー)*/
#modal-bg.slide > div {
  border-radius: var(--radius) !important; /*角丸化強化*/
}

正確には、テーマ→エディター→設定で指定した角丸に合わせるということです。テーマの方で角丸具合を弱めている場合は、意味がありません。

プライバシー統計バーの角丸を強化した前と後の比較画像

セッションダイアログも同様に角丸が強くなります。

セッションダイアログの角丸を強めた画像

【Vivaldiボタン】色変更

ブラウザ左上のVivaldiボタンの色を変更するCSSです。些細な部分ですが、よりテーマに馴染ませたい場合に利用してみましょう。

/*【Vivaldiボタン】色変更*/
.vivaldi span {
  fill: red;  /*好きなHTMLカラーコードを指定*/
}
Vivaldiメニューの色を変更するCSS

桜のテーマをお使いの場合は、目立つ赤にしてワンポイントにすると綺麗かもしれません。「fill: red;」の「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アイコンをマウスの挙動によって変化させた様子を撮影したGIF

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

【Vivaldiボタン】拡大化

Vivaldi5.2から、Vivaldiボタンが若干小さくなりました。以前の大きさに戻したい方は、以下のコードを使ってみましょう。

/*【Vivaldiボタン】拡大*/
.vivaldi span {
  transform: scale(1.3);
}

「1.3」という数値を変更することで、好きな大きさにできます。1.3=1.3倍にするという意味です。

通常、1.3倍、2倍にした時の比較画像を貼っておきます。

Vivaldiアイコンを通常、1.3倍、2倍に拡大した比較画像

一つ前に紹介した「【Vivaldiボタン】色変更」と併用する場合は、合体するとスッキリして管理しやすいかもしれません。

/*Vivaldiボタン*/
.vivaldi span {
  fill: red; /*色変更*/
  transform: scale(1.3); /*拡大*/
}

【ウェブページの表示領域】サイトの四隅を角丸化

ウェブページの表示領域の四隅を角丸にするCSSです。個人的にかなり好きです。

/*【ウェブページの表示領域】サイトの四隅を角丸化*/
#webpage-stack {
  border-radius: 20px;  /*数字を大きくするとより角丸になる*/
}
ウェブページの表示領域の四隅を角丸にした画像

Windows11にしてからというものの、ナポリタン寿司は、角丸フローティングデザインの虜になりました。

Vivaldiブラウザのウィンドウの四隅は、Windows11にすると自動的に角丸になりますが、ウェブページとツールバーの境界線はカクカクのままです。

Windows11にすると、自動的にウィンドウの四隅は角丸化になるが、ウェブページの表示領域はカクカクのまま

そこで色々漁った結果、見つけることができました。CSSを漁っている中で、一番「これがやりたかったんだ!うぉお!」ってなった気がしました。そのくらい好きなCSSです。

ブラウザの目立つ場所にあるカクカクが排除されていい感じです。

「【ウェブページの表示領域】サイトの四隅を角丸化」CSSを適用した拡大写真

「border-radius: 20px;」の数字の部分で、角丸具合を調整できます。数字が大きくなれば、より丸みを帯びます。

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

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

感想

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

ほんとありがたい話なんですが、2022年4月7日時点で2,847回もダウンロードされていました。評価も4.7といい感じです。海外の方からコメントがちらほら来ていてめちゃくちゃ嬉しいです。感謝です。

本記事で紹介した以外のCSSを知りたい場合は、当サイトの以下のカテゴリーを参考にしてみてください。

参考:カスタムCSS

Posted by ナポリタン寿司