【Vivaldi】ウェブパネルにCSSを適用する方法。Stylusの使い方
ウェブサイトにCSSを適用できるChrome拡張機能「Stylus（スタイラス）」を使うことで、「Vivaldi（ヴィヴァルディ）」のウェブパネルにもCSSを適用できます。
パネル内にCSSを適用することによって、より自分が使いやすいウェブパネルレイアウトを構築できます。
ドメイン単位での変更、ページ単位でのカスタマイズができます。例えば、「DeepL翻訳」の不要な項目（ヘッダー、フッター）を非表示にして、入力欄と翻訳結果だけを表示してスッキリさせる…といったことができます。Twitterのフォント変更も可能です。
通常、Chrome拡張機能は、ウェブパネル内では動作しません。
「uBlock Origin（ユーブロック・オリジン）」でTwitterのプロモーションをブロックしても、ウェブパネルに登録したTwitterでは表示されます。「Stylebot（スタイルボット）」でウェブサイトのCSSをカスタマイズしても、パネル内では有効になりません。
しかし、一部拡張機能はウェブパネル内でも動作します。例えば、文字選択が許可されていないサイトで、強制的に文字選択できるようにする「Simple Allow Copy」、Vivaldiフォーラムの外観をカスタマイズする「Vivaldi Forum mod（ビバルディ・フォーラム・モッド）」などです。その中の1つで「Stylus」も動作します。なぜ、一部の拡張機能だけ使えるかは、初心者の僕には不明です。
本拡張機能は、ウェブパネル専用…といったわけでなく、ウェブサイト全体をCSSでカスタマイズするツールです。CSSが理解できている人であれば、好きなように外観をカスタマイズできます。パネル内だけで動作させることも可能です。
Vivaldi5.6（マイナーアップデート4）以降、全ての拡張機能がウェブパネルで動作しなくなりました。これにより、「Stylus」も使えない状態になりました。Chrome拡張機能が及ぼす影響を考慮して、意図的に無効化されたようです。
現在、対応策を模索中とのことです。
リリース元：stylus.openstyles
記事執筆時のバージョン：1.5.26（2022年8月30日）
インストール方法
Chromeウェブストアからインストールできます。
https://chromewebstore.google.com/detail/stylus/clngdbkpkpee...「Chromeに追加」をクリックします。
アイコンが追加されればOKです。
使い方
CSSを書き込む方法
カスタマイズしたいサイトを開きます。パネルではなく、タブで開きます。「Stylus」の拡張機能ボタン（）をクリックして、「次のスタイルを書く」の下にあるURLをクリックします。
クリックするURLの場所によって、CSSの適用範囲が変わってきます。そのサイト全体で適用したい場合はドメイン名、特定の記事ページだけ適用したい場合は、「このURL」をクリックします。
| クリックした部分 | CSSの動作ページ |
|---|---|
| twitter.com | Twitterサイト全体に適用 |
| twitter.com/このURL | Twitterの特定のページだけに適用（例えば、「https://twitter.com/home」上でクリックした場合、「https://twitter.com/home」だけで有効になる。「https://twitter.com/messages」などの他ページでは動作しない） |
新しいタブでスタイルシートが表示されます。ここにCSSを書いていきます。
デフォルトでは、そのサイトのドメイン名が名前になります。変更したい場合は、左側の名前ボックスで変えられます。変更したら「保存」をクリックします。
同じサイトに複数のスタイルシートを適用する場合に便利です。全部同じサイトURL名だと、どれがどれだか分からなくなります。
試しに、Twitterのフォント、背景色を変更してみます。以下のコードを書き込みます。
/*背景色変更*/
.css-1dbjc4n {
background-color: red !important;
}
/*フォント変更*/
.r-1tl8opc {
font-family: "ふい字" !important;
}書き込めたら、左側メニューの「保存」をクリックします。
これで、そのサイト上でコードが発動するようになりました。ウェブパネルに登録します。既に登録している場合は、一度パネルをリロードします。
ウェブパネルのアイコンを右クリック→ナビゲーションコントロール（旧名：ツールバー）→「表示」をクリックします。
再度、ウェブパネルアイコンを右クリック→ナビゲーションコントロール→「全てのナビゲーションコントロールを表示」にチェックが入っていることを確認します。これで表示されます。
Twitterのフォントが「ふい字」、背景色が「赤色」になります。
フォントに関しては、「ふい字」をインストールしていないと、変更されません。
https://www.naporitansushi.com/twitter-font/とりあえず、背景色だけ変更されたら、CSSが効いているということになります。おまけで、画像サイズを縮小するCSSも紹介しておきます。
/*画像サイズ縮小*/
div[aria-labelledby*="id"]:not([data-testid*="card"]) {
width: 60%;
}
画像が縮小されて、ページのスクロール量が減ります。
スタイルシートの有効/無効の状態を確認する方法
CSSを適用したサイトを開きます。ウェブパネルで開いている時は表示されません。サイトを開くと、拡張機能ボタンの右上に、数字が表示されます。有効になっているスタイルシートの数が表示されます。
上記画像だと、現在開いているサイト（Twitter）上で、9個のスタイルシートが有効になっているということです。
ポップアップ内にある「DMメッセージ削除ポップアップ」や「LINE風DM」などは、グレーアウトしています。チェックを外しているので一時的に無効化されているということです。チェックをしたスタイルシートが有効になります。
一度作成したスタイルシートは、URL横の鉛筆マーク（🖉）から編集できます。
ウェブパネル内だけCSSを適用する方法
本拡張機能は、サイトごとでCSSを管理しています。
上記で紹介したCSSだと、パネル内だけでなく、タブ、PWAで開いた時にも反映されてしまいます。それでもよい場合は、気にしなくていいんですが、本記事はウェブパネル内でCSSを使うことがメインなので、改善してみます。
特定の横幅サイズのデバイスだけでCSSを適用する「メディアクエリ」と呼ばれる技を活用します。下記コードになります。
/*横幅が670px以下の場合にのみ適用する*/
@media screen and (max-width: 670px) {
/*背景色変更*/
.css-1dbjc4n {
background-color: red !important;
}
/*フォント変更*/
.r-1tl8opc {
font-family: "ふい字" !important;
}
}これで、ウェブパネル内だけでCSSが有効になります。
「@media screen and (max-width: 670px) 」の部分が重要です。一定の横幅サイズ以下の時に、CSSを適用するという意味です。「max-width: 670px」は、横幅が670px以下の時になります。
タブで開いた時は、大体670px以上のサイズになるので、CSSが適用されるのは、自然と670px以下のパネル内のみということになります。
/*ウェブパネル内だけで適用させるCSS*/
@media screen and (max-width: 670px) {
/*ここにCSSを書く*/
}【便利情報】有志の方が公開したCSSを使う
「UserStyles.world」というサイトで、ウェブサイトをカスタマイズしたCSSが無料で公開されています。「自分でCSSを作成するのは難しい！」という方には便利かもしれません。
以下のURLからアクセスできます。
https://userstyles.world/アクセスできたら、ページをスクロールしてみます。人気のスタイルシート（CSS）が一覧形式で表示されています。
右上の検索窓で検索ができます。日本の方もいらっしゃいますが、基本的には海外の方が多いので、英語で入力するとヒットしやすいです。
例えば、「Twitter」で検索してみます。色々出てきます。気になったものをクリックします。
試しに、「Twitter tighten sidebar HighProgrammer by alandesmet」をお借りしてみます。サイドバーのメニュー項目の間隔を縮めるようです。クリックしたら、サムネイル画像下の「Install」をクリックします。
新しいタブでCSSが開くので、全選択（Ctrl+A）→右クリック→「コピー」をクリックします。
拡張機能ボタン→「管理」をクリックします。
左側メニューの「Usercssとして」にチェックを入れて「新スタイルを作成」をクリックします。
自分でCSSを作成する時はチェック不要ですが、サイトからお借りする場合は、必ずチェックを入れてからにします。でないとエラーが表示されます。
既に書かれているコードを全選択（Ctrl+A）して、コピーしたコードを貼り付けます。（Ctrl+V）
下記のようになります。既存のコードを全部削除して、上書きする点がポイントです。書き込めたら、「保存」をクリックします。
CSSが反映されて、Twitterのサイドバー項目がしゅっとなりました。
今回は、どの言語、どのテーマでも反映されるコードでしたが、CSSによっては英語以外の言語だと反映されない、ダークテーマでないと使えないものもあるので注意です。
CSS完全初心者用というよりは、0から構築するのがめんどくさい方向けかなと思います。ある程度理解できていれば、自分用にアレンジしたり、セレクタを変更できます。
感想
以上、ウェブサイトにCSSを適用するChrome拡張機能「Stylus（スタイラス）」を使って、「Vivaldi（ヴィヴァルディ）」のウェブパネルをカスタマイズする方法についてでした。
当サイトでは、色々なCSSを紹介しているので、気になったら見てみてください。主に「Stylebot」での解説ですが、「Stylus」でも利用できます。
