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

Stylebot&Stylus

Twitter のアイコン

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

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

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

本記事で紹介するCSSを使えば、Twitterの記事リンクのでかでかと表示されているサムネイル画像を小さい画像に変更できます。

Twitterでブロガーさんなどを見ていると、やたら大きなサムネイル画像の記事リンクないですか?画像がパッと目に入って、便利なんですが、タイムラインがあの大きさで埋まってしまうと、スクロール量が増えて、鬱陶しいです。

Twitterの「card.layoutLarge.media」に設定されている画像のスクリーンショット

Twitterのリンクのサムネイルは、2種類あります。「card.layoutSmall.media」と「card.layoutLarge.media」です。前者が「Small」、つまり小さいサムネイル画像です。下記画像のようなサイズです。一度は見たことあると思います。

Twitterの「card.layoutSmall.media」に設定されている画像のスクリーンショット

一方で、「Large」が大きいサムネイル画像です。

何を隠そう、僕のツイートが大きなサムネイル画像です。なんじゃいそりゃw。あれって、中の人が設定できるんですよね。(自分の記事以外のリンクをツイートした場合は不明です。)

当サイトの場合、ブログ始めた数か月は、小さい画像にしていましたが、大きい方がクリック率上がるかなと思って、大きくしました。

結果、検証し忘れました。今更確かめるのもめんどくさいので、そのままにしています。ただ、「ナポリタン寿司の画像でけぇなぁ、邪魔だなぁ」ということは明白です。

ということで、今回は、この「card.layoutLarge.media」になっている画像を、小さくして見ようと思います。

CSSを使います。CSSが理解できる方は、自分好みにあれやこれやカスタマイズできます。理解できなくても、本記事でコードを丸々紹介するので、コピペでOKです。

「Small」サイズに小さくするCSS、背景に馴染ませるCSS、そもそも画像抹消するCSSの3パターン紹介します。好きなCSSを使ってみてください。

サンプルの動画を貼っておきます。

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

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

CSS

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

Stylebotのポップアップメニュー

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。これから、3つのCSSを紹介します。自分が好きなコードをコピペで貼り付けてみてください。

ちなみに僕は、1番目に紹介する「Small」サイズに変換するコードを使っています。

Smallサイズに小さくするCSS

書き込むコードは、以下になっています。

/*画像サイズ*/
div[data-testid="card.layoutLarge.media"] {
  width: 200px;
}

/*文字を画像の横に配置する*/
div[data-testid="card.wrapper"] {
  flex-direction: row;
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

大きなサムネイル画像を、小さいサムネイル画像と同じサイズに変更するCSSを書き込んだ画面

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

はい、じゃーーん!

あの忌々しい大きなサムネイル画像が、「card.layoutSmall.media」のサムネイル画像のサイズと、一緒になりました。ちゃんと、文字は画像の右側に配置されます。もちろん、画像・文字のクリックでリンクを開く機能は健在です。

コード適用前と適用後のTwitter画像

「card.layoutSmall.media」との比較画像も貼っておきます。若干違いますが、パッと見は同じだと思います。

カスタマイズ後の大きなサムネイルと小さなサムネイルの比較画像

画像サイズを調整したい場合は、「width: 200px;」の数値を調整してみてください。大きくしたい場合は、「200」より大きい数字を入力します。

なお、記事のサムネイル画像にだけ反映されるので、通常の画像(メディア)には影響されません。記事のURLだけが貼っていて、画像が添付されている場合も、元の画像サイズです。あくまで記事と画像がセットになったカードのみです。

ナポリタン寿司のサブ垢がツイートしている画像

プロモーションの映像・画像も小さくなります。今まで当たり前に見えていた広告の画像や動画が小さくなと、少し違和感を覚えるかもしれません。個人的にはプロモーション一切いらないので、関係ありません。

メイプルストーリー公式アカウントによるプロモーションツイート画像

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

背景に馴染ませるCSS

書き込むコードは、以下になっています。

/*OGP画像を文字の背景に重ねるCSS*/
div[data-testid="card.layoutLarge.media"] {
  height: 0;
  opacity: 0.3;
}

上記のコードは、以下のサイトを参考にさせていただきました。感謝です。

参考:https://gist.github.com/showgo001

画像があった場所が丸々削除されて、その代わりに、文字の背景画像として表示されます。うっすら画像があって、その上に記事タイトルが表示されるので、視認性は悪くなります。

「OGP画像を文字の背景に重ねるCSS」を適用した画像

「opacity: 0.3;」の「0.3」で透明度を調整できます。0にすると、完全に画像が消えます。1にすると、画像を一切透過させないので、より視認性は悪くなります。

「opacity: 0.3;」を調整してみた画像

画像を削除するCSS

「縮小とかじゃなくて、そもそも記事のサムネイルなんていらない!文字だけで十分!」という方は、以下のコードを使ってみてください。

/*記事リンクに添付されているサムネイルを削除するCSS*/
div[data-testid="card.layoutLarge.media"] {
  display: none;
}

完全に画像が消えて、記事タイトルだけになります。

「記事リンクに添付されているサムネイルを削除するCSS」を適用してみた画像

感想

以上、Twitterのでかでか邪魔サムネイル画像を、小さくする方法でした。

本記事を書いてて思ったんですが、ここ最近で一番”ブログ”って感じがしましたw。なんでかは分かりませんが、なんかこう…「うぉお、これがブログだぁ!」と自分で思ってしまいました笑なんでだろうw

Posted by ナポリタン寿司