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

2021年11月30日Stylebot&Stylus

Stylebotのアイコン

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

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

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

Twitterのタイムラインの横幅を広くするCSSです。ウェブサイトにCSSを適用できるChrome拡張機能「Stylebot」を使うことで、横幅を自由自在に変更できます。

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

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

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

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

広げる幅は、自由に調整できます。PCの横幅いっぱいに表示させるといったことも可能です。「Twitterヘビーユーザーで、ずっと見ている!だけど、タイムラインの横幅が狭くて見にくい!マウスのスクロール量が増えて大変!もっと横幅広げたい!」という方、ぜひ試してみてください。

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

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

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

Firefoxをご利用の場合

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

Firefoxをご利用の方は、以下のFirefoxアドオンストアからインストールできます。

「Firefoxへ追加」をクリックします。

Vivaldiブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。こちらは、ウェブパネル内にもCSSを適用できます。

CSS

Twitterにアクセスします。Stylebotを使っている人は、右上の拡張機能アイコン→Stylebotを開くをクリックします。

拡張機能ボタン Stylebotを開く

Firefoxで、Stylusを使っている方は、右上の拡張機能アイコン→「次のスタイルを書く」の「twitter.com」をクリックします。

Stylus 次のスタイルを書く twitter.com

新しいタブでスタイルシートが表示されるので、書き込んでいきます。書き込めたら、忘れずに「保存」をクリックします。

Stylus スタイルを追加

書き込むコードは、以下になっています。Stylebot、Stylusどちらも一緒です。

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

/*メッセージ(Dm)のセクション詳細横幅*/
section[aria-label="セクションの詳細"] {
  max-width: 600px !important; /*数字を調整してみてください*/
}

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

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

以下画像のようになればOKです。コピペした瞬間に幅が広くなります。上記CSSでは800pxにしてますが、好みに応じて調整できます。

タイムラインの横幅を広くするCSSをStylebotに書き込む

タイムラインの横幅

1000pxにするとサイドバーがはみ出ます。

Twitterのタイムライン 1000pxの場合

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

逆に幅を狭くするといったこともできます。200pxだとこんな感じです。

Twitterのタイムライン 200pxの場合

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

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

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

メッセージ(DM)内容の横幅

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

メッセージのリストの横幅が狭くなって少し見にくい

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

画像サイズ縮小

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

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

width: 60%;

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

タイムラインの画像縮小前と縮小後の比較画像

合わせて使いたいCSS

本記事でタイムラインの横幅を広くしたら、ついでに以下の記事でサイドバー右側の余計な項目を非表示にするのがおすすめです。

右側がスッキリするので、よりタイムラインを有効活用できます。

サイドバーもスッキリして、より見やすくした画面

感想

以上、Twitterの横幅を広くするCSSについてでした。

広げれば広げるだけ、1行の文字量は増えるのでマウスのスクロール量は減るのですが、Twitterじゃない感じがして違和感でした。ほどほどがいいのかなと思います。

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

Posted by ナポリタン寿司