【Vivaldi】テーマを変更する方法。ブラウザをもっと華やかに！
この記事は、ウェブブラウザVivaldiのテーマを変更する方法・カスタマイズ方法について書きます。
設定からサクッと変更、自分で好きな色でテーマを作成できます。
ウェブブラウザVivaldiは、自分で好きなようにテーマをカスタマイズできます。テーマは何個も作成でき、自由に切り替えできます。背景、前景、ハイライト、アクセントの4つの部分を、好きなようにカスタマイズできます。
初心者でもカスタマイズしやすいようにカラーピッカーが用意されており、直感的に色を選択できます。上級者向けにHTMLカラーコードを手動で入力できる機能も用意されています。
0から自作しなくても、初期でいくつかの美しいテーマがあり、目に優しいダークテーマもあります。初期のままのテーマでも十分美しいですが、テーマをカスタマイズすることで、より楽しくブラウジングできます。
スタートページをデスクトップの壁紙にしたり、テーマを時間ごとに切り替えるテーマ切り替え設定など、個性的な機能も搭載されています。
色の専門知識は、一切不要です。僕みたいな初心者でもできます。ぜひ、自分だけの最高のテーマを作成してみてください。
Vivaldi5.0にて、テーマのインポート、エクスポート機能が実装されました。それと同時にVivaldiテーマストアもオープンしました。Chromeのテーマストアと同様、他の人が作成したテーマをダウンロードできます。
「自分でテーマをカスタマイズするのはめんどくさい！けど、綺麗なテーマ使いたい！」って方は、ぜひテーマストアを活用してみましょう。
欲しいテーマの下にあるボタン「Download theme」をクリックするだけで、簡単にダウンロードできます。
https://www.naporitansushi.com/vivaldi-theme-store/これまで通り、テーマストアに頼らずに0から作ることも可能です。
ストアにあるおすすめダークテーマについては、下記記事を参考にしてみてください。僕の独断と偏見、僕が作成したテーマの宣伝記事です。
テーマを変更する方法
画面左上のVivaldiアイコン→設定をクリックします。（Ctrl＋F12でも可能）
左側のテーマをクリックします。
ライブラリーにいくつかテーマが用意されています。気になったものはクリックで適用できます。好みのテーマがない場合は、こちらの方法で自作できます。
既存の中だと、「Dark（ダーク）」がおすすめです。目に優しいからです。
ブラウザの外観だけでなく、ウェブページもダークにしたい場合は、Chrome拡張機能の「Dark Reader」がおすすめです。
テーマ切り替え設定で、複数のテーマを時間ごとに切り替えれます。例えば、朝は明るいテーマにして、夜は暗いテーマにするといったことができます。
テーマをカスタマイズする方法
好みのテーマがなかった場合は、テーマを自作してみましょう。ライブラリー内の一番下にある「新しいテーマ」をクリックします。
エディターが開くので、それぞれ設定していきます。大きく3つの項目に分類されています。
0からテーマを自作するのがしんどい場合は、既存のテーマに手を加えてカスタマイズできます。
カスタマイズしたい既存のテーマをクリック→「新しいテーマ」をクリックします。
既存のテーマの複製が作成されます。エディタータブを開いて、複製した既存のテーマをカスタマイズできます。
注意点ですが、既存のテーマを直接エディターで開くのはやめましょう。必ず上記の方法を通してカスタマイズするようにします。
上記方法だとコピーが作成されるので、既存のテーマに影響を及ぼすことなくカスタマイズできます。
わざわざ複製を作成する理由は、Vivaldiのアップデートで強制的にテーマがリセットされる可能性があるからです。
既存のテーマを直接上書きしていた場合、デフォルトテーマに戻された時、再び作り直さないといけません。
色
色を設定できます。まずはテーマの名称を決めときましょう。
4箇所の色を調整できます。
| テーマ：色の設定 | ||
|---|---|---|
| 配色 | 背景 | 背景色の変更（設定画面など） |
| 前景 | 文字色の変更 | |
| ハイライト | アドレスバーをクリックした時の枠線、その他、枠線などの色を変更 | |
| アクセント | タブバー（画面上部）の背景色の変更 | |
| カラーオーバーライド | ページからアクセントカラーを参照 | 開いてるタブの色を自動的にタブバーの背景に反映 |
| ウィンドウにアクセントカラーを適用 | タブバーの背景が薄くなる | |
| ウィンドウの色を薄くする | ウィンドウの文字などが薄くなる | |
| コントラスト | 濃度を調整 | |
| アクセントカラーの彩度を制限する | 彩度を抑える | |
テキスト欄には、見慣れない「＃半角英数字」の文字列が表示されていますが、初心者のうちは気にしなくてOKです。HTMLカラーコードと呼ばれるインターネット上の色の情報です。
他サイトで良さそうなカラーコードを見つけたら、直接手入力で指定できます。Vivaldiはカラーコードを理解していなくても、色を見ながら直感的に決められます。
HTMLカラーコードでテーマをカスタマイズしてみた動画を貼っておきます。
ピンポイントで、色を丸パクリしたい時に便利です。「ColorZilla」といったカラーコードを調べられるChrome拡張機能を使って調べるといいかなと思います。
「ページからアクセントカラーを参照」にチェックを入れると、下記動画のように、タブを切り替えるごとにサイトに合わせてタブバーの色が変化します。
頻繁にタブバーの色が変化するので、見栄えを華やかにしたい人におすすめです。Vivaldiに華やかなイメージがあるのは、きっとこの機能ですね。正直に言うと目が疲れるので、こだわりがない場合は、オフがいいかなと思います。
Vivaldi5.0でデフォルトのテーマに戻されるという事件が発生しました。
デフォルトテーマでは、「アクティブページからアクセントカラーを参照」がオンになっているので、かなり戸惑った方も多いようです。
5.0から強制的にそれしか選べないというわけではなく、デフォルトテーマに戻っただけなので、チェックを外すことで元に戻せます。
背景
スタートページに表示される背景画像（または色）を設定できます。
種類をカラーにすると単色を選択できます。シンプルがいいという方は単色の方がいいかもですね。
これだけでも、かなりのバリエーションがあります。用意されている画像（色）ではなく、デスクトップの壁紙、好きな画像、好きな色への変更もできます。
デスクトップの壁紙は、現在デスクトップに設定している壁紙が自動で選択されます。デスクトップの延長線のようにブラウザを利用できるってなんかいいですね。
Vivaldi好きなら、以下のサイトがたまらないかもです。
枚数は少ないですが、数少ないVivaldiのロゴを使った壁紙があります。
スタートページ、スピードダイヤルのカスタマイズ方法については、以下の記事を参考にしてみてください。
設定
細かい見た目を調整できます。僕は以下のように設定しています。といっても、CSSでカスタマイズしているので、あんまり意味はないです。
| テーマ：その他の設定 | 僕の設定 |
|---|---|
| ぼかし | 5 |
| 透明度 | 75% |
| 透明なタブバー | オン |
| 透明なバックグラウンドタブ | オフ |
| スクロールバースタイル | オン |
| 角を丸くする | 14 |
透明なタブバー
タブバーの背景色を透過させるかどうか設定できます。角丸フローティングデザインが好きな人は、チェックがおすすめです。美しいモダンなデザインに早変わりです。
スクロールバースタイル
設定画面のスクロールの幅のスタイルです。通常のバーでも問題ないんですが、シンプルスクロールバーにすると、よりスタイリッシュになります。
角を丸くする
僕は、角丸が好きなのでMAX14にしています。ここの数値によってアドレスバーや検索バーの角丸具合が決まります。
テーマのインポート・エクスポート
テーマのインポート
外部で入手したテーマを適用できます。
テーマストアから入手する場合は、「ほかのテーマも見てみる」から飛べます。「テーマを選択」は、ローカルのファイルを適用する時に使いましょう。
例えば、友達同士でひっそり交換しあったテーマなどです。テーマストアにアップロードして全世界の人に公開するのが嫌な場合に利用しましょう。
「テーマを選択」をクリックすると、ファイルを選択する画面が開きます。用意したZIPファイルを選択します。
テーマプレビューのダイアログが開くのでOKなら「インストール」をクリックします。プレビューは60秒間あるので、その間に嫌だなと思ったらキャンセルできます。
テーマがインストールされます。
テーマのエクスポート
テーマを書き出せます。
ライブラリの一番下にある「テーマを選択」から、テーマをZIPファイルでバックアップできます。今後、テーマが消える不具合が起こっても大丈夫なように、大切なテーマはオフライン上にバックアップしときましょう。
書き出したテーマは、ストアに公開することもできます。
より高度なカスタマイズはCSS
デフォルトの設定では物足りないという方におすすめなのが、オリジナルカスタムUI機能です。CSSを使うことでブラウザの見た目を自由自在にカスタマイズできます。
僕がカスタマイズしたブラウザの外観はこんな感じです。アドレスバー、タブバー、パネルバー、ステータスバー等ありとあらゆる部分を透明にして背景の桜が目立つようにしています。
詳しくは以下の記事を参考にしてみてください。CSSを使うので初心者には少し難しいですが、それだけカスタマイズできる幅も広いです。
感想
以上、Vivaldiのテーマを変更する方法でした。
パッと見のデザインが自分好みだと気分も上がって、楽しくブラウジングできます。自分の好きなように設定できるので、完全に自分の趣味嗜好に寄せれます。
ぜひ、色々調整してみて、好きなデザインにしてみてください。僕に、「こんなテーマ作ってやったぜ！」って自慢してみてください。喜びます。