【Vivaldi】カスタムCSSの導入方法。自由にカスタマイズしてみよう!

2021年10月30日カスタムCSS

Vivaldiのアイコン

この記事では、ウェブブラウザ「Vivaldi」にCSSを適用する方法について書きます。

カスタマイズの幅が一気に広がります。

【Vivaldi】カスタムCSSの導入方法。自由にカスタマイズしてみよう!

Vivaldiには、CSSでブラウザの外観(UI)をカスタマイズできる「オリジナルカスタムUI」という機能があります。

CSSを書いて、Vivaldiに読み込ませることで、自分だけのオリジナルデザインを作成できます。作成しないといけないという手間があるので、初心者さんには難しいです。

例えば、標準の設定ではアドレスバーの背景色を変更できませんが、CSSを活用すると下記画像のように色を変更できます。

アドレスバー色の変更
アドレスバーの色を水色(#33ccff)にした画像

ブックマークバーのアイコンを中央揃えにすることだって可能です。

Vivaldiブラウザのブックマークバーアイコンを中央揃えにした画像

「CSSって何?」って方には、メリットよりもリスクの方が大きいと思うのでお勧めしません。「CSSってウェブサイトの装飾できるやつだよね!」ってくらいの認識があれば大丈夫だと思います。僕は、CSS初心者です。

本記事では、僕みたいな初心者でもオリジナルカスタムUIを使えるようにするまでの手順と、いくつかのサンプルを紹介します。僕が作成したCSSを知りたい方は、当サイトのカテゴリーVivaldi→カスタムCSSを参考にしてみてください。

下準備

大きな流れは、以下のようになっています。CSSは沼なので、1時間かかるかもしれないし、半日かかるかもしれません。CSSを使えるようにする下準備自体は、数分もあればできます。

  1. コード(CSS)が書けるソフトを用意する(メモ帳など)
  2. CSS用のフォルダーを作成する
  3. オリジナルカスタムUIを有効にする

コード(CSS)が書けるソフトを用意する

Visual Studio Codeのスクリーンショット

CSSを書くためのエディタを用意しましょう。MacやWindowsなどのOSによって色々エディターソフトがあります。僕はWindowsしか持っていないのでMacのエディターについては知りません。

Windowsの場合、標準で内臓されているメモ帳でも書けます。そこまで頻繁にCSSを触らないという方はメモ帳でOKです。例えば、Vivaldiフォーラムにあるコードを、そのままコピペする程度の利用頻度ならメモ帳で十分です。

「自分でCSS書きたい!」という方は、「Visual Studio Code」がおすすめです。Windowsで有名なHTMLエディタです。

ここでは詳しいインストール方法は紹介しないので、「Visual Studio Code インストール方法」などのように各自で調べて導入してみてください。まぁ、まずはWindows標準内蔵のメモ帳を使ってみて、こだわりたくなったら、使ってみるといいかなと思います。

CSS用のフォルダーを作成する

CSSファイルを置いておくためのフォルダーを作成します。Vivaldiをインストールしているフォルダー内には作成せずに、全く別のドキュメントなどの場所に作成しましょう。

CSS用のフォルダーを作成する

僕は頻繁に利用するので、デスクトップにHTMLフォルダーを作成して、その中にさらに「VivaldiCSS-snapshot」というフォルダーを作成しています。

D:\デスクトップ\HTML\VivaldiCSS-snapshot

CSSファイルを作成したフォルダー内に配置して、Vivaldiに読み込ませる流れです。

オリジナルカスタムUIを有効にする

Vivaldiを起動して、以下のURLをアドレスバーに貼り付けてEnterを押します。

vivaldi://experiments/

試験運用機能が表示されるので、「Allow for using CSS modifications.(カスタムCSSを有効にする)」にチェックを入れます。

試験運用機能 「Allow for using CSS modifications.」にチェックを入れて有効にする

ブラウザを再起動します。設定(CtrlF12)を開きます。「外観」ページに新しく、「オリジナルカスタムUI」という項目が表示されているはずです。

外観にオリジナルカスタムUI項目が表示される

フォルダーを選択をクリックします。先ほど作成したCSS用のフォルダーを選択します。中には何もなくてOKです。選択できたら、「フォルダーの選択」をクリックします。

フォルダーを選択

下記画像のように、フォルダーの場所が指定されれば準備OKです。

オリジナルカスタムUI CSSフォルダーを指定

下準備は以上です。後は、指定したフォルダーの中にCSSファイルを作成して、書き込んでいきます。

CSSの書き方

【初回のみ】CSSファイルの作成

CSSファイルを書き込むファイルを準備(作成)します。

エディターソフトによって操作方法は異なります。本記事では、Windowsに標準搭載されているメモ帳、及びMicrosoftが提供しているソフト「Visual Studio Code」での作成方法を書きます。

メモ帳(Windows11)の場合

作成したVivaldiのCSS用フォルダーを開きます。何もないところで右クリック→新規作成→テキストドキュメントをクリックします。

テキストドキュメントの作成

テキストドキュメントが作成されたら名前を変更します。

拡張子を変更する必要があるので、表示させていない方は、表示するようにします。

Windows10の場合、エクスプローラー上部の「表示」タブ→「ファイル名拡張子」をクリックします。

Windows10のファイル名拡張子を表示する方法

Windows11の場合、エクスプローラー上部の「表示」→表示→「ファイル名拡張子」をクリックします。

Windows11のファイル名拡張子を表示する方法

拡張子の「.txt」を「.css」に変更します。名前は、英語でも日本語でも何でもOKです。

拡張子を「.css」に変更

拡張子の変更の警告画面が表示されるので、正しく入力できていたら「はい」をクリックします。

名前の変更

ダブルクリックで起動して、実際にCSSを記述していきます。

CSSをメモ帳に記述していく

Visual Studio Codeの場合

Visual Studio Codeを起動して、ファイル→フォルダーをワークスペースに追加をクリックします。

Visual Studio Code フォルダーをワークスペースに追加

フォルダーの選択画面が表示されるので、作成したVivaldiのCSS用フォルダーを選択します。

ワークスペースにフォルダーを追加

追加したら、ファイル作成ボタンをクリックします。

新しいファイルの作成

名前を「〇〇.CSS」にして作成します。無難に「Vivaldi.CSS」とかでいいと思います。

CSSの名前を決める

CSSファイルが作成されました。あとはここにCSSを記述していきます。

CSSを記述していく

CSSを書く

例として、冒頭で説明したアドレスバーの色変更のCSSを書いてみます。以下のコード(CSS)を、作成したCSSファイルに貼り付けます。

/*アドレスバーの色変更*/
.toolbar-mainbar {
  background-color: #33ccff !important; /*好きなHTMLカラーコードにする*/
}

黄色ハイライトの部分を、自分で好きな色に変更できます。色の書き方は、こちらのサイトが参考になります。

アドレスバーの背景色を変更するCSS

ブラウザを再起動する

CSSを書き込んだらVivaldiを再起動します。無事にアドレスバーの色が水色になります。

アドレスバーが水色になる

CSSの見つけ方

Vivaldiフォーラムに様々なCSSに関する質問やアイディアが投稿されているので、ここから探してみましょう。英語なので、英語で検索してそれっぽいのを探していくーという流れです。例えば「アドレスバー」なら「addressbar」って感じです。

サンプルの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; /*ここを好きな色に変更する*/
}
Vivaldiのパネルの背景色を偶数と奇数で違う色にしてみた画像

ツールバーのアイコンを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化終了
----------------------------------------------------*/

以下のようになります。

Windows版Vivaldiの最大化、最小化、閉じるボタンを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をクリックします。

Copy rule

開発者ツール上部にあるSourcesをクリックします。左側にブラウザの構成が表示されるので、以下の場所に進みます。

top→vivaldi-data→css-mods→〇〇〇.css
Sources Vivaldi.css

〇〇の部分には、自分で作成したCSSファイル名が入ります。ここにコピーしたCSSを貼り付けます。(CtrlV

コピーしたCSSを貼り付け

ファイル名を右クリック→Save asをクリックして保存します。

Save asで保存

名前を付けて保存ウィンドウが開くので保存します。上書きしていい場合は上書きしましょう。

名前を付けて保存

ブラウザを再起動してもCSSは維持されます。

ドロップダウンのセレクタを調べる

上記の方法だと既に見えている状態のセレクタしか選択できません。

例えば、アドレスバーに文字を入力した時に表示される検索候補などです。普段は見えないので、どうやってセレクタを調べればいいのか気になって色々調べると、とても便利な方法がありました。開発者ツールのとある技を使います。

検索候補のドロップダウンリスト

いつも通りコマンドチェインでブラウザの開発者ツールを起動します。画面上部の「Console」をクリックします。

開発者ツールを起動してConsoleをクリック

以下のコマンドを貼り付けて、Enterを押します。

setTimeout(() => { debugger }, 4000)

目に見えない4秒間のカウントダウンが始まります。その間に、ブラウザ側でドロップダウンを表示させます。分かりやすいように動画を貼っておきます。

4秒後にブラウザが一時停止になります。あとは、いつも通りセレクトモードアイコンでドロップダウンのセレクタを調べられます。コマンドを実行した後は、「Elements」タブに戻しておきましょう。

「4000」の数字を変更することで、一時停止までの時間を調整できます。最初のうちはあたふたすると思うので、6000(6秒)とか7000(7秒)とかでもいいかもしれません。慣れたら、3秒=3000がおすすめです。

setTimeout(() => { debugger }, 6000)

このコマンドは以下のサイトを参考にさせていただきました。感謝です。

外観をごっそり変更する

本記事で紹介した方法を駆使することで、ブラウザの外観を以下のようにできます。

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

以下の記事で、僕が実際に作成したCSSをごっそり紹介しています。アドレスバーやツールバーの背景を透明にしたりして大きくブラウザの外観を変更しています。

Windows11のような角丸フローティングデザインにしたい場合は、ぜひ参考にしてみてください。

JavaScriptを使う

CSSに物足りなくなった方はJavaScriptに挑戦してみましょう。

CSSと違って、動きのある操作が可能になります。代表的なものでいえば、タブの上にマウスを乗せるとタブをアクティブにする…などです。

マウスオーバーでタブアクティブ化のGIF

「browser.HTML」に記述したり、CSSとはちょっと違う作業が必要になります。

FirefoxのProton風外観に変更する

Firefoxベースのブラウザ「Floorp(フロープ)」を開発しているグループの「Ablaze」が、Vivaldiの外観を、Firefox風にするCSSを無料で公開しています。自分でやろうと思ったら非常に労力がかかるCSSです。FirefoxのProtonのUIが好きな方は、ぜひ試してみましょう。

タブが角丸の四角で囲まれて、ダークテーマと非常にマッチしています。

Firefox(Proton)風CSSテーマ

上記サイトで公開されているCSSとは別に、テーマ設定の配色を調整すると、より似たデザインにできます。

Firefox 風テーマの配色設定
背景2b2a33
前景fbfbfe
ハイライト00ddff
アクセント1c1b22

感想

以上、VivaldiのオリジナルカスタムUIについてでした。

CSSさえ理解できていれば、無限の可能性が待っています。

Posted by ナポリタン寿司