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

カスタムCSS

Vivaldiのアイコン

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

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

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

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

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

Vivaldi設定:フィード ニュースフィードアカウントが見にくい

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

オリジナルカスタムUI(CSS)を使うには?

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

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

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

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

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

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

CSS

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

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

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

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

設定のフィード一覧の横幅、縦幅のサイズを調整するCSS Visual Studio Code

書き込んだら、Vivaldiを再起動します。設定を開いて、フィード項目を確認してみます。無事に、ニュースフィードアカウントの横幅、縦幅が広がっています。

Vivaldi設定:フィード ニュースフィードアカウントが見やすくなる

本記事のCSSは、設定をタブで開く場合、別ウィンドウで開く場合、どちらでも使えます。

デフォルトでは、横幅サイズが「max-width: 219px;」になっています。これは、「どれだけディスプレイ(パソコンのモニター)が大きくても、最大で219pxしか広げないよ」ということです。

これを上書きして、「max-width: none !important;」としています。これは、横幅サイズの上限を撤廃するという意味です。常に横幅いっぱいに表示されるようになります。

「【設定のフィード一覧】高さのサイズ」の「height: 600px」の数値は、自分の好きなように調整できます。デフォルトは、200か300になっていると思うので、大体3倍くらい広げるということです。高さいっぱいに表示させたい場合は、「height: none」にします。

感想

以上、Vivaldiのフィード項目の「ニュースフィードアカウント」のサイズを調整するCSSについてでした。

もしかすると、フィード項目以外のどこかに影響されて、表示崩れを起こしている場合があります。その場合、問い合わせなどから教えてくださればなと思います。僕はCSS初心者なので、分からないことの方が多いと思いますが…。

Posted by ナポリタン寿司