【Vivaldi】カスタムCSSの導入方法。自由にカスタマイズしてみよう！
この記事では、ウェブブラウザ「Vivaldi」にCSSを適用する方法について書きます。
カスタマイズの幅が一気に広がります。
Vivaldiには、CSSでブラウザの外観（UI）をカスタマイズできる「オリジナルカスタムUI」という機能があります。
CSSを書いて、Vivaldiに読み込ませることで、自分だけのオリジナルデザインを作成できます。作成しないといけないという手間があるので、初心者さんには難しいです。
例えば、標準の設定ではアドレスバーの背景色を変更できませんが、CSSを活用すると下記画像のように色を変更できます。
ブックマークバーのアイコンを中央揃えにすることだって可能です。
「CSSって何？」って方には、メリットよりもリスクの方が大きいと思うのでお勧めしません。「CSSってウェブサイトの装飾できるやつだよね！」ってくらいの認識があれば大丈夫だと思います。僕は、CSS初心者です。
本記事では、僕みたいな初心者でもオリジナルカスタムUIを使えるようにするまでの手順と、いくつかのサンプルを紹介します。僕が作成したCSSを知りたい方は、当サイトのカテゴリーVivaldi→カスタムCSSを参考にしてみてください。
下準備
大きな流れは、以下のようになっています。CSSは沼なので、1時間かかるかもしれないし、半日かかるかもしれません。CSSを使えるようにする下準備自体は、数分もあればできます。
コード（CSS）が書けるソフトを用意する
CSSを書くためのエディタを用意しましょう。MacやWindowsなどのOSによって色々エディターソフトがあります。僕はWindowsしか持っていないのでMacのエディターについては知りません。
Windowsの場合、標準で内臓されているメモ帳でも書けます。そこまで頻繁にCSSを触らないという方はメモ帳でOKです。例えば、Vivaldiフォーラムにあるコードを、そのままコピペする程度の利用頻度ならメモ帳で十分です。
「自分でCSS書きたい！」という方は、「Visual Studio Code」がおすすめです。Windowsで有名なHTMLエディタです。
ここでは詳しいインストール方法は紹介しないので、「Visual Studio Code インストール方法」などのように各自で調べて導入してみてください。まぁ、まずはWindows標準内蔵のメモ帳を使ってみて、こだわりたくなったら、使ってみるといいかなと思います。
https://skillhub.jp/blogs/235CSS用のフォルダーを作成する
CSSファイルを置いておくためのフォルダーを作成します。Vivaldiをインストールしているフォルダー内には作成せずに、全く別のドキュメントなどの場所に作成しましょう。
僕は頻繁に利用するので、デスクトップにHTMLフォルダーを作成して、その中にさらに「VivaldiCSS-snapshot」というフォルダーを作成しています。
D:\デスクトップ\HTML\VivaldiCSS-snapshotCSSファイルを作成したフォルダー内に配置して、Vivaldiに読み込ませる流れです。
オリジナルカスタムUIを有効にする
Vivaldiを起動して、以下のURLをアドレスバーに貼り付けてEnterを押します。
vivaldi://experiments/試験運用機能が表示されるので、「Allow for using CSS modifications.（カスタムCSSを有効にする）」にチェックを入れます。
ブラウザを再起動します。設定（Ctrl＋F12）を開きます。「外観」ページに新しく、「オリジナルカスタムUI」という項目が表示されているはずです。
をクリックします。先ほど作成したCSS用のフォルダーを選択します。中には何もなくてOKです。選択できたら、「フォルダーの選択」をクリックします。
下記画像のように、フォルダーの場所が指定されれば準備OKです。
下準備は以上です。後は、指定したフォルダーの中にCSSファイルを作成して、書き込んでいきます。
CSSの書き方
【初回のみ】CSSファイルの作成
CSSファイルを書き込むファイルを準備（作成）します。
エディターソフトによって操作方法は異なります。本記事では、Windowsに標準搭載されているメモ帳、及びMicrosoftが提供しているソフト「Visual Studio Code」での作成方法を書きます。
メモ帳（Windows11）の場合
作成したVivaldiのCSS用フォルダーを開きます。何もないところで右クリック→新規作成→テキストドキュメントをクリックします。
テキストドキュメントが作成されたら名前を変更します。
拡張子を変更する必要があるので、表示させていない方は、表示するようにします。
Windows10の場合、エクスプローラー上部の「表示」タブ→「ファイル名拡張子」をクリックします。
Windows11の場合、エクスプローラー上部の「表示」→表示→「ファイル名拡張子」をクリックします。
拡張子の「.txt」を「.css」に変更します。名前は、英語でも日本語でも何でもOKです。
拡張子の変更の警告画面が表示されるので、正しく入力できていたら「はい」をクリックします。
ダブルクリックで起動して、実際にCSSを記述していきます。
Visual Studio Codeの場合
Visual Studio Codeを起動して、ファイル→フォルダーをワークスペースに追加をクリックします。
フォルダーの選択画面が表示されるので、作成したVivaldiのCSS用フォルダーを選択します。
追加したら、ファイル作成ボタンをクリックします。
名前を「〇〇.CSS」にして作成します。無難に「Vivaldi.CSS」とかでいいと思います。
CSSファイルが作成されました。あとはここにCSSを記述していきます。
CSSを書く
例として、冒頭で説明したアドレスバーの色変更のCSSを書いてみます。以下のコード（CSS）を、作成したCSSファイルに貼り付けます。
/*アドレスバーの色変更*/
.toolbar-mainbar {
background-color: #33ccff !important; /*好きなHTMLカラーコードにする*/
}黄色ハイライトの部分を、自分で好きな色に変更できます。色の書き方は、こちらのサイトが参考になります。
ブラウザを再起動する
CSSを書き込んだらVivaldiを再起動します。無事にアドレスバーの色が水色になります。
CSSの見つけ方
Vivaldiフォーラムに様々なCSSに関する質問やアイディアが投稿されているので、ここから探してみましょう。英語なので、英語で検索してそれっぽいのを探していくーという流れです。例えば「アドレスバー」なら「addressbar」って感じです。
https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1サンプルのCSS
いくつかサンプルのCSSを紹介します。
ブックマークバーのアイコン中央揃え
/*ブックマークバーのアイコン中央揃え*/
.bookmark-bar .observer {
justify-content: center;
}ブックマークバーの自動展開
/*ブックマークバーのアイコン中央揃え*/
.bookmark-bar .observer {
justify-content: center;
}
パネルの背景色を偶数と奇数で違う色にする
/*パネルのリストの背景色変更（偶数行）*/
#panels .tree-item:nth-child(2n) {
background-color: red; /*ここを好きな色に変更する*/
}
/*パネルのリストの背景色変更（奇数行）*/
#panels .tree-item:nth-child(2n+1) {
background-color: blue; /*ここを好きな色に変更する*/
}
ツールバーのアイコンをMac風にする
Windows版Vivaldiのウィンドウグループ（最小化、最大化、閉じるボタン）を、Macの信号っぽいアイコンにするCSSです。
/*--------------------------------------------------
ウィンドウグループ（最大化、最小化、閉じるボタン）の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化終了
----------------------------------------------------*/以下のようになります。
スピードダイヤルを非表示。ホバーで表示する
/*スピードダイヤルホバー時だけ表示*/
/*通常は非表示*/
.speeddial {
opacity: 0;
transition-duration: 0.4s;
}
/*ホバー時に表示*/
.speeddial:hover {
opacity: 1;
}
ステータスバーの時計を拡大する
/*ステータスバーの時計拡大*/
.ClockButton--time {
transform: scale(2); /*拡大率*/
margin: 0 50px; /*左右の余白*/
}
/*拡大サイズによっては下記CSSと併用してください。
（多分、1.5以上から必要だと思います）*/
/*ブックマークバーと干渉しないために、はみ出し要素を非表示にする*/
.toolbar.toolbar-droptarget.toolbar-mainbar.toolbar-large {
overflow: hidden;
}
ブラウザのセレクタを調べる方法
ウェブサイトなら開発者ツールで簡単にセレクタを調べれますが、ブラウザのタブやツールバーとなると少しだけ特殊です。
CSSの解説
CSSには、基本的に以下の構造になっています。
.セレクタ名 {
color: #1e73be;
}最初の「.セレクタ」って部分が、「どの場所にCSSを使うんですか～？」って意味です。それ以降の「color: #1e73be;」は、実際のカスタマイズ内容（要素）って感じです。今回でいうと文字色の変更ですね。
今の時代とっても便利な時代でして、インターネットで「〇〇 CSS」ってググるとほとんど解決できちゃいます。例えば、「背景色 CSS」って検索したら、必ず「background-color」がでてきます。これを使えば背景色を変更できるってことです。
しかし、肝心のセレクタ名はどこにも書いていません。「これだ！」っていう正解がブラウザやサイトごとに異なるからです。要素は大体インターネットで調べれますが、セレクタ名は自分で見つけなければいけません。Vivaldiの場合は、結構簡単に見つけれるのでその方法を紹介します。
コマンドチェインに開発者ツールを登録
Vivaldiの場合は、コマンドチェインでCSSの要素を調べる開発者ツールを起動できます。
以下の画像を参考にして、コマンドチェインを作成してみてください。「コマンドチェインって何？」って方は、こちらの記事を参考にしてみてください。
command1のコマンドパラメータは、以下のURLになっています。コピペでOKです。
vivaldi://experimentsコマンドチェインを実行してセレクタを調べる
作成したコマンドチェインを実行します。クイックコマンド（F2）で作成したチェイン名を入力すると、候補がでてきます。選択して、Enterを押します。僕は開発者ツールの最初の文字をとって、「kai」にしています。
一瞬、試験運用機能タブが開いて、開発者ツールが新しいウィンドウで起動します。
開発者ツールの左上の
をクリックします。
選択モードになるので、変更したい場所で、マウスを乗せる＆クリックで要素の名前と位置が分かります。
例として、タブの文字の色を変更してみます。タブをクリックしたら、要素名は「span.title」ということが分かります。開発者モード右上の「+」ボタンをクリックしたら、現在選択しているセレクタがCSSに追加されるので、文字色を変更するコードを書き込みます。
試しに赤にしてみます。
/*タブバーの色変更*/
span.title {
color: red;
}リアルタイムでCSSが反映されます。タブの文字色が赤になりました。
ただし、このままだとブラウザを更新（リロード）した時にカスタマイズしたCSSはリセットされます。保存してないからです。永久に反映させるために保存します。
書き込んだCSSを右クリック→Copy ruleをクリックします。
開発者ツール上部にあるSourcesをクリックします。左側にブラウザの構成が表示されるので、以下の場所に進みます。
top→vivaldi-data→css-mods→〇〇〇.css
〇〇の部分には、自分で作成したCSSファイル名が入ります。ここにコピーしたCSSを貼り付けます。（Ctrl＋V）
ファイル名を右クリック→Save asをクリックして保存します。
名前を付けて保存ウィンドウが開くので保存します。上書きしていい場合は上書きしましょう。
ブラウザを再起動してもCSSは維持されます。
ドロップダウンのセレクタを調べる
上記の方法だと既に見えている状態のセレクタしか選択できません。
例えば、アドレスバーに文字を入力した時に表示される検索候補などです。普段は見えないので、どうやってセレクタを調べればいいのか気になって色々調べると、とても便利な方法がありました。開発者ツールのとある技を使います。
いつも通りコマンドチェインでブラウザの開発者ツールを起動します。画面上部の「Console」をクリックします。
以下のコマンドを貼り付けて、Enterを押します。
setTimeout(() => { debugger }, 4000)目に見えない4秒間のカウントダウンが始まります。その間に、ブラウザ側でドロップダウンを表示させます。分かりやすいように動画を貼っておきます。
4秒後にブラウザが一時停止になります。あとは、いつも通りでドロップダウンのセレクタを調べられます。コマンドを実行した後は、「Elements」タブに戻しておきましょう。
「4000」の数字を変更することで、一時停止までの時間を調整できます。最初のうちはあたふたすると思うので、6000（6秒）とか7000（7秒）とかでもいいかもしれません。慣れたら、3秒＝3000がおすすめです。
setTimeout(() => { debugger }, 6000)このコマンドは以下のサイトを参考にさせていただきました。感謝です。
![[Chrome] ドロップダウンリストを開いたままにして Chrome のデベロッパツールで要素](https://www.naporitansushi.com/wp-content/uploads/luxe-blogcard/6/61dcae1a64ac3ce595c89842a1dda0f3.png)
https://qiita.com/QUANON/items/468738f28b7983e9e601外観をごっそり変更する
本記事で紹介した方法を駆使することで、ブラウザの外観を以下のようにできます。
以下の記事で、僕が実際に作成したCSSをごっそり紹介しています。アドレスバーやツールバーの背景を透明にしたりして大きくブラウザの外観を変更しています。
Windows11のような角丸フローティングデザインにしたい場合は、ぜひ参考にしてみてください。
JavaScriptを使う
CSSに物足りなくなった方はJavaScriptに挑戦してみましょう。
CSSと違って、動きのある操作が可能になります。代表的なものでいえば、タブの上にマウスを乗せるとタブをアクティブにする…などです。
「browser.HTML」に記述したり、CSSとはちょっと違う作業が必要になります。
FirefoxのProton風外観に変更する
Firefoxベースのブラウザ「Floorp（フロープ）」を開発しているグループの「Ablaze」が、Vivaldiの外観を、Firefox風にするCSSを無料で公開しています。自分でやろうと思ったら非常に労力がかかるCSSです。FirefoxのProtonのUIが好きな方は、ぜひ試してみましょう。
https://github.com/Ablaze-MIRAI/Vivaldi-UI-Changerタブが角丸の四角で囲まれて、ダークテーマと非常にマッチしています。
上記サイトで公開されているCSSとは別に、テーマ設定の配色を調整すると、より似たデザインにできます。
| 背景 | 2b2a33 |
| 前景 | fbfbfe |
| ハイライト | 00ddff |
| アクセント | 1c1b22 |
感想
以上、VivaldiのオリジナルカスタムUIについてでした。
CSSさえ理解できていれば、無限の可能性が待っています。