【Vivaldi】フィード・メールの日時の文字を大きくするCSS

2022年4月12日カスタムCSS

Vivaldiのアイコン

この記事では、VivaldiのオリジナルカスタムUI機能を使って、フィード・メールリーダーの日時を拡大するCSSについて書きます。

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

【Vivaldi】フィード・メールの日時の文字を大きくするCSS

今回紹介するCSSは、「フィード・メールリーダーの本文の件名下に表示される日時を拡大するCSS」です。

通常、メールリーダー(vivaldi://mails/)の本文のタイトル下にある日時は、他のテキストサイズに合わせて、決まったフォントサイズになっています。僕の場合、13pxになっていました。若干小さいです。本記事で紹介するCSSを使うことで、制限を撤廃して、好きなフォントサイズにできます。

Vivaldiのメールリーダーページ 本文のタイトル下にある日時は、少しフォントサイズが小さい

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

メール一覧の日時の文字サイズ変更CSS Visual Studio Code

「font-size: 25px;」の数値を調整することで、好きなサイズにできます。

Vivaldiを再起動して、メールの一覧ページを開きます。URLだと、「vivaldi://mails/」になります。注意点ですが、こちらのページは、1つ目ウィンドウでのみ開けます。2つ以上ウィンドウを開いている場合は注意です。

無事に、本文のタイトル、送信相手下にある日時が指定した文字サイズになっていると思います。「25px」だと結構大きいので、かなり見やすいです。

メールリーダーページの日時の文字サイズが拡大される(25pxにした状態)

適用前と適用後の比較画像も貼っておきます。

メールリーダーの本文の日時拡大CSSの適用前と適用後の比較画像

フィードリーダーページにも反映させる

上記CSSだと、少し困った点があります。フィードページの方は、反映されないということです。あくまでメールの一覧ページのみに反映されます。

詳しく解説すると、少しめんどくさいので省きます。単純に僕の技術不足と思ってくださればなと思います。

「フィードページの日時も拡大させたい!」といった場合は、上記CSSではなく、以下のCSSを使ってみてください。

/*メール・フィード一覧の日時*/
.mail-detail-side .mail-detail-item {
  font-size: 25px; /*文字サイズ*/
}

上記CSSだと、フィードページのタイトル下の日時も拡大されます。

フィード一覧の記事タイトル下の日時も拡大される

ただし、これはこれで少し問題があります。メールリーダーの日時の上にある「Inbox(受信箱)」といったメールの場所を表すテキストも一緒に拡大されてしまうという点です。「別に気にしない」という方は、こちらのCSSでOKかなと思います。

こちらのCSSのデメリット メールリーダーの日時の上にあるテキストも一緒に拡大されてしまう

メールとフィードのCSSのセレクタが区別されているようでされていないので、どうしてもセットで拡大されてしまう…って感じなんですよね。CSSベテランさんになると、どうにか解決策を見出せそうなものですが、僕の力だと無理です。

感想

以上、Vivaldiブラウザのメール・フィードの本文下にある日時のフォントサイズを、好きなサイズに変更するCSSについてでした。

些細な点なんですが、便利です。

Posted by ナポリタン寿司