【Vivaldi】フィード一覧の記事タイトルの文字色を変更するCSS

2022年4月12日カスタムCSS

この記事では、VivaldiのオリジナルカスタムUI機能を使って、フィードリーダーのタイトルの文字色を変更するCSSについて書きます。

本記事は、オリジナルカスタムUIが有効になっている前提です。詳しくは、こちらを参考にしてみてください。

Vivaldiブラウザのフィード一覧の（vivaldi://mails/）タイトルの文字色は、CSSを使うことで変更できます。

通常は、テーマの「ハイライト」の色が適用されます。しかし、「フィードタイトルの文字色だけを個別に変更したい！」といった方がいるかもしれません。

僕の場合、桜のテーマでハイライトを「#e59538」にしているんですが、フィードのタイトル文字色が、少し見えにくいです。だけど、他のリンクの色はこのままオレンジ色を使いたいです。

そんな時は、フィードのタイトル文字色だけをピンポイントで変更してみましょう。CSSを使うことで、黒、青、赤、緑といったように、好きな色に変更できます。メールリーダーの件名の文字色に合わせる…といったことも可能です。

本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。

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

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

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

メール・フィードについては、以下の記事を参考にしてみてください。

【Vivaldi】4.0登場！新機能メール・カレンダー・フィードの使い方

この記事では、2021年6月9日に大型アップデートしたVivaldi4.0のアップデート方法・新機能の翻訳、メー ...

 https://www.naporitansushi.com/vivaldi4-0/

CSS

以下のCSSになります。

/*フィード一覧タイトル*/
#mail_view .vivaldi-tree .tree-row:not([data-selected]) .unseen {
  color: #000000 !important; /*好きな色を指定する*/
}

「#000000」の部分を、好きなHTMLカラーコードに置き換えます。「#000000」の場合は、黒になります。HTMLカラーコードは、こちらのサイトで調べられます。

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

Vivaldiを再起動して、フィードの一覧ページを開きます。フィードパネル→フィードで開けます。

変更前はオレンジ色でしたが、（僕のテーマの場合）変更後は、黒色になっています。

HTMLカラーコードで好きに指定できるので、緑、水色といったように自由にカスタマイズできます。

メールリーダーの文字色と合わせる

メールリーダー（vivaldi://mails/）のメールの件名は、テーマの「前景」の色になっています。こちらの色を、フィードの記事タイトルにも反映させることができます。

以下のCSSになります。

/*フィード一覧タイトル*/
#mail_view .vivaldi-tree .tree-row:not([data-selected]) .unseen {
  color: var(--colorFg) !important; /*メール一覧の件名文字色に合わせる*/
}

僕の場合は、前景を「#4f4040」にしているので、フィードのタイトルも同じ色になります。自身が使っている前景の色に応じて変化します。

感想

以上、Vivaldiブラウザのフィード一覧の記事タイトルの文字色を変更するCSSについてでした。

めちゃんこ余談ですが、フィードの「記事を開く」ボタン、改善されてほしいです。ショートカットキーの実装なり、ページの一番上に配置できるオプションなり、何かしら改善が入っていいような気がします。これを望んでいるのは、僕だけですかね～。