【Twitter】DMの画像・ブログカードのサイズを縮小するCSS

2022年11月19日2023年5月10日X(旧Twitter)

この記事では、PCウェブサイト版「Twitter」にあるダイレクトメッセージ（DM）内の画像、ブログカードを縮小して、スクロール量を減らすCSSについて書きます。

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

「X（旧Twitter）」のダイレクトメッセージ（DM）にあるブログカードと画像サイズを縮小した画像1

本記事で紹介するCSSを使えば、「X（旧Twitter）」のダイレクトメッセージの画像とブログカードを小さくできます。小さくすることで、スクロール量が減ります。DMで頻繁にやりとりしている方、参考にしてみてください。

本記事は、以下の記事の派生版です。

【X】タイムラインの横幅を広げるCSS。画面を有効活用！

この記事では、PCウェブサイト版「X（旧Twitter）」のタイムラインの横幅を広げるCSSについて書きます ...

https://www.naporitansushi.com/twitter-width/

上記記事のように、タイムラインを広げると、画像も一緒に大きくなって、結局スクロール量が増えました。それを解決するために、タイムラインを広げつつ、画像サイズは縮小するという方法を採用しました。この方法の画像サイズ縮小を、DMにも応用してみようという試みです。

タイムライン上に表示される記事リンクの画像サイズを縮小したい場合

以下の記事を参考にしてみてください。他の人がツイートしたブログカードの画像サイズも小さくできます。

Twitterの記事リンクの画像でかくね？小さくすればよくね？

この記事では、Twitterのリンクに添付されている大きなサムネイル画像（OGP）を、小さくする方法につい ...

https://www.naporitansushi.com/twitter-card-layoutlarge-medi...

Twitterの大きなサムネイルカードを小さくするCSSを導入する前と後の比較画像

1. インストール方法
2. DMの画像・ブログカードのサイズを縮小するCSS
3. 感想

インストール方法

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

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

Stylebot

Change the appearance of the web instantly

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

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

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

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

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

DMの画像・ブログカードのサイズを縮小するCSS

「Twitter」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

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

/*【DM】画像のサイズ*/
div[data-testid="DMCompositeMessage"] a[href*="/media/"] {
    max-width: 220px !important;
}

/*【DM】ブログカードのサイズ*/
div[data-testid="DMCompositeMessage"] [data-testid="card.wrapper"]:has([data-testid="card.layoutLarge.media"]) {
    max-width: 200px !important;
}

/*【DM】画像、ブログカードの影削除*/
div[data-testid="DMCompositeMessage"]>div>div {
    box-shadow: none !important;
}

/*【DM】自分が送信したブログカードと画像の位置*/
div[data-testid="messageEntry"]:has(.r-obd0qt) :is(div[data-testid="card.wrapper"]:has([data-testid="card.layoutLarge.media"]),a[href*="/media/"]) {
    position: relative !important;
    right: -11vw !important;
}

Firefoxブラウザでは多分使えない

2022年11月時点だと、Firefoxブラウザでは、「:has」をサポートしていないと思います。Chromeブラウザ（Chromium）だけサポートしていると思います。

「画像のサイズ」の「max-width」で画像サイズを調整できます。もう少し小さくしたいという場合は、「220px」の数値を小さくします。

「ブログカードのサイズ」の「max-width」がブログカードのサイズです。

右上の「×」でスタイルシートを閉じます。