当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【Vivaldi】ウェブパネルにCSSを適用する方法。Stylusの使い方

2022年1月11日カスタムCSS

「Stylus」のアイコン

この記事では、「Vivaldi(ヴィヴァルディ)」ブラウザで、通常ウェブサイトだけでなく、ウェブパネル(サイドバー)にもCSSを適用できるChrome拡張機能「Stylus(スタイラス)」について書きます。

【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が理解できている人であれば、好きなように外観をカスタマイズできます。パネル内だけで動作させることも可能です。

2023年1月18日追記

Vivaldi5.6(マイナーアップデート4)以降、全ての拡張機能がウェブパネルで動作しなくなりました。これにより、「Stylus」も使えない状態になりました。Chrome拡張機能が及ぼす影響を考慮して、意図的に無効化されたようです。

現在、対応策を模索中とのことです。

参考:WEBパネル上での拡張機能の動作について | Vivaldi Forum

リリース元:stylus.openstyles
記事執筆時のバージョン:1.5.26(2022年8月30日)

インストール方法

Chromeウェブストアからインストールできます。

「Chromeに追加」をクリックします。

「Stylus」のインストール手順画像1

アイコンが追加されればOKです。

「Stylus」のインストール手順画像2

使い方

CSSを書き込む方法

カスタマイズしたいサイトを開きます。パネルではなく、タブで開きます。「Stylus」の拡張機能ボタン(「Stylus」のアイコン)をクリックして、「次のスタイルを書く」の下にあるURLをクリックします。

「Stylus」のCSSを書き込む手順画像1

クリックするURLの場所によって、CSSの適用範囲が変わってきます。そのサイト全体で適用したい場合はドメイン名、特定の記事ページだけ適用したい場合は、「このURL」をクリックします。

クリックした部分CSSの動作ページ
twitter.comTwitterサイト全体に適用
twitter.com/このURLTwitterの特定のページだけに適用(例えば、「https://twitter.com/home」上でクリックした場合、「https://twitter.com/home」だけで有効になる。「https://twitter.com/messages」などの他ページでは動作しない)

新しいタブでスタイルシートが表示されます。ここにCSSを書いていきます。

「Stylus」のCSSを書き込む手順画像2
スタイルシートの名前を変更する方法

デフォルトでは、そのサイトのドメイン名が名前になります。変更したい場合は、左側の名前ボックスで変えられます。変更したら「保存」をクリックします。

スタイルシートの名前を変更する手順画像1

同じサイトに複数のスタイルシートを適用する場合に便利です。全部同じサイトURL名だと、どれがどれだか分からなくなります。

スタイルシートの名前を変更する手順画像2

試しに、Twitterのフォント、背景色を変更してみます。以下のコードを書き込みます。

/*背景色変更*/
.css-1dbjc4n {
  background-color: red !important;
}

/*フォント変更*/
.r-1tl8opc {
  font-family: "ふい字" !important;
}

書き込めたら、左側メニューの「保存」をクリックします。

「Stylus」のCSSを書き込む手順画像3

これで、そのサイト上でコードが発動するようになりました。ウェブパネルに登録します。既に登録している場合は、一度パネルをリロードします。

Vivaldiのパネルをリロードする手順画像

ウェブパネルのアイコンを右クリック→ナビゲーションコントロール(旧名:ツールバー)→「表示」をクリックします。

Vivaldiのウェブパネルにナビゲーションコントロールを表示する手順画像1

再度、ウェブパネルアイコンを右クリック→ナビゲーションコントロール→「全てのナビゲーションコントロールを表示」にチェックが入っていることを確認します。これで表示されます。

Vivaldiのウェブパネルにナビゲーションコントロールを表示する手順画像2

Twitterのフォントが「ふい字」、背景色が「赤色」になります。

Vivaldiのウェブパネルに登録したTwitterサイトの背景色を赤色、フォントを「ふい字」にした画像

フォントに関しては、「ふい字」をインストールしていないと、変更されません。

とりあえず、背景色だけ変更されたら、CSSが効いているということになります。おまけで、画像サイズを縮小するCSSも紹介しておきます。

/*画像サイズ縮小*/
div[aria-labelledby*="id"]:not([data-testid*="card"]) {
  width: 60%;
}

画像が縮小されて、ページのスクロール量が減ります。

ウェブパネルに登録したTwitterの画像を縮小する前と後の比較画像

スタイルシートの有効/無効の状態を確認する方法

CSSを適用したサイトを開きます。ウェブパネルで開いている時は表示されません。サイトを開くと、拡張機能ボタンの右上に、数字が表示されます。有効になっているスタイルシートの数が表示されます。

Twitter上で開いたStylusのポップアップメニュー画像

上記画像だと、現在開いているサイト(Twitter)上で、9個のスタイルシートが有効になっているということです。

ポップアップ内にある「DMメッセージ削除ポップアップ」や「LINE風DM」などは、グレーアウトしています。チェックを外しているので一時的に無効化されているということです。チェックをしたスタイルシートが有効になります。

一度作成したスタイルシートは、URL横の鉛筆マーク(🖉)から編集できます。

Stylusのスタイルシートを編集する手順画像

ウェブパネル内だけCSSを適用する方法

本拡張機能は、サイトごとでCSSを管理しています。

上記で紹介したCSSだと、パネル内だけでなく、タブ、PWAで開いた時にも反映されてしまいます。それでもよい場合は、気にしなくていいんですが、本記事はウェブパネル内でCSSを使うことがメインなので、改善してみます。

タブで開いた場合とウェブパネルで開いた場合の両方にCSSが適用されている画像

特定の横幅サイズのデバイスだけでCSSを適用する「メディアクエリ」と呼ばれる技を活用します。下記コードになります。

/*横幅が670px以下の場合にのみ適用する*/
@media screen and (max-width: 670px) {

  /*背景色変更*/
  .css-1dbjc4n {
    background-color: red !important;
  }

  /*フォント変更*/
  .r-1tl8opc {
    font-family: "ふい字" !important;
  }
}

これで、ウェブパネル内だけでCSSが有効になります。

ウェブパネルのTwitterだけに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からアクセスできます。

アクセスできたら、ページをスクロールしてみます。人気のスタイルシート(CSS)が一覧形式で表示されています。

「UserStyles.world」サイトのスクリーンショット1

右上の検索窓で検索ができます。日本の方もいらっしゃいますが、基本的には海外の方が多いので、英語で入力するとヒットしやすいです。

「UserStyles.world」サイトのスクリーンショット2

例えば、「Twitter」で検索してみます。色々出てきます。気になったものをクリックします。

「UserStyles.world」サイトのスクリーンショット3

試しに、「Twitter tighten sidebar HighProgrammer by alandesmet」をお借りしてみます。サイドバーのメニュー項目の間隔を縮めるようです。クリックしたら、サムネイル画像下の「Install」をクリックします。

「UserStyles.world」サイトのスクリーンショット4

新しいタブでCSSが開くので、全選択(Ctrl+A)→右クリック→「コピー」をクリックします。

「UserStyles.world」サイトのスクリーンショット5

拡張機能ボタン→「管理」をクリックします。

「Stylus」に「UserStyles.world」のCSSを適用する手順画像1

左側メニューの「Usercssとして」にチェックを入れて「新スタイルを作成」をクリックします。

自分でCSSを作成する時はチェック不要ですが、サイトからお借りする場合は、必ずチェックを入れてからにします。でないとエラーが表示されます。

「Stylus」に「UserStyles.world」のCSSを適用する手順画像2

既に書かれているコードを全選択(Ctrl+A)して、コピーしたコードを貼り付けます。(Ctrl+V

「Stylus」に「UserStyles.world」のCSSを適用する手順画像3

下記のようになります。既存のコードを全部削除して、上書きする点がポイントです。書き込めたら、「保存」をクリックします。

「Stylus」に「UserStyles.world」のCSSを適用する手順画像4

CSSが反映されて、Twitterのサイドバー項目がしゅっとなりました。 

Twitterの左側サイドバーの項目余白を縮めた画像

今回は、どの言語、どのテーマでも反映されるコードでしたが、CSSによっては英語以外の言語だと反映されない、ダークテーマでないと使えないものもあるので注意です。

CSS完全初心者用というよりは、0から構築するのがめんどくさい方向けかなと思います。ある程度理解できていれば、自分用にアレンジしたり、セレクタを変更できます。

感想

以上、ウェブサイトにCSSを適用するChrome拡張機能「Stylus(スタイラス)」を使って、「Vivaldi(ヴィヴァルディ)」のウェブパネルをカスタマイズする方法についてでした。

当サイトでは、色々なCSSを紹介しているので、気になったら見てみてください。主に「Stylebot」での解説ですが、「Stylus」でも利用できます。

2022年1月11日カスタムCSS