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

2021年11月30日Stylebot&Stylus

Stylebot のアイコン

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

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

CSSでタイムライン幅を広げたTwitter画面
CSS で横幅を広げたTwitter

CSS を使うことで、Twitter のタイムラインの横幅を広げることができます。

デフォルトでは左右に若干の余白があります。この余白を有効活用しようというわけです。横幅を広くすることで、1行に表示される文字量が増えるのでマウスのスクロール量が減ります。

デフォルトのTwitter画面
デフォルトの横幅。上記画像と比較してみてください。

広げる幅は自由に調整できるので自分好みの見た目にしてみましょう。

前提

この記事ではStylebot を既にインストールして、なおかつ簡単な使い方を知っている前提で書きます。

初めてという方は以下の記事を参考にしてみてください。

CSS

書き込むCSSは以下になっています。

/*タイムラインの横幅*/
.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

タイムラインの横幅

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

1000pxの場合

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

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

200pxの場合

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

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

DMの横幅調整のことです。

メッセージ内容の横幅

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

メッセージのリストの横幅

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

画像サイズ縮小

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

そこで、画像を縮小するCSS を使っています。

以下の「60%」の値を調整することで、縮小率を変更できます。

width: 60%;

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

画像縮小前と縮小後の比較画像

合わせて使いたいCSS

本記事でタイムラインの横幅を広くしたら、ついでに以下の記事でサイドバー右側の余計な項目を非表示にしてみましょう。

右側がスッキリするのでよりタイムラインを広く使えます。

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

まとめ

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

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

Posted by ナポリタン寿司