広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

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

2022年4月12日カスタムCSS

「Vivaldi」のアイコン

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

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

「Vivaldi」ブラウザのフィードリーダー内にある日時を大きくした画像

本記事で紹介するCSSを使うことで、Vivaldiのフィード・メールリーダーの件名下に表示される日時を拡大できます。

通常、メールリーダー(vivaldi://mails/)内のタイトル下にある日時は、他のテキストサイズに合わせて、決まったフォントサイズになっています。僕の場合、「13px」になっていました。小さいと感じました。

カスタマイズ前のフィードリーダー内日時画像

設定→外観→「ユーザーインターフェースの拡大率」を調整することで、好きな大きさにできますが、ブラウザ全体の拡大率が変わってしまいます。日時だけ変更することはできません。

CSSを使うことで、日時だけピンポイントに変更できます。サイズだけでなく、色、太字具合も調整できます。

「フィードやメールリーダーをよく利用するけど、作成日時、受信日時の日付が小さくて見えにくい!」という方、参考にしてみてください。書き込んだCSSを削除することで、いつでも元に戻せます。

本文内にあるタイトル下の日時だけです。一覧の右にある日時には影響しません。

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

フィード・メールリーダー内にある日時を大きくするCSS

以下のCSSになります。

/*メール・フィードリーダーの日時*/
.mail-details .mail-detail-item:last-of-type {
  font-size: 25px; /*文字サイズ*/
}

上記CSSを、テキストエディター(Visual Studio Codeや、Windows標準でインストールされているメモ帳アプリなど)でファイルに書き込みます。

「Visual Studio Code」のスクリーンショット

「font-size: 25px;」の数値を調整することで、好きな文字サイズにできます。もっと大きくしたい場合は、「25px」以上の数字にします。全角ではなく、半角数字で入力します。

書き込めたら、上書き保存して、ブラウザを再起動します。メール、あるいはフィードリーダーの一覧ページを開きます。URLだと、「vivaldi://mails/」になります。

差出人の下にある日時が、指定した文字サイズになります。メールリーダーの場合、その上に受信した場所(Gmail)が記載されていますが、そちらは装飾しません。日時のみです。

「Vivaldi」ブラウザのメールリーダー内にある日時を大きくした画像

フィードリーダーの日時も装飾します。いつ届いたか一目で見やすくなります。

「Vivaldi」ブラウザのフィードリーダー内にある日時を大きくした画像2

本文内の日時だけで、一覧の日時はカスタマイズしません。

「Vivaldi」ブラウザのフィードリーダーの一覧画像

フォントサイズだけでなく、文字色・太字を設定する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でした。

些細な点ですが、便利です。フィード関連の記事はいくつか書いているので、気になった方は参考にしてみてください。

2022年4月12日カスタムCSS

Posted by ナポリタン寿司