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

2022年11月19日Vivaldi Social

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

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

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

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

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

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

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

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

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

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

【Vivaldi Social】MastodonベースのSNSの登録・使い方

この記事では、2022年11月に開始された「Mastodon（分散型SNS）」ベースのSNS「Vivaldi Social（ヴィヴ ...

https://www.naporitansushi.com/vivaldi-social/

1. インストール方法
2. ブースト・お気に入り数を大きく見やすくするCSS
3. 感想

インストール方法

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

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

Stylebot

ウェブの外観を瞬時に変更

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

Firefox・Edgeをご利用の場合

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

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

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

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

https://www.naporitansushi.com/stylebot/

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

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

右側に白紙のサイドバーが表示されます。もし初めて「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; /*高さ*/
}