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

Twitter

Twitterのアイコン

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

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

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

本記事で紹介するCSSを使えば、「Twitter」のダイレクトメッセージの画像とブログカードを小さくできます。小さくすることで、スクロール量が減ります。

DMで頻繁にやりとりしている方、ぜひ参考にしてみてください。

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

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

この方法の画像サイズ縮小を、DMにも応用してみようという試みです。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

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

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

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

Stylebot - Chrome ウェブストア

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

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

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

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

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

/*【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;
}

/*【DM】自分が送信したブログカードと画像の位置*/
div[data-testid="messageEntry"]:has(.r-obd0qt) div[data-testid="card.wrapper"],
div[data-testid="messageEntry"]:has(.r-obd0qt) a[href*="/media/"] {
  position: relative;
  right: -11vw;
}
Firefoxブラウザでは多分使えない

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

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

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

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

Stylebotのスクリーンショット2

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

これで画像とブログカードのサイズが小さくなります。スクロール量が減るはずです。

「Twitter」のダイレクトメッセージ(DM)にあるブログカードと画像サイズを縮小する前と後の比較画像

「自分が送信したブログカードと画像の位置」を書くことで、自分が送ったブログカードと画像の位置を調整できます。書き込まなかった場合は、下記のように、自身のカードと画像が、中央らへんに表示されます。どっちが送ったか判別しにくくなり、不便です。

自身のブログカードと画像の位置を調整する前の画像

なんとか、考えたところ上記のCSSを思いつきました。「right」の数値を調整することで変更できます。

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

感想

以上、「Twitter」のダイレクトメッセージ内に表示されるブログカードと画像を、好きなサイズに縮小するCSSでした。

DMの背景色を変更するCSSもおすすめです。眩しい青を抑えることができます。

Posted by ナポリタン寿司