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

カスタムCSS

Vivaldiのアイコン

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

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

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

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

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

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

フィード一覧 記事タイトルは、テーマのハイライトが適用される

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

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

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

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標準でインストールされているメモ帳アプリなど)でファイルに書き込みます。

フィード・メール一覧タイトルのCSS Visual Studio Code

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

フィードパネルのスクリーンショット

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

フィードの記事タイトルの文字色変更CSSの適用前と適用後の比較画像

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

フィードの記事タイトルを、緑色、水色にしてみた画像

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

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

メールリーダーの件名の文字色は、テーマの「前景」色になる

以下のCSSになります。

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

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

フィードリーダーの記事タイトルの文字色を「前景」と同じ色にしてみた画像

感想

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

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

Posted by ナポリタン寿司