【Vivaldi Social】ブースト・お気に入り数を大きく見やすくする

この記事では、「Vivaldi Social」のトゥート(投稿)の下に表示される日時、ブースト数、お気に入り数などのメタ情報を、大きく見やすくする方法について書きます。
設定からは変更できないので、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、「Vivaldi Social(ヴィヴァルディ・ソーシャル)」のトゥート(投稿)下のメタ情報を大きく見やすくできます。好きな文字サイズ、文字色を設定できます。
通常、ダークテーマの場合、下記画像のように表示されています。小さくて見にくいです。

設定から変更できるかなと思い、調べてみたのですが、それっぽい項目が見つからなかったため、CSSを使って自分で変えてみます。
「文字が小さくて見えにくい!だけど、ページ全体をズームするのは嫌だ!メタ情報だけ拡大したい!」という方、参考にしてみてください。いつでもオンオフできます。CSSを理解できていなくても多分できます。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
本記事は、「Vivaldi Social」画面での解説ですが、恐らく他のインスタンスでも同じです。Mastodon(マストドン)ベースなら一緒だと思います。検証していないので確証は持てませんけどね。
「Vivaldi Social」については、以下の記事を参考にしてみてください。2022年11月からサービス開始したSNSです。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
ブースト・お気に入り数を大きく見やすくするCSS
「Vivaldi Social」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*投稿のメタ情報(日時、ブースト、お気に入り数など)*/
.detailed-status__meta {
color: #000000; /*文字色*/
font-size: 20px; /*フォントサイズ*/
}
/*投稿のブースト、お気に入り数*/
.detailed-status__favorites, .detailed-status__reblogs {
font-size: 30px; /*フォントサイズ*/
line-height: 30px; /*高さ*/
}
「投稿のメタ情報(日時、ブースト、お気に入り数など)」と「投稿のブースト、お気に入り数」で分かれています。前者はメタ情報の行で、後者は数字を指しています。
「color」が色です。HTMLカラーコードで指定できます。こちらのサイトで調べられます。上記CSSの「#000000」だと、黒色にするという意味になります。
「font-size」が文字サイズです。数字を大きくすることで、より大きくなります。
書き込めたら、右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト(例:social.vivaldi.net)がオンになっていることを確認します。オンになっている間は有効になっているということです。
これで指定した文字サイズ・色になります。上記コードを丸々コピペした場合は、以下のようになります。ブースト数(リツイート)とお気に入り数(いいね)の数字が、どかーんと大きくなって見やすくなります。

「文字色は変えなくていい!」という場合は、「color」の行を書き込まないようにします。
/*投稿のメタ情報(日時、ブースト、お気に入り数など)*/
.detailed-status__meta {
font-size: 20px; /*フォントサイズ*/
}
/*投稿のブースト、お気に入り数*/
.detailed-status__favorites, .detailed-status__reblogs {
font-size: 30px; /*フォントサイズ*/
line-height: 30px; /*高さ*/
}

一時的に無効化したい場合は、Stylebot→「social.vivaldi.net」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
感想
以上、「Vivaldi Social」のトゥート(投稿)の下に表示される日時、ブースト数、お気に入り数などのメタ情報を、大きく見やすくする方法(CSS)でした。
以下の記事もおすすめです。