【CSS】Chrome拡張機能「Stylus」でSNS「Bluesky」のタイムラインのユーザー名の横に認証済みバッジを付ける方法【一部不具合あり】

今回はCSSをカスタマイズ出来るGoogle Chromeの拡張機能「Stylus」で分散型SNS「Bluesky」のタイムラインのユーザー名の横に認証済みバッジを付ける方法を書いていこうと思う。

■注意点

これは誰か特定の人のアカウントに認証済みバッジを付けるのはなく、全部のアカウントに付ける方法だ。そこのところ、勘違いしないようにして欲しい。

Xにもある個人の青い認証済みバッジを付けるには

まず最初に、Xにもある青い認証済みバッジを付ける方法を解説する。

１：ダウンロード

StylusをChromeストアからダウンロードする。

２：Blueskyに移動する

Blueskyのトップページに移動する。

３：Stylusのアイコンを左クリックし、ドメインにカーソルを合わせながらクリック

Stylusのアイコンを左クリックし、次のスタイルを書くの下のbsky.socialにカーソルを合わせながら左クリックする。

※このURLのところにはカーソルを合わせないようにしよう。

４：CSSをコピーして貼り付ける

以下のCSSをコードのところにコピーして貼り付ける。

span:before{
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  background-image: url(https://i.imgur.com/ZlfS0Z4.png);
  background-size: contain;
  vertical-align: middle;
}

５：保存をクリックする

左上の保存をクリックする。

６：認証済みバッジの反映を確認して終了

認証済みバッジの反映を確認して終了する。

■ただし不具合も…

ただし不具合もある。それは、プロフィールページのpostsの左などに認証済みバッジが表示されてしまうことだ。

Xにある企業のゴールドの認証済みバッジを付けるには

Xにある企業のゴールドの認証済みバッジを付けるには、StylusのコードのCSSを以下に書き換えると良い。

span:before{
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  background-image: url(https://i.imgur.com/RoR6yHc.png);
  background-size: contain;
  vertical-align: middle;
}

Xにある政府の灰色の認証済みバッジを付けるには

こちらも先程と同様でコードを書き換えると良い。

span:before{
  content: '';
  display: inline-block;
  width: 17px;
  height: 17px;
  background-image: url(https://i.imgur.com/Z64aoWn.png);
  background-size: contain;
  vertical-align: middle;
}