【Twitter】トレンドの動画クリップを複数行表示にするCSS

Twitter

Twitterのアイコン

この記事では、「Twitter(PC版)」のトレンドに表示される動画のクリップを複数行表示にして、見やすくするCSSについて書きます。

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

【Twitter】トレンドの動画クリップを複数行表示にするCSS

本記事で紹介するCSSを使えば、PC版「Twitter(ツイッター)」のトレンドに表示される動画クリップ集を複数行表示にできます。通常は1行になっていて、見にくいです。CSSを使うことで、全部のクリップを1ページに配置できます。いつでもオンオフできます。

今回カスタマイズする場所は、検索する単語によって表示される「〇〇さんからの動画」という項目です。

トレンドページの「〇〇さんからの動画」クリップ画像

「話題を検索」ページ→適当にトレンドをクリックします。トレンドの内容によって表示されます。クリックすると、上部のプレーヤー内で再生されます。

記事執筆時だと、ワールドカップ関連の内容で表示されます。通常は、1行のタイル表示になっています。次のページに移動するには、左右の矢印ボタンを押さないといけません。ちょっと不便です。ここを見やすいようにカスタマイズします。

クリップ動画のレイアウトの不便な点を示した画像

ニッチな記事ですが、個人的に便利だと思います。ワールドカップのゴールシーンや決定機などのハイライトクリップを見るのに役立ちます。

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

「〇〇さんからの動画」クリップを複数行表示にするCSS

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

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

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

/*話題を検索ページの動画を複数行表示にする*/
div[data-testid="ScrollSnap-SwipeableList"]>div[data-testid="ScrollSnap-List"] {
  flex-wrap: wrap;
}

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

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

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

左側サイドバーの「話題を検索」をクリックします。試しに、確定で動画クリップが表示される「FIFAワールドカップ」を押します。2022年11月23日に、「ドイツVS日本」があったんですよね。ちょー面白かったです。

Twitterでワールドカップページを開く手順画像

本来は1行表示ですが、CSS有効後は、複数行になって、全部表示されます。

動画クリップ集を、複数行表示にした画像

スクロール量は、増えてしまいますが、一目で全部のサムネイルを確認できます。

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

感想

以上、「Twitter(PC版)」の「〇〇さんからの動画」項目のクリップを複数行表示にするCSSでした。

ワールドカップが面白すぎます。

Posted by ナポリタン寿司