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

​​Vivaldi Social

「Vivaldi Social」のアイコン

この記事では、「Vivaldi Social」のトゥート（投稿）の下に表示される日時、ブースト数、お気に入り数などのメタ情報を、大きく見やすくする方法について書きます。

設定からは変更できないので、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

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

本記事で紹介するCSSを使えば、「Vivaldi Social（ヴィヴァルディ・ソーシャル）」のトゥート（投稿）下のメタ情報を大きく見やすくできます。好きな文字サイズ、文字色を設定できます。

通常、ダークテーマの場合、下記画像のように表示されています。小さくて見にくいです。

「Vivaldi Social（ヴィヴァルディ・ソーシャル）」のトゥートの下にあるメタ情報画像

設定から変更できるかなと思い、調べてみたのですが、それっぽい項目が見つからなかったため、CSSを使って自分で変えてみます。

「文字が小さくて見えにくい！だけど、ページ全体をズームするのは嫌だ！メタ情報だけ拡大したい！」という方、参考にしてみてください。いつでもオンオフできます。CSSを理解できていなくても多分できます。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

本記事は、「Vivaldi Social」画面での解説ですが、恐らく他のインスタンスでも同じです。Mastodon（マストドン）ベースなら一緒だと思います。検証していないので確証は持てませんけどね。

「Vivaldi Social」については、以下の記事を参考にしてみてください。2022年11月からサービス開始したSNSです。

インストール方法

ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。

「Chromeに追加」をクリックしてインストールします。

Stylebot - Chrome ウェブストア

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

ブースト・お気に入り数を大きく見やすくするCSS

「Vivaldi Social」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*投稿のメタ情報（日時、ブースト、お気に入り数など）*/
.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」が文字サイズです。数字を大きくすることで、より大きくなります。

書き込めたら、右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト（例：social.vivaldi.net）がオンになっていることを確認します。オンになっている間は有効になっているということです。

これで指定した文字サイズ・色になります。上記コードを丸々コピペした場合は、以下のようになります。ブースト数（リツイート）とお気に入り数（いいね）の数字が、どかーんと大きくなって見やすくなります。

トゥート下にあるメタ情報をカスタマイズした画像1

「文字色は変えなくていい！」という場合は、「color」の行を書き込まないようにします。

/*投稿のメタ情報（日時、ブースト、お気に入り数など）*/
.detailed-status__meta {
  font-size: 20px; /*フォントサイズ*/
}

/*投稿のブースト、お気に入り数*/
.detailed-status__favorites, .detailed-status__reblogs {
  font-size: 30px; /*フォントサイズ*/
  line-height: 30px; /*高さ*/
}
トゥート下にあるメタ情報をカスタマイズした画像2

一時的に無効化したい場合は、Stylebot→「social.vivaldi.net」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、「Vivaldi Social」のトゥート（投稿）の下に表示される日時、ブースト数、お気に入り数などのメタ情報を、大きく見やすくする方法（CSS）でした。

以下の記事もおすすめです。

​​Vivaldi Social