【Vivaldi】フィード一覧の記事タイトルの文字色を変更するCSS
本記事のCSSを使うことで、フィード・メールリーダー（vivaldi://mails/）にある未読タイトルの文字色を変更できます。
通常は、テーマの「ハイライト」の色が適用されます。「フィードタイトルの文字色だけ、個別に変更したい！」といった場合に不便です。
設定→テーマ→エディター→「ハイライト」の色を変更することで、別の色にできますが、他のリンク色なども変わってしまいます。未読タイトルだけの変更はできません。
CSSを使うことで、黒、青、赤、緑といったように、好きな色にできます。ハイライト色ではなく、前景色に合わせる…といったことも可能です。
本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/vivaldi-css/メール・フィードについては、以下の記事を参考にしてみてください。
フィード一覧の未読タイトルを別の文字色にするCSS
以下のCSSになります。
/*フィード一覧タイトル*/
#mail_view .vivaldi-tree .tree-row:not([data-selected]) .unseen {
color: #000000 !important; /*好きな色を指定する*/
}「#000000」の部分を、好きなHTMLカラーコードに置き換えます。「#000000」の場合は、黒になります。HTMLカラーコードは、こちらのサイトで調べられます。
| #mail_view .vivaldi-tree .tree-row:not([data-selected]) .unseen | メール・フィードビューの未読タイトル（件名） |
| color | 文字色を変更する |
| !important | 優先的に適用する |
上記のCSSを、テキストエディター（Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど）でファイルに書き込みます。
書き込めたら、上書き保存して、ブラウザを再起動します。
フィードの一覧ページを開きます。フィードパネル→「フィード」で開けます。
指定した文字色に変わっています。未読メッセージのタイトルだけを変えます。既読しているメッセージは変えません。
HTMLカラーコードで好きに指定できます。
テーマの前景色に合わせる
テーマの前景色にしたい場合は、以下のCSSになります。
/*フィード一覧タイトル*/
#mail_view .vivaldi-tree .tree-row:not([data-selected]) .unseen {
color: var(--colorFg) !important; /*前景色に合わせる*/
}自身が使っている前景色に応じて変化します。前景色は、文字色で利用されています。既読メッセージと同じ色になります。
前景色は、設定→テーマから確認できます。
感想
以上、「Vivaldi」ブラウザのフィード一覧にある未読記事タイトルを好きな文字色にするCSSでした。
フィード関連の記事は、他にも書いているので、気になった方は参考にしてみてください。