【Vivaldi】自分で作成したCSS を適用する方法。より高度なカスタマイズをしてみよう！
この記事では、ウェブブラウザ「Vivaldi」に、CSS を適用する方法について書きます。
Vivaldi では、オリジナルカスタムUI と呼ばれる自分で書いたCSS でVivaldi のデザイン（UI） をカスタマイズできる機能があります。
自分でCSS を書いて、Vivaldi に読み込ませることで、自分だけのオリジナルデザインを作成できます。自分で、CSS を作成しないといけないという手間があるので初心者さんには難しいです。
例えば、標準の設定ではアドレスバーの背景色は変更できませんが、CSS を活用すると以下の画像のようにアドレスバーの色を変更できます。
「CSS って何？」って方には、メリットよりもリスクの方が大きいと思うのでお勧めしません。「CSS ってウェブサイトの装飾できるやつだよね！」ってくらいの認識があれば大丈夫だと思います。
ちなみに、僕はCSS を書くことはできないので、この記事ではあくまでオリジナルカスタムUI を使えるようにするまでの紹介です。そこから、どのようにカスタマイズするのかはご自身で考えてください。
自分で手を加えるので、Vivaldi 公式サポートからは対象外になります。もし、これにより不具合が起こっても、ご自身の環境問題な可能性が高いので、無暗にフォーラムに不具合報告する…といったことはやめましょう。
オリジナルカスタムUI を有効にする・準備
大きな流れは以下のようになっています。
- コード（CSS）が書けるソフトを用意する
- 必要に応じてバックアップを作成しとく
- オリジナルカスタムUIを有効にする
- CSS を書く（例：アドレスバー色の変更）
- ブラウザを再起動する
- CSS の見つけ方
コード（CSS）が書けるソフトを用意する
CSS を書くためのエディタを用意しましょう。
Windows10 に標準で内臓されているメモ帳でも書けるらしいですが、個人的には「Visual Studio Code」がおすすめです。有名なHTMLエディタです。初心者でも使いやすいです。
詳しくは以下のサイトを参考にしてみてください。
https://skillhub.jp/blogs/235CSS用のフォルダを作成する
CSSファイルを置いておくためのフォルダを作成します。Vivaldi がインストールしているフォルダ内には作成せずに、全く別のドキュメントなどの場所に作成しましょう。
僕は、頻繁に利用するのでデスクトップにHTMLフォルダを作成して、その中にさらに「VivaldiCSS-snapshot」というフォルダを作成しています。
D:\デスクトップ\HTML\VivaldiCSS-snapshot後々、CSSファイルをこの中に作成してVivaldi で読み込ませるって感じです。
必要に応じてバックアップを作成しとく
これは強制ではありませんが、最初のうちは何かあってもいいように、バックアップしとくがおすすめです。正確には、バックアップではなくテスト用プロファイルの新規作成です。
プロファイルは、ブラウザを複数人で切り替えれる機能です。ユーザー１、ユーザー２といった形で設定やブックマークなどのデータを切り替えれます。
オリジナルカスタムUI も、プロファイルごとで切り替えれるので、テスト用に1つユーザーを作成しておくと、後腐れなく実験できます。何かあってもテスト用プロファイルなので、メインの方には影響を及ぼしません。
まずは、テスト用の環境で実験して成功したら、メインユーザーにも導入する…といった使い方ができます。そういうのめんどくさいという方は飛ばしてOKです。
Vivaldi を起動して、画面右上のプロファイルアイコンをクリック → プロファイル管理をクリック をクリックします。
設定（Ctrl＋F12） → アドレスバー → プロファイル管理 → プロファイルボタンを表示する で表示できます。
表示したくない場合は、その下の「プロファイル管理」をクリックしてユーザーを追加できます。
ユーザー名を決めて、「ユーザーを追加」をクリックします。
新規状態でVivaldi を利用できます。
何かあったら、いつでもプロファイル管理からユーザーを切り替えれます。これで、テスト用のプロファイルは自由に実験台にできます。
オリジナルカスタムUIを有効にする
Vivaldi を起動して、以下のURLをアドレスバーに貼り付けてEnterを押します。
vivaldi://experiments/試験運用機能が表示されるので、「Allow for using CSS modifications.（カスタムCSSを有効にする）」にチェックを入れます。
ブラウザを再起動します。
設定（Ctrl＋F12）を開きます。外観に新しく、オリジナルカスタムUI という項目が表示されているはずです。
「フォルダーを選択」から、先ほど作成したCSS用のフォルダを選択します。中には何もなくてOKです。選択できたら、「フォルダーの選択」をクリックします。
以下のようにフォルダの場所が指定されれば準備OKです。
CSS の書き方
CSSファイルの作成
CSSファイルを書くエディタソフトによって操作方法は異なりますが、ここでは「Visual Studio Code」での作成方法を書きます。
Visual Studio Code を起動して、ファイル → フォルダーをワークスペースに追加 をクリックします。
フォルダーの選択画面が表示されるので、作成したVivaldi のCSS用フォルダを選択します。
追加したら、ファイル作成ボタンをクリックします。
名前を「〇〇.CSS」にして作成します。無難に「Vivaldi.CSS」とかでいいと思います。
CSSファイルが作成されました。あとはここにCSS を記述していきます。保存は自動でされます。
CSS を書く（例：アドレスバー色の変更）
冒頭で説明したアドレスバーの色変更のCSSを書いてみます。ここらへんが一番手っ取り早く見た目を変更できます。
以下のコード（CSS）を作成したCSSファイルに貼り付けします。
.toolbar-mainbar {
background-color: #33ccff !important;
}黄色ハイライトの部分を自分で好きな色に変更できます。色の書き方は、こちらのサイトが参考になります。
このCSSは以下のVivaldi フォーラムを参考にしました。感謝です。
参考：Ability to change addressbar colors | Vivaldi Forum
ブラウザを再起動する
CSS を書き込んだら、Vivaldi を再起動します。
無事にアドレスバーの色が変わりました。
CSS の見つけ方
Vivaldi フォーラムに、様々なCSS に関する質問やアイディアが投稿されているので、ここから探してみましょう。英語なので、英語で検索してそれっぽいのを探していくーという流れです。
例えば「アドレスバー」なら「addressbar」って感じです。
https://forum.vivaldi.net/topic/10549/modding-vivaldi?page=1【初心者さん向け】要素を調べる方法
CSS の解説
※CSS ド素人です。
CSS にはパターンがあって以下の構造になっています。
.要素名 {
color: #1e73be;
}最初の「.要素名」って部分が、「どの場所にCSS を使うんですか～？」って意味です。それ以降の「color: #1e73be;」は、実際のカスタマイズ内容って感じです。今回でいうと文字色の変更ですね。
んで、今の時代とっても便利な時代でして、インターネットで「〇〇 CSS」ってググるとほとんど解決できちゃいます。例えば、「背景色 CSS」って検索したら、必ず「background-color」がでてきます。これを使えば、背景色を変更できるってことです。
コマンドチェインに開発者ツールを登録
いかんせん要素名が分からないとCSS もへったくれもありません。そこで、あれやこれや調べたらVivaldi の要素を調べる方法が分かったので書いておきます。
コマンドチェインから、CSS の要素を調べる開発者ツールを起動するって方法です。
以下の画像を参考にしてコマンドチェインを作成してみてください。コマンドチェインって何？って方はこちらの記事を参考にしてみてください。
command1 のコマンドパラメータは以下のURLになっています。コピペでOKです。
vivaldi://experimentsこの方法は、以下のVivaldi フォーラムを参考にさせていただきました。感謝です。
参考：Inspecting the Vivaldi UI with DevTools | Vivaldi Forum
コマンドチェインを実行して要素を調べる
作成したコマンドチェインを実行します。
一瞬、試験運用機能タブが開いて、開発者ツールが新しいウィンドウで起動します。
開発者ツールの左上の矢印ボタンをクリックします。
選択モードになるので、変更したい場所にマウスを乗せる＆クリックで要素の名前と位置が分かります。
例えば、ちょーーシンプルなやつでいくと文字色の変更です。
タブをクリックしたら、要素名は「span.title」ということが分かります。開発者モード右上の「+」ボタンをクリックしたら、現在選択している要素がCSSに追加されるので、文字色を変更するコードを書き込みます。
試しに赤にしてみます。
span.title {
color: red;
}リアルタイムでCSS が反映されます。タブの文字色が赤になりました。
ただし、このままだとブラウザを更新（リロード）したら、カスタマイズしたCSS はリセットされます。保存してないですからね。
そこで、永久に反映させるために保存します。
書き込んだCSS を右クリック → Copy rule をクリックします。
開発者ツール上部にあるSources をクリックします。
左側にブラウザの構成？が表示されるので、以下の場所に進みます。
top → vivaldi-data → css-mods → 〇〇〇.css〇〇の部分には、自分で作成したCSSファイル名が入ります。
ここにコピーしたCSS を貼り付け（Ctrl＋V）ます。
CSSファイル名を右クリック→ Save as をクリックして保存します。
名前を付けて保存ウィンドウが開くので、保存します。上書きしていい場合は、上書きしましょう。
これで、ブラウザを再起動してもCSS は維持されます。
【余談】Firefox 風の外観に変更する
ブラウザ「Floorp」の親元であるAblaze が、Vivaldi の外観をFirefox 風にするCSSを無料公開しています。自分でやろうと思ったら非常に労力がかかるCSS ですが、それを無料公開ってすごいですね。
詳しいやり方も紹介されているので、ぜひ以下のサイトを参考にしてみてください。
https://github.com/Ablaze-MIRAI/Vivaldi-UI-Changer僕も愛用しています。めちゃくちゃいいです。
タブが角丸の四角で囲まれて、ダークテーマと非常にマッチしています。アドレスバー周りの枠線は水色ってところも近未来の機械を象徴しているみたいでかっこいいです。
ちなみに、上記サイトで公開されているCSS とは、別で標準のテーマ設定で以下のテーマを新規作成して適用することで最高のデザインになります。
| 項目 | 色 |
|---|---|
| 背景 | 2b2a33 |
| 前景 | fbfbfe |
| ハイライト | 00ddff |
| アクセント | 1c1b22 |
まとめ
以上、Vivaldi のオリジナルカスタムUI についてでした。CSS さえ理解できてれば無限の可能性が待っています。