【Vivaldi】フィード・メールの日時の文字を大きくするCSS
今回紹介するCSSは、「フィード・メールリーダーの本文の件名下に表示される日時を拡大するCSS」です。
通常、メールリーダー（vivaldi://mails/）の本文のタイトル下にある日時は、他のテキストサイズに合わせて、決まったフォントサイズになっています。僕の場合、13pxになっていました。若干小さいです。本記事で紹介するCSSを使うことで、制限を撤廃して、好きなフォントサイズにできます。
「Vivaldiブラウザに標準内蔵されているフィードやメールリーダーをよく利用するけど、作成日時、受信日時などの日付が小さくて見えにくい！」という方、試してみてください。元に戻す時は、書き込んだCSSを削除するだけです。
あくまで、本文のタイトル下の日時だけで、一覧の右にある日時には影響されません。
本記事は、既にオリジナルカスタムUI機能が有効になっている前提です。まだ有効にしていないという方は、以下の記事を参考にしてみてください。
CSS
本記事で紹介するCSSは、2種類あります。好きな方を使ってみてください。
メールリーダーの日時のみ拡大
以下のCSSになります。下記のCSSは、メールリーダーの日時のみ拡大します。フィードページの日時には反映されません。
/*メール一覧の日時*/
.mail-detail-side .mail-detail-item:nth-child(2) {
font-size: 25px; /*文字サイズ*/
}上記のCSSを、テキストエディター（Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど）でファイルに書き込みます。
「font-size: 25px;」の数値を調整することで、好きなサイズにできます。
Vivaldiを再起動して、メールの一覧ページを開きます。URLだと、「vivaldi://mails/」になります。注意点ですが、こちらのページは、1つ目ウィンドウでのみ開けます。2つ以上ウィンドウを開いている場合は注意です。
無事に、本文のタイトル、送信相手下にある日時が指定した文字サイズになっていると思います。「25px」だと結構大きいので、かなり見やすいです。
適用前と適用後の比較画像も貼っておきます。
フィードリーダーページにも反映させる
上記CSSだと、少し困った点があります。フィードページの方は、反映されないということです。あくまでメールの一覧ページのみに反映されます。
詳しく解説すると、少しめんどくさいので省きます。単純に僕の技術不足と思ってくださればなと思います。
「フィードページの日時も拡大させたい！」といった場合は、上記CSSではなく、以下のCSSを使ってみてください。
/*メール・フィード一覧の日時*/
.mail-detail-side .mail-detail-item {
font-size: 25px; /*文字サイズ*/
}上記CSSだと、フィードページのタイトル下の日時も拡大されます。
ただし、これはこれで少し問題があります。メールリーダーの日時の上にある「Inbox（受信箱）」といったメールの場所を表すテキストも一緒に拡大されてしまうという点です。「別に気にしない」という方は、こちらのCSSでOKかなと思います。
メールとフィードのCSSのセレクタが区別されているようでされていないので、どうしてもセットで拡大されてしまう…って感じなんですよね。CSSベテランさんになると、どうにか解決策を見出せそうなものですが、僕の力だと無理です。
感想
以上、Vivaldiブラウザのメール・フィードの本文下にある日時のフォントサイズを、好きなサイズに変更するCSSについてでした。
些細な点なんですが、便利です。