PCで見ると、Mastodon 4のWebUIが余白が取られ過ぎていて、一覧しにくい問題に対応する

mastodon4-webui-customize.md

PCで見ると、Mastodon 4のWebUIが余白が取られ過ぎていて、一覧しにくい問題に対応する

特にタイムラインの各投稿の上下の余白がバージョン3系と比べて大きいです（該当issue）。これは以下の手順で調整できます。

1. ページのスタイル（CSS）を修正できる、ブラウザ拡張の https://github.com/openstyles/stylus/ を導入する。

2. Mastodon用のスタイル修正CSSが配布されているので、https://userstyles.world/style/7065/compacter-mastodon を導入する。

3. 自分のMatodonサーバーでも使えるように以下のように修正する（該当サーバーのドメインを加える形になります）。

   @-moz-document regexp("https?:\\/\\/(octodon|mastodon|tenforward)\\.social\\/.*") {
   ↓
   @-moz-document regexp("https?:\\/\\/(mstdn\\.jp|(octodon|mastodon|tenforward)\\.social)\\/.*") {

4. 日本語の場合、タイムライン上の投稿のフォントサイズがすこし小さいので、以下のように、下記ブロックの値をすこしカスタマイズすると良いかもしれません。

   .status__content {
       font-size: 15px; /*元は14px */
       line-height: 1.45; /* 元は19px; */
   }

5. Misskey系でよく使われる、横長の絵文字を潰さずに見たい場合には、以下のように、すこしカスタマイズするといいかもしれません。記載場所は23行目あたりに挿入すればOKです。

   .reply-indicator__content .emojione, .status__content .emojione,
   .detailed-status .status__content .emojione {
        width: fit-content;
   }

6. 実際に該当サーバーのMastodonにログインして、このスタイルが追加できているかを確認しましょう。