twitterのUI (Pixiv Fanbox)

twitterが旧UIを完全廃止するようなので新UIに移行するために準備をしてるんですが、なにかと改悪されている部分が多い中、一番我慢がならない画像表示の狭さについてなんとかしようというトピックです。

従来の半分程度の表示域しかないのにキャラクターの画像は多くが縦長です、つまりトリミングされ絵のすばらしさが損なわれて見えるわけで非常に問題です。（日常絵かと思ったら実は下半身がたいへんエッチだったり！）

表示を書き換えるのにブラウザの拡張機能のStylusを使います。Firefoxもchromeもありますので導入してみましょう。入れたらStylus拡張機能の管理編集画面を開き、新スタイルを作成ボタンを押します。

編集画面でURLを指定して3つスタイルを定義しますが、それぞれの効果を説明していきます。

--------------ここから--------------

div[style="padding-bottom: 56.25%;"] {

padding-bottom: 100%!important;

}

div[aria-label="画像"] {

margin: auto!important;

}

div[aria-label="画像"] > div {

background-size: contain;

}

--------------ここまで--------------

一番上は画像の表示域を拡張するものです。デフォルトでは縦を56.25％に狭められているのですが、これを正方形に近い形にします。

二番目は画像がトリミングされる位置をtwitterはその画像ごとに自動で移動させてますが、それを無効にします。画像認識でなるべく重要そうな部分が含まれるようにしてるんだと思いますが、これが細長い画像だと変な位置でうつってたりするので中央寄りにします。

三番目は画像が画面に収まるようにリサイズします。通常は画面いっぱいに収まる短辺に合わせて表示されていますが、収まる長辺に合わせます。これも一長一短で、極端に細長い画像だと全容を表示できる代わりに余白が多く表示されてしまいます。

終わったら保存しましょう。2と3を導入するのは見え方が一長一短なので、とりあえず表示域だけ広くしたい場合は一つ目のものだけ、表示方法も変えたい場合は1+2か1+2+3を好みで導入してみてください。

これらはtwitterのCSS仕様が突如変わるかもしれませんのであくまで無保証となります、参考までにしてください。表示がなんだかおかしくなったらこれを思い出して削除してください。

もっと良い方法をご存知の方がいたらぜひ教えてください！