【Stylebot】Twitterの横幅を広げるCSS。画面を有効活用!

2021年11月30日Twitter

Twitterのアイコン

この記事では、Twitterのタイムラインの横幅を広げるCSSについて書きます。

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

Stylebot(CSS)を使って、Twitterのタイムラインの横幅を広げてみた画像

本記事で紹介するCSSを使えば、Twitterのタイムラインの横幅を広げられます。

デフォルトのTwitter(PCで見たときのウェブサイト)は、左からナビゲーション項目、中央にタイムライン、右側にキーワード検索、おすすめユーザーといった構成になっています。

中央のタイムラインがメインで見る場所なのに、左右に若干の余白があります。

この余白を有効活用したいと思い、タイムラインの横幅を広くしてみました。広くすることで、1行に表示される文字数が増えるので、マウスのスクロール量が減ります。ホーム、話題を検索、通知など全ての項目に対して調整できます。

デフォルトの横幅と、CSSで広げた後のTwitterタイムラインの比較画像

広げる幅は、自由に調整できます。PCの横幅いっぱいに表示させるといったことも可能です。

「Twitterヘビーユーザーで、ずっと見ている!だけど、タイムラインの横幅が狭くて見にくい!マウスのスクロール量が増えて大変!もっと横幅広げたい!」という方、ぜひ試してみてください。

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

実際に適用する前と後の比較動画を貼っておきます。

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

Twitterの横幅を広げるCSS

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

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

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

/*タイムラインの横幅*/
.r-1ye8kvj {
  max-width: 800px; /*ここの数字で幅を調整*/
}

/*メッセージ(Dm)のセクション詳細横幅*/
section[aria-label="セクションの詳細"] {
  max-width: 600px !important;
}

/*画像サイズ縮小*/
div[aria-labelledby*="id"]:not([data-testid*="card"]) {
  width: 60%;
}

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

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

Twitterは使っているテーマによって、セレクタ(CSS専門用語)が変動して分かりにくいのですが、今回の場合は、どのテーマでも同じセレクタです。

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

これで、Twitterの横幅が指定したサイズに広がります。

Twitterのタイムラインの横幅を広げた画像

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

タイムラインの横幅

「max-width: 800px;」の部分で、横幅を調整できます。1000pxといったように広げすぎると、サイドバーがはみ出るので注意です。

サイドバーを非表示にするCSSと併用すると、1000pxでもいいかもしれません。

逆に幅を狭くするといったこともできます。200pxにした画像を貼っておきます。見にくいです。

Twitterのタイムラインの横幅を、200pxにした画像

個人的には、800pxが一番見やすいかなと判断しました。

メッセージ(Dm)のセクション詳細横幅

メッセージ(DM)の横幅調整のことです。

ダイレクトメッセージのスクリーンショット1

タイムラインの横幅を調整すると、強制的にDM欄の横幅も広がります。それだけならいいんですが、メッセージリストの部分が圧迫されて見づらくなります。

よって、メインの横幅変更CSSとは別で、メッセージ幅を上書きしています。DMを一切使わない場合は、不要なコードです。

ダイレクトメッセージのスクリーンショット2

画像サイズ縮小

タイムラインの横幅を広げると、合わせて画像や動画、ブログカードの幅も広がります。これだと画像が大きくなって、スクロール量は、むしろ増えます。

そこで、画像を縮小するCSSを一緒に使っています。以下の「60%」の値を調整することで、縮小率を変更できます。

/*画像サイズ縮小*/
div[aria-labelledby*="id"]:not([data-testid*="card"]) {
  width: 60%;
}

元の大きさからどのくらい小さくするか?という意味です。50%だと半分のサイズになります。

ブログカードの画像を縮小する前と後の比較画像

感想

以上、Twitterの横幅を広くして、見やすくするCSSでした。

広げれば広げるだけ、一行に表示される文字数は増えるので、マウスのスクロール量が減ります。快適です。ただし、極端に広げすぎると、Twitterじゃない感じがして違和感でした。ほどほどがいいのかなと思います。

TwitterとStylebotの記事は、色々書いているので、気になった方は合わせて参考にしてみてください。

Posted by ナポリタン寿司