【Vivaldi Social】左下のキャラクター(トニー)の非表示方法

Vivaldi

「Vivaldi Social」のアイコン

この記事では、「Vivaldi Social」の表示を「上級者向けUIを有効にする」にした時、左下に表示される「トニー(Tony)」マスコットキャラクターを非表示にする方法について書きます。

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

「Vivaldi Social」の左下に表示されている「トニー(Tony)」画像

本記事で紹介するCSSを使えば、「Vivaldi Social(ビバルディ ソーシャル)」の上級者向けUIに表示されるVivaldiマスコットキャラクター「トニー(Tony)」を非表示にできます。

「上級者向けUI」を使っていたら、左下に可愛らしいキャラクターが表示されます。Vivaldiのマスコットであるトニー君です。溶岩の玉がモチーフになっています。

最初は、可愛らしくていいなと思ったんですが、結構大きくて、赤色で目立つので、どうしても目の端に入ってしまいました。悪い言い方をすると、目障りになりました。

設定から非表示にできるかなと思い、調べてみたのですが、それっぽい項目が見つかりませんでした。もし標準の設定から非表示にできるなら、教えていただければなと思います。

そこで、CSSを使って非表示にしてみます。非表示ではなく、小さくする方法、色を薄くする方法も紹介します。

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

本記事は、「Vivaldi Social」画面での解説ですが、恐らく他のインスタンスでもできます。実際に「mstdn.jp」で試してみましたが、非表示になりました。マストドンのインスタンスによって表示されるキャラは違いますが、削除できます。

本記事は、UIを上級者向けにしている方向けです。ユーザー設定→外観→「上級者向けUIを有効にする」をオンにすると、カラム表示にできます。通常のレイアウトだとそもそも表示されないと思います。

「Vivaldi Social」の外観設定画面

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

Vivaldi Socialの左下にあるキャラクター(トニー)を非表示にするCSS

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

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

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

/*Vivaldiキャラクター非表示*/
.drawer__inner__mastodon {
  display: none !important;
}

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

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

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

これで、トニー君が非表示になります。

「Vivaldi Social」の左下に表示されている「トニー(Tony)」を非表示にした画像

「mstdn.jp」でも試してみました。スタイルシートを開いて、同じコードを書き込みます。これで、ゾウさんみたいなキャラが消えました。

「mstdn.jp」のマスコットキャラを非表示にする前と後の比較画像

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

非表示ではなく、サイズを小さく&色を薄くする方法

「非表示にするのはちょっと申し訳ないから、目立たないようにサイズを小さくして、色も薄くしたい!」という方は、代わりに以下のコードを使ってみてください。

/*Vivaldiキャラクターを小さく&薄くする*/
.drawer__inner__mastodon {
  transform: scale(0.5); /*サイズ(小数点)*/
  position: relative;
  right: 5em; /*位置*/
  top: 9em; /*位置*/
  opacity: 0.4; /*透明度*/
}

「transform」で大きさを調整できます。「1」が通常のサイズで、それ以下にすると小さくできます。上記CSSだと、「0.5」=通常サイズから半分の大きさにするということです。

「opacity」が透明度です。「0」に近づけると、より透明になります。

「Vivaldi Social」の左下に表示されている「トニー(Tony)」を小さく&薄くした画像

感想

以上、「Vivaldi Social」の上級者向けUIにしている時、左下に表示される「トニー(Tony)」を非表示にする、あるいは小さく&薄くする方法(CSS)でした。

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

Posted by ナポリタン寿司