【Twitter】添付されたメディア画像の表示サイズ調整CSS

​2023年9月14日​Twitter

この記事では、PCウェブサイト版「Twitter」のツイートに添付された画像（動画を除くメディア）の表示サイズを縮小するCSSを書きます。

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

ツイートに添付された画像の表示サイズは、基本的にタイムラインの横幅いっぱいに表示されます。

CSSを使うことで、好きなサイズ（パーセント）に縮小できます。縮小することで、1ページに入る情報量（次のツイートとか）が増えます。きゅっとコンパクトが好きな方にいいかもしれません。

読者様が「これできたらいいなー」とつぶやいているのをエゴサで知ったので、CSSを作成しました。

その際、何回かやりとりして、最終的に、リンクに添付されている画像、引用元ツイート内の画像、2～4枚添付されている画像は除外する…といった、ただ単に画像を縮小するだけでなく、細かい部分で調整するCSSができました。一枚画像と複数枚画像で別々のサイズを指定できます。

自身の環境上で、他人には影響しません。いつでも元に戻せます。本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。拡張機能を利用できるブラウザアプリ（例：Kiwi Browser）などを使えば、もしかしたらできるかもしれません。

インストール方法

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

Stylebot

ウェブの外観を瞬時に変更

 https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

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

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

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

 https://www.naporitansushi.com/stylebot/

Twitterのツイートに添付されている画像を縮小するCSS

「Twitter」にアクセスします。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。もし初めてStylebotを起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。こちらに以下のコードを書き込みます。

/*【画像サイズ】ブログカードのサムネイル、引用元、複数枚を除く全体サイズ*/
div[aria-labelledby*="id"]>div.r-9aw3ui:not(.css-901oao):not(:has(.r-a5pmau)):has(img[alt="画像"]) {
    width: 50% !important;
}

/*【画像サイズ】2～4枚添付されている画像サイズ*/
div[aria-labelledby*="id"]>div.r-9aw3ui:has(.r-a5pmau):has(img[alt="画像"]):not(.css-901oao) {
    width: 70% !important;
}

下記画像のようになればOKです。「width」が横幅です。100%（デフォルト）に対して、どのくらい自分が縮小させたいかで数値を調整しましょう。上記のサンプルCSSだと、1枚だけ画像添付されている場合は50%、複数枚（2～4枚）添付されている場合は、70%にしています。

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

この時、一度Twitterページをリロードします。リロードしないと、縦長画像が見切れるなど、表示に問題が発生する可能性があります。一度リロードすることで、Twitterが表示される前に、書き込んだCSSが発動して、画像サイズを制御してくれるので、うまく縮小された状態で表示されます。

再度拡張機能ボタンを押して、登録したサイト（例：twitter.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。

タイムラインを開いて、ツイート内の画像を探します。指定したサイズに縮小されています。

添付されている画像の枚数によって、縮小率を変えられます。上記のサンプルCSSをそのままコピペした場合、下記画像のようになります。

「いやいや、別に単一だろうが複数だろうが、全部同じ縮小率でいい！」という場合は、同じパーセント数字にします。本当は、複数枚用のCSSを消して、単一用のCSSをちょこっと修正することで、1つだけのCSSで済みます。しかし、僕は余力がないので、ちょっとコードの行数は多いですが、両者とも同じパーセントにすることで、我慢していただければなと思います。

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

動画の表示サイズを調整したい場合

本記事は、画像に特化していて、動画は含めていません。動画も縮小したい場合は、以下の記事を参考にしてみてください。

【Twitter】添付された動画の表示サイズ調整CSS

この記事では、PCウェブサイト版「Twitter」のツイートに添付された動画の表示サイズ（大きさ）を縮小 ...

 https://www.naporitansushi.com/twitter-videoplayer-size-css/

苦戦したこと。作成過程のメモ

引用されている場合、引用元の画像にも反映されちゃう

最初に作成したCSSは、引用ツイートの場合、引用元（されている側）に添付されている画像も、サイズが変わってしまいました。質問してくださった読者様的には、引用元は除外したいとのことだったので、引用元の画像は除外しています。

div[aria-labelledby*="id"]:not([data-testid*="card"]):has(img[alt="画像"][src*="/media/"]) {
    width: 30% !important;
}

1枚添付の時と、2～4枚添付の時でサイズを変える

次に作成したCSSは、添付されている画像の枚数に関わらず、一律で調整するCSSでした。まぁそもそも最初に作成したCSSもそうなっていました。

読者様的には、1枚の時と2～4枚（複数）添付されている時で、サイズを変えたい…ということだったので、別々のCSSに分離することで対応しました。1枚用のCSSでは複数枚を除外しています。

1枚添付画像が見切れる問題

何度かCSSを見直したりしていると、一枚だけ添付されている画像が見切れていることに気づきました。「まじかー。このCSSもダメかー」と悲しくなりました。

別のCSSを作成したり、色々悪戦苦闘しました。最終的に、CSSは合っていました。原因は、CSSを書き込む前の横幅100%の時から、スタイルシートにCSSを書いた時、まだ100%とTwitter側が勘違いして、見切れているだけでした。

一度ページをリロードすることで、最初からStylebotに書き込んだCSSが発動してくれて、その横幅に合った画像サイズで表示してくれました。ドジですね。CSSは即反映されるって思いがちですが、案外ページをリロードしないと、正確に動作しない時があります。

以下のように、「width」を「auto」で自動調整するCSSを書き込んだり、色々な選択肢を模索していました(笑)

div[aria-labelledby*="id"]:not(:is([data-testid*="card"], :has(:is(.r-a5pmau, .r-adacv.r-1ny4l3l.r-1udh08x.r-o7ynqc.r-6416eg, div[id^="id__"])))):has(img[alt="画像"]) {
    width: 40% !important;

    & div[style^="height"][style*="width"] {
        width: auto !important;
    }
}

引用リツイート+画像投稿の時、画像に適用されない

初期段階のCSS修正時に、引用リツイートを除外したつもりでした。しかし、さらなる改良をした段階で、引用リツイートだった場合、引用元だけでなく、引用した側に添付されている画像も除外するようになっていました。

div[aria-labelledby*="id"]:not(:is([data-testid*="card"], :has(:is(.r-a5pmau, .r-adacv.r-1ny4l3l.r-1udh08x.r-o7ynqc.r-6416eg, div[id^="id__"])))):has(img[alt="画像"]) {
    width: 40% !important;
}

あくまで、引用元内の画像だけ除外して、引用リツイート内の画像は縮小しないと少し不自然に思えました。

この時既に、改良につぐ改良のせいで、どんどんCSSが肥大化、見にくくなっていました。「これじゃーダメだ」ということで、一度CSSを見直して、再作成しました。

改良→改良→改良…と、つぎ足すのではなく、一から再作成したことで、根本的にCSSが間違っていることに気づけました。この表現が伝わるか分かりませんが、CSSの階層が一つ上に設定されていたことで、引用リツイートだけでなく、引用元にも反映されるようになっていました。引用リツイートだけの階層に設定することで、余計なコードを書かなくても、自動的に引用元は適用外になりました。

アホすぎて「:is」の使い方間違っていた

最近CSSをまとめる「:is」を知って、めっちゃ使うようになりました。ある程度の使い方は知っていたつもりでしたが、まだまだ初心者すぎて、今回の場合、使い方を間違っていました。

本来分岐させたらいけない場所で、分岐させてしまっていました。「is」で囲んだ中に書いたAとBのセレクタの両方がある場合に、発動させる…という「and」みたいな使い方をしていました。

今後、自分が本記事を見返した時に、「あほだなぁ」と思いたいため、簡単な例を書いておきます。

div:is(.naporitan,.sushi)>div {
    width: 70%;
}

上記のCSSを分解すると、以下のようになります。簡単なCSSにすると、理解しやすいです。

div.naporitan>div {
    width: 70%;
}

div.sushi>div {
    width: 70%;
}

しかし、僕は、以下のようなCSSを期待していました。この場合、普通に以下のように書けばいいのに、なぜか「:is」で囲んでいた…そんな感じのミスをしていました。

div.naporitan.sushi>div {
    width: 70%;
}

感想

以上、PCウェブサイト版「Twitter」のツイートに添付された画像（動画を除くメディア）の表示サイズを縮小するCSSでした。

Twitter関連のCSSは、色々書いているので、ページ内検索や、カテゴリーで絞り込み機能などを活用して、当サイトを漁っていただけると嬉しいです。あくまで個人が適当に作成しただけなので、不具合とかうまく動作しないこともあると思いますけど…。

1ページに入る情報量を増やす…という意味では、以下のような記事たちも役立つかもしれません。

• 【Twitter】上部のリストタブの高さを調整するCSS
• 【Stylebot】Twitterの横幅を広げるCSS。画面を有効活用！
• 【Twitter】タイムライン上部のツイート欄を非表示にするCSS
• 【Twitter】「〇〇さんがリツイートしました」を非表示にするCSS
• 【Twitter】タイムラインから引用リツイートを非表示にするCSS
• 【Twitter】特定のリストタイムラインにある返信非表示CSS
• 【Twitter】引用ツイートページの引用元を非表示にするCSS
• Twitterの記事リンクの画像でかくね？小さくすればよくね？