Twitterの記事リンクの画像でかくね？小さくすればよくね？
この記事では、Twitterのリンクに添付されている大きなサムネイル画像（OGP）を、小さくする方法について書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を使います。
本記事で紹介するCSSを使えば、Twitterのでかでかと表示されているサムネイル画像の記事リンクを、小さい画像に変更できます。
Twitterを見ていると、やたら大きなサムネイル画像が貼られた記事リンクがありませんか？画像がパッと目に入って、便利なんですが、タイムラインがその大きさで埋まってしまうと、スクロール量が増えて、鬱陶しいです。
Twitterのリンクのサムネイルは、2種類あります。「card.layoutSmall.media」と「card.layoutLarge.media」です。前者が「Small」で、小さいサムネイル画像です。
一方で、「Large」が大きいサムネイル画像です。今回は、この「card.layoutLarge.media」になっている画像を、小さくしてみようと思います。
CSSを利用して、以下の3パターンを紹介します。
- 「Small」サイズに小さくするCSS
- 背景に馴染ませるCSS
- そもそも画像抹消するCSS
サンプル動画を貼っておきます。
「Stylebot」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
本記事は、PCウェブサイト版です。スマホやアプリ版では利用できないので注意です。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を利用します。Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/Twitterのサムネイルサイズを小さくする手順
「Twitter」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。これから、3つのCSSを紹介します。自分が好きなコードを、コピペで貼り付けます。
Smallサイズに小さくするCSS
/*画像サイズ*/
div[data-testid="card.layoutLarge.media"] {
width: 200px !important;
}
/*文字を画像の横に配置する*/
div[data-testid="card.wrapper"] {
flex-direction: row !important;
}下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：twitter.com）がオンになっていることを確認します。オンになっている間は有効になっているということです。
大きなサムネイル画像が、「card.layoutSmall.media」のサムネイル画像サイズと一緒になります。文字は画像の右側に配置されます。画像・文字のクリックで、リンクを開く機能は健在です。
「card.layoutSmall.media」との比較画像も貼っておきます。若干違いますが、パッと見は同じだと思います。
画像サイズを調整したい場合は、「width: 200px;」の数値を調整します。大きくしたい場合は、「200」よりも大きい数字にします。
なお、記事のサムネイル画像にだけ反映されるので、通常の画像（メディア）には影響されません。記事のURLだけが貼っていて、画像が添付されている場合も、元の画像サイズです。あくまで記事と画像がセットになったカードのみです。
プロモーションの映像・画像も小さくなります。今まで当たり前に見えていた広告の画像や動画が小さくなと、少し違和感を覚えるかもしれません。
一時的に無効化したい場合は、Stylebot→「twitter.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
背景に馴染ませるCSS
/*OGP画像を文字の背景に重ねるCSS*/
div[data-testid="card.layoutLarge.media"] {
height: 0 !important;
opacity: 0.3 !important;
}上記のコードは、以下のサイトを参考にさせていただきました。感謝です。
参考:https://gist.github.com/showgo001
画像があった場所が丸々削除されて、その代わりに、文字の背景画像として表示されます。うっすら画像があって、その上に記事タイトルが表示されるので、視認性は悪くなります。
「opacity: 0.3;」の「0.3」で透明度を調整できます。「0」にすると、完全に画像が消えます。「1」にすると、画像を一切透過させないので、より視認性は悪くなります。
画像を削除するCSS
「縮小じゃなくて、そもそも記事のサムネイルなんていらない！文字だけで十分！」という方は、以下のコードを利用します。
/*記事リンクに添付されているサムネイルを削除するCSS*/
div[data-testid="card.layoutLarge.media"] {
display: none !important;
}完全に画像が消えて、記事タイトルだけになります。
感想
以上、「Twitter」の大きなでかでかサムネイルが適用されたブログカード（card.layoutLarge.media）を、小さくする方法でした。
タイムライン（カラム）の横幅を広げるCSS記事も書いています。こちらもおすすめです。
