SNS「Bluesky」の日本語版の投稿ボタンのデザインが崩れていたのでCSSで修正してみた

分散型SNS「Bluesky」の日本語版のWebの投稿ボタンのデザインが崩れていたのであらゆるサイトにCSSを適用できるGoogle Chrome拡張機能「Stylus」で修正してみたので、やり方を解説していきたいと思う。

■注意点

これはあくまで日本語の修正が来るまでの応急処置だ。もしこのCSSを適用してデザインが崩れてしまっていたのならアプデで投稿ボタンの修正が来たときかもしれない。その点を確認することを忘れないようにしよう。

１：ダウンロード

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

２：Blueskyに移動する

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

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

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

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

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

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

/* 投稿ボタンのスタイルが崩れる問題を修正 */
#root > div > div > div > div.css-175oi2r.r-1pi2tsx > div.css-175oi2r.r-pgf20v.r-1rnoaur.r-u8s1d.r-c6jqw7.r-1ki14p2.r-1w88a7h > button{
  padding: 12px 14px 12px 14px;
}

/* 戻るボタンが小さくなってしまう問題を修正 */
.r-199wky7{
    width: 50px;
}

.r-1g7fiml{
    height: 50px;
}

５：保存をクリックする

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

６：投稿ボタンのデザインの修正を確認して終了

投稿ボタンのデザインが修正されていることを確認して終了する。