【Vivaldi】設定のフィードリストの横幅、縦幅を広げるCSS

2022年4月7日カスタムCSS

この記事では、VivaldiのオリジナルカスタムUI機能を使って、設定のフィード項目にある「ニュースフィードアカウント」の横幅、縦幅を広げるCSSについて書きます。

広げることで、見やすくなります。

Vivaldiブラウザの設定にある「ニュースフィードアカウント」の一覧を見やすくするCSSです。CSSを使うことで、自分の好きな高さ、横幅を指定できます。

デフォルトでは、「max-width: 219px;」、「height: 300px;」になっています。この状態だと、購読しているフィードのURLが見切れたり、下までスクロールするのが大変だったりと使いにくいです。

自分で上書きして調整することで、見やすくなります。

1. オリジナルカスタムUI（CSS）を使うには？
2. CSS
3. 感想

オリジナルカスタムUI（CSS）を使うには？

この記事では、オリジナルカスタムUIが有効になっていることを前提に書きます。

自分で書いたCSSでブラウザの外観を好きなようにカスタマイズできる機能です。デフォルトではオンになっていないので、設定でオンにする必要があります。

CSSと呼ばれるプログラミング言語をある程度理解している必要がありますが、使いこなせれば、自由にブラウザを好みの外観に変更できます。

有効にしていないという方は、以下の記事を参考にしてみてください。

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

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

https://www.naporitansushi.com/vivaldi-css/

いくつかテーマ関連のCSSコードのサンプルを、以下の記事に書いています。

気になった方は、合わせて参考にしてみてください。色々な部分の背景色を透明化したりできます。

【Vivaldi】テーマをCSSでカスタマイズ。もっともっと桜色に！

この記事では、ウェブブラウザVivaldiのオリジナルカスタムUI機能を使って、テーマをカスタマイズする ...

https://www.naporitansushi.com/css-cherry-blossom/

CSS

CSSは、以下になっています。

/*【設定のフィード一覧】横幅のサイズ*/
.master-detail .master, .MailAccountSheet .master {
  max-width: none !important;
}

/*【設定のフィード一覧】高さのサイズ*/
.master-detail, .MailAccountSheet {
  height: 600px !important;
}

上記のCSSを、テキストエディター（Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど）でファイルに書き込みます。以下の感じです。