【Vivaldi】フィード・メールの日時の文字を大きくするCSS
本記事で紹介するCSSを使うことで、Vivaldiのフィード・メールリーダーの件名下に表示される日時を拡大できます。
通常、メールリーダー（vivaldi://mails/）内のタイトル下にある日時は、他のテキストサイズに合わせて、決まったフォントサイズになっています。僕の場合、「13px」になっていました。小さいと感じました。
設定→外観→「ユーザーインターフェースの拡大率」を調整することで、好きな大きさにできますが、ブラウザ全体の拡大率が変わってしまいます。日時だけ変更することはできません。
CSSを使うことで、日時だけピンポイントに変更できます。サイズだけでなく、色、太字具合も調整できます。
「フィードやメールリーダーをよく利用するけど、作成日時、受信日時の日付が小さくて見えにくい！」という方、参考にしてみてください。書き込んだCSSを削除することで、いつでも元に戻せます。
本文内にあるタイトル下の日時だけです。一覧の右にある日時には影響しません。
本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/vivaldi-css/フィード・メールリーダー内にある日時を大きくするCSS
以下のCSSになります。
/*メール・フィードリーダーの日時*/
.mail-details .mail-detail-item:last-of-type {
font-size: 25px; /*文字サイズ*/
}上記CSSを、テキストエディター（Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど）でファイルに書き込みます。
「font-size: 25px;」の数値を調整することで、好きな文字サイズにできます。もっと大きくしたい場合は、「25px」以上の数字にします。全角ではなく、半角数字で入力します。
書き込めたら、上書き保存して、ブラウザを再起動します。メール、あるいはフィードリーダーの一覧ページを開きます。URLだと、「vivaldi://mails/」になります。
差出人の下にある日時が、指定した文字サイズになります。メールリーダーの場合、その上に受信した場所（Gmail）が記載されていますが、そちらは装飾しません。日時のみです。
フィードリーダーの日時も装飾します。いつ届いたか一目で見やすくなります。
本文内の日時だけで、一覧の日時はカスタマイズしません。
フォントサイズだけでなく、文字色・太字を設定するCSS
フォントサイズだけでなく、好きな色にしたり、太字にしたりできます。
/*メール・フィードリーダーの日時*/
.mail-details .mail-detail-item:last-of-type {
font-size: 25px; /*文字サイズ*/
color: rgb(255, 0, 0); /*文字色*/
font-weight: bold; /*太字*/
}「color」が文字色、「font-weight」が太字です。色は、HTMLカラーコードで指定します。こちらのサイトで調べられます。
太字だけしたい場合は、「font-weight」だけ書き込みます。
/*メール・フィードリーダーの日時*/
.mail-details .mail-detail-item:last-of-type {
font-weight: bold; /*太字*/
}感想
以上、「Vivaldi（ヴィヴァルディ）」ブラウザのメール・フィードの日時を、好きなサイズに変更するCSSでした。
些細な点ですが、便利です。フィード関連の記事はいくつか書いているので、気になった方は参考にしてみてください。