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

2022年1月11日Vivaldi

Stylusのアイコン

この記事では、ウェブサイトだけでなく、Vivaldi のウェブパネルにもCSSを適用できるChrome拡張機能「Stylus」について書きます。

Stylusでウェブパネル内をカスタマイズした画面

ウェブサイトにCSSを適用できるChrome拡張機能Stylusを使うことで、VivaldiのウェブパネルにもCSSを適用できます。

パネル内にCSSを適用することによって、より自分が使いやすいウェブパネルレイアウトを構築できます。

ドメイン単位での変更、ページ単位でのカスタマイズができます。

例えば、DeepL翻訳の不要な項目(ヘッダー、フッター)を非表示にして、入力欄と翻訳結果だけを表示してスッキリさせる…といったことができます。Twitterのフォント変更も可能です。

通常、ウェブパネル内ではChrome拡張機能は使えません。

uBlock Origin」でTwitterのプロモーションをブロックしても、ウェブパネルのTwitterでは表示されます。「Stylebot」でウェブサイトのCSSをカスタマイズしてもパネル内では有効になりません。

参考:【Stylebot】サイトにCSSを適用できる拡張機能の使い方

しかし、一部拡張機能はウェブパネル内でも使えるようになっています。

例えば、文字選択が許可されていないサイトで強制的に文字選択できるようにする「Simple Allow Copy」、Vivaldiフォーラムの外観をカスタマイズする「Vivaldi Forum mod」などです。

なぜ、一部の拡張機能は使えるのかは不明です。何か共通点がありそうなんですが、初心者にはさっぱりです。

その中の一つで、本記事で紹介するStylusも使えるって感じです。

本拡張機能は、ウェブパネル専用…といったわけでなく、ウェブサイト全体をCSSでカスタマイズするツールです。CSSが理解できている人であれば、好きなように外観をカスタマイズできます。

パネル内だけで動作させることも可能です。

ポイント

CSS 若干分かるよーんって人向けの記事です。

全く分からん!って人には、何をいってんのかさっぱりだと思います。

提供元:stylus.openstyles
記事執筆時のバージョン:1.5.22(2021年8月30日)

ダウンロード方法

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

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

Stylusのインストール

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

このページではStylusは動作しません。

使い方

CSSでカスタマイズしたいサイトを開きます。パネルではなく、タブで開きましょう。

Chrome拡張機能ボタンをクリックして、「次のスタイルを書く」の下にあるURL(ドメイン)をクリックします。「このURL」でもいんですが、ドメイン単位で設定した方が便利だと思います。

CSSを適用したいサイトでChrome拡張機能ボタンをクリック

Twitterだと、「twitter.comこのURL」の「twitter.com」の部分です。

新しいタブでCSSを書くページが開くので、実際にCSSを書いていきます。

スタイルを追加 実際にCSSを書いていく

試しに、Twitterのフォント、背景色を変更してみます。

以下のコードを書き込みます。

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

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

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

スタイルを編集

パネルをリロードします。

パネルのリロード

ウェブパネルのアイコンを右クリック→ツールバー→表示をクリックします。

ウェブパネルの右クリック

ホームボタンがウェブパネル内上部に表示されるので、バーの空いている部分を右クリック→ツールバー→全てのコントロールを表示をクリックします。

ツールバー 全てのコントロールを表示

これで表示されます。

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

Twitter パネルの背景が赤、フォントがふい字になる

CSSが正常に反映されているかどうかは、拡張機能ボタン右上で確認できます。CSSを書いたサイトを開いた時に、数字が表示されていれば正常にスタイルシートが読み込まれています。

正常にスタイルシートが読み込まれている

フォントに関しては、人によってインストールしている・していないがあるので、変更されないかもです。

「フォント変えてぇ!」って方は、以下の記事を参考にしてみてください。

参考:【Stylebot】Twitterのフォントを変更するCSS

とりあえず背景色だけでも変更されたら、CSSは効いているってことです。

画像サイズを縮小するCSSも紹介しておきます。

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

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

画像縮小前と縮小後の比較画像

一度作成したら、今後はURL 横の鉛筆マークから追加で編集できます。

追加の記述はURL横の鉛筆マークからできる

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

本拡張機能はサイトごとでCSSを管理しているので、上記CSSだと、パネル内だけでなく、タブ、PWAで開いた時にも反映されてしまいます。

それでもいいって方は、気にしなくていいんですが、本記事はウェブパネル内でCSSを使うことがメインなので、改善してみます。

タブで開いた時にもCSSが適用されてしまう

横幅のサイズによって、CSSを適用するかしないかを設定します。

下記コードになります。

/*背景色変更*/
@media screen and (max-width: 670px) {
  .css-1dbjc4n {
    background-color: red !important;
  }
}

/*フォント変更*/
@media screen and (max-width: 670px) {
  .r-1tl8opc {
    font-family: "ふい字" !important;
  }
}

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

ウェブパネル内だけCSSが反映される

「@media screen and (max-width: 670px) 」の部分が重要です。一定のサイズ以下の時にCSSを適用させるって意味です。

「max-width: 670px」は、横幅が670px以下の時になります。

タブで開いた時は、大体670px以上のサイズになるので、CSSが適用されるのは、自然と670px以下のパネル内のみということになります。

/*ウェブパネル内だけで適用させるCSS*/
@media screen and (max-width: 670px) {
  /*ここにCSSを書く*/
}

この方法は、レスポンシブデザインと呼ばれるスマホとPCでデザインの見え方を変化させる時に使われます。

ウェブパネルは、レスポンシブデザインに対応しているので、今回の方法が使えるってわけです。

【便利情報】有志の方が公開したCSSを使う

UserStyles.world」というサイトで、ウェブサイトをカスタマイズしたCSSが無料で公開されています。

自分でCSSを作成するのは難しい!という方は、こちらのサービスを使ってみましょう。

以下のURLからアクセスできます。

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

UserStyles.world Featured userstyles

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

検索窓から好きなサイトを検索できる

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

Search Twitter

試しに、「Twitter tighten sidebar HighProgrammer by alandesmet」をお借りしてみます。サイドバーのメニュー項目の間隔を縮めるようです。

クリックしたら、サムネイル画像下の「Install」をクリックします。

CSSのInstall

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

コードを全選択してコピー

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

Stylus メニュー 管理

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

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

インストール済みスタイル Usercssとしてにチェックを入れる

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

スタイルを追加

下記のようになります。既存のコードを全部削除してから上書きする点がポイントです。

書き込めたら、「保存」をクリックします。

コピーしたコードを貼りつける

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

Twitterのサイドバーメニューがしゅっとなる

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

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

僕?できるわけないじゃないですか、わっはは…。

感想

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

以前まで、Stylebotを使っていたんですが、パネル内では反映されないので、こちらに移行するのもありかもです。

当サイトでは、Twitterを始めとした色々なCSSを紹介しているので、気になったら見てみてください。Stylusでも使いまわしできます。

参考:Stylebot

Posted by ナポリタン寿司