【広告】

Amazonブラックフライデーが12月2日まで開催中です!

個人的には、Anker製品か、コカ・コーラがかなり安くなっているのでおすすめです!

高級キーボードで有名な東プレが最近発売した「REALFORCE R3」もセールをやっていました!詳しくはこちらの記事を確認してみてくださーい。

【Vivaldi】自分で作成したCSS を適用する方法。より高度なカスタマイズをしてみよう!

2021年10月30日CSS

Vivaldi のアイコン

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

【Vivaldi】自分で作成したCSS を適用する方法。より高度なカスタマイズをしてみよう!

Vivaldi では、オリジナルカスタムUI と呼ばれる自分で書いたCSS でVivaldi のデザイン(UI) をカスタマイズできる機能があります。

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

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

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

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

ちなみに、僕はCSS を書くことはできないので、この記事ではあくまでオリジナルカスタムUI を使えるようにするまでの紹介です。そこから、どのようにカスタマイズするのかはご自身で考えてください。

注意

自分で手を加えるので、Vivaldi 公式サポートからは対象外になります。もし、これにより不具合が起こっても、ご自身の環境問題な可能性が高いので、無暗にフォーラムに不具合報告する…といったことはやめましょう。

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

大きな流れは以下のようになっています。

  • コード(CSS)が書けるソフトを用意する
  • 必要に応じてバックアップを作成しとく
  • オリジナルカスタムUIを有効にする
  • CSS を書く(例:アドレスバー色の変更)
  • ブラウザを再起動する
  • CSS の見つけ方

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

CSS を書くためのエディタを用意しましょう。

Windows10 に標準で内臓されているメモ帳でも書けるらしいですが、個人的にはVisual Studio Code」がおすすめです。有名なHTMLエディタです。初心者でも使いやすいです。

詳しくは以下のサイトを参考にしてみてください。

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

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

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

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

後々、CSSファイルをこの中に作成してVivaldi で読み込ませるって感じです。

必要に応じてバックアップを作成しとく

これは強制ではありませんが、最初のうちは何かあってもいいように、バックアップしとくがおすすめです。正確には、バックアップではなくテスト用プロファイルの新規作成です。

プロファイルは、ブラウザを複数人で切り替えれる機能です。ユーザー1、ユーザー2といった形で設定やブックマークなどのデータを切り替えれます。

オリジナルカスタムUI も、プロファイルごとで切り替えれるので、テスト用に1つユーザーを作成しておくと、後腐れなく実験できます。何かあってもテスト用プロファイルなので、メインの方には影響を及ぼしません。

まずは、テスト用の環境で実験して成功したら、メインユーザーにも導入する…といった使い方ができます。そういうのめんどくさいという方は飛ばしてOKです。

Vivaldi を起動して、画面右上のプロファイルアイコンをクリック → プロファイル管理をクリック をクリックします。

ユーザープロファイル

設定(CtrlF12) → アドレスバー → プロファイル管理 → プロファイルボタンを表示する で表示できます。

表示したくない場合は、その下の「プロファイル管理」をクリックしてユーザーを追加できます。

ユーザー名を決めて、「ユーザーを追加」をクリックします。

新しいユーザーを作成

新規状態でVivaldi を利用できます。

Vivaldi の初回起動画面

何かあったら、いつでもプロファイル管理からユーザーを切り替えれます。これで、テスト用のプロファイルは自由に実験台にできます。

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

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

vivaldi://experiments/

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

試験運用機能 - Allow for using CSS modifications. の有効

ブラウザを再起動します。

設定(CtrlF12)を開きます。外観に新しく、オリジナルカスタムUI という項目が表示されているはずです。

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

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

フォルダーを選択

以下のようにフォルダの場所が指定されれば準備OKです。

CSS フォルダを指定

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;
}

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

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

このCSSは以下のVivaldi フォーラムを参考にしました。感謝です。

参考:Ability to change addressbar colors | Vivaldi Forum

ブラウザを再起動する

CSS を書き込んだら、Vivaldi を再起動します。

無事にアドレスバーの色が変わりました。

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

CSS の見つけ方

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

例えば「アドレスバー」なら「addressbar」って感じです。

【初心者さん向け】要素を調べる方法

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 をクリックします。

Copy rule

開発者ツール上部にあるSources をクリックします。

左側にブラウザの構成?が表示されるので、以下の場所に進みます。

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

〇〇の部分には、自分で作成したCSSファイル名が入ります。

ここにコピーしたCSS を貼り付け(CtrlV)ます。

コピーしたCSSを貼り付け

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

Save as で保存

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

名前を付けて保存

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

【余談】Firefox 風の外観に変更する

ブラウザ「Floorp」の親元であるAblaze が、Vivaldi の外観をFirefox 風にするCSSを無料公開しています。自分でやろうと思ったら非常に労力がかかるCSS ですが、それを無料公開ってすごいですね。

詳しいやり方も紹介されているので、ぜひ以下のサイトを参考にしてみてください。

僕も愛用しています。めちゃくちゃいいです。

タブが角丸の四角で囲まれて、ダークテーマと非常にマッチしています。アドレスバー周りの枠線は水色ってところも近未来の機械を象徴しているみたいでかっこいいです。

Firefox(Proton)風CSSテーマ

ちなみに、上記サイトで公開されているCSS とは、別で標準のテーマ設定で以下のテーマを新規作成して適用することで最高のデザインになります。

Firefox 風テーマ
項目
背景2b2a33
前景fbfbfe
ハイライト00ddff
アクセント1c1b22

まとめ

以上、Vivaldi のオリジナルカスタムUI についてでした。CSS さえ理解できてれば無限の可能性が待っています。

Posted by ナポリタン寿司