- X（Twitter）のドメインがtwitter.com→x.comに変更になった際の注意事項
- Ver1.0→Ver1.1→Ver1.2で、表示できるツイートの数を更に増やしました
- Chrome拡張のStylebotを使って「Twitter実況モード」を追加する（画像と引用ツイートの表示をON/OFFできるボタンを追加）
- Stylebotのインストール（Chrome拡張）
- 「Twitter実況モード Ver1.0」の設定方法（最初の1回だけ設定する）
- Ver1.1への変更方法
- Ver1.2への変更方法
- 「通常表示」と「Twitter実況モード」の切り替え方法
- ナポリタン寿司さんの「Twitterの横幅を広げるCSS」について
- TwitterのCSSの解析の仕方（技術的参考情報）
- Androidスマホ／タブレットでも「Twitter実況モード」は動きます
- 「検索Tool for Twitter」もお試しください
X（Twitter）のドメインがtwitter.com→x.comに変更になった際の注意事項
X(Twitter）のドメインがtwitter.com→x.comに変更になった事に伴い、
下記の記事の内容自体には一切影響ありませんが、Chrome拡張のStylebotで設定する際の対象ページがhttps://twitter.com→https://x.comに変更になることから、現在のhttps://x.comで表示したページに対して下記のstylebotの設定を「もう一度設定する」必要があります
（内容は全く変わっていませんが、同じ設定をもう一度繰り返してください）
Ver1.0→Ver1.1→Ver1.2で、表示できるツイートの数を更に増やしました
Twitterの右側のブロックを非表示にして、ツイート文字の改行を無効にする事で表示量を更に増やしました
Ver1.0とVer1.1のCSSソースはどちらも用意してあるので、どちらでも利用可能です
Ver1.2で更に「このスレッドを表示」を非表示にしました
Chrome拡張のStylebotを使って「Twitter実況モード」を追加する（画像と引用ツイートの表示をON/OFFできるボタンを追加）
TweenやOpenTweenなど「TwitterのAPIを使った専用ブラウザ」が使えなくなってしまいました
Chromeなどのブラウザで表示するWebブラウザ版のTwitterだと1画面で表示されるツイートが2～3個程度と非常に少ない為、サッカー日本代表などのスポーツ中継の鑑賞時やアニメを視聴しながらの実況時、あるいは地震が起きた直後などの「揺れ」ツイート一覧を確認したい時に非常に不便です
そこで、Chromeブラウザ拡張の「Stylebot」を使って、Twitter表示時のみボタン一発で「通常表示」と「Twitter実況モード」を切り替えられる様に作ってみました
（※）ナポリタン寿司さんの「Twitterの横幅を広げるCSS」も同時に使わせて頂いています（詳細は下記）
通常表示
「Twitter実況モード」表示（※）上の画像と全く同じ状態で画像と引用ツイートのみ非表示にしています
「cssでの実装」なのでTwitter側がデザイン変更などした際に使えなくなってしまう可能性が高い為、（元々cssなのでソース自体丸見えですが）「どういう考え方でこれを作っているのか？」も併せて紹介したいと思っています
Stylebotのインストール（Chrome拡張）
Chrome拡張のStylebotはここからインストールしてください(chromeウェブストア）
Stylebotをインストールしたら、Chromeブラウザの画面右上のアイコンを右クリックして、Stylebotの項目のピン止めを付けてChromeブラウザのツールバーに「S」が表示される様にしてください
「Twitter実況モード Ver1.0」の設定方法（最初の1回だけ設定する）
１、ChromeブラウザでTwitterを表示し、右上のツールバーから「S」をクリックして、ポップアップメニューから「Stylebotを開く」を選択します
２、画面右下の「コード」を選択します
３、下記のソースコードを張り付けて、画面右上の(X)ボタンで閉じます
（※）ソースの右上にコピーボタン付けました
（CSS Ver1.0のソースコード）
/*Twitter実況モードCSS Ver1.0*/
/*https://nisimura.org/*/
/*画像と引用ツイートを非表示にする*/
.r-1ets6dv{
display: none;
}
/*RTやいいねの表示領域を非表示にする（フォントサイズ別）*/
.r-1hmdk1{
display: none;
}
.r-1ta3fxp{
display: none;
}
.r-1p0l6em{
display: none;
}
.r-1s2j5ll{
display: none;
}
/*ナポリタン寿司さんのCSS*/
/*https://www.naporitansushi.com/twitter-width/*/
/*タイムラインの横幅*/
.r-1ye8kvj {
max-width: 800px !important; /*ここの数字で幅を調整*/
}
/*メッセージ（Dm）のセクション詳細横幅*/
section[aria-label="セクションの詳細"] {
max-width: 600px !important;
}
/*画像サイズ縮小*/
div[aria-labelledby*="id"]:not([data-testid*="card"]) {
width: 60% !important;
}
４、設定は以上で終了です（この設定はTwitterを表示している間だけ有効になります）
Ver1.1への変更方法
Ver1.1を使いたい場合は、上記のソースコードを消して、下記のソースコードをコピペしてください
（※）ソースの右上にコピーボタン付けました
/*Twitter実況モードCSS Ver1.1*/
/*https://nisimura.org/*/
/*画像と引用ツイートを非表示にする*/
.r-1ets6dv{
display: none;
}
/*RTやいいねの表示領域を非表示にする（フォントサイズ別）*/
.r-1hmdk1{
display: none;
}
.r-1ta3fxp{
display: none;
}
.r-1p0l6em{
display: none;
}
.r-1s2j5ll{
display: none;
}
/*文字を改行させない*/
.css-901oao {
white-space: nowrap
}
/*ナポリタン寿司さんのCSS*/
/*https://www.naporitansushi.com/twitter-width/*/
/*タイムラインの横幅*/
.r-1ye8kvj {
max-width: 1600px !important; /*ここの数字で幅を調整*/
}
/*メッセージ（Dm）のセクション詳細横幅*/
section[aria-label="セクションの詳細"] {
max-width: 600px !important;
}
/*画像サイズ縮小*/
div[aria-labelledby*="id"]:not([data-testid*="card"]) {
width: 60% !important;
}
/*ナポリタン寿司さんのCSS*/
/*https://www.naporitansushi.com/twitter-sidebar/*/
/*右側サイドバーを一括非表示*/
div[data-testid="sidebarColumn"] {
display: none;
}
/*右側サイドバー下のメッセージポップアップ非表示*/
div[data-testid="DMDrawer"] {
display: none;
}Ver1.2への変更方法
Ver1.2を使いたい場合は、上記のソースコードを消して、下記のソースコードをコピペしてください
（「このスレッドを表示」を非表示にする事で更に表示領域が広がりますが、返信先のIDが見えなくなります）
（※）ソースの右上にコピーボタン付けました
/*Twitter実況モードCSS Ver1.2*/
/*https://nisimura.org/*/
/*画像と引用ツイートを非表示にする*/
.r-1ets6dv{
display: none;
}
/*RTやいいねの表示領域を非表示にする（フォントサイズ別）*/
.r-1hmdk1{
display: none;
}
.r-1ta3fxp{
display: none;
}
.r-1p0l6em{
display: none;
}
.r-1s2j5ll{
display: none;
}
/*文字を改行させない*/
.css-901oao {
white-space: nowrap
}
/*「このスレッドを表示」を非表示にする*/
.r-1cvl2hr {
display: none;
}
.r-1s367qj {
display: none;
}
/*ナポリタン寿司さんのCSS*/
/*https://www.naporitansushi.com/twitter-width/*/
/*タイムラインの横幅*/
.r-1ye8kvj {
max-width: 1600px !important; /*ここの数字で幅を調整*/
}
/*メッセージ（Dm）のセクション詳細横幅*/
section[aria-label="セクションの詳細"] {
max-width: 600px !important;
}
/*画像サイズ縮小*/
div[aria-labelledby*="id"]:not([data-testid*="card"]) {
width: 60% !important;
}
/*ナポリタン寿司さんのCSS*/
/*https://www.naporitansushi.com/twitter-sidebar/*/
/*右側サイドバーを一括非表示*/
div[data-testid="sidebarColumn"] {
display: none;
}
/*右側サイドバー下のメッセージポップアップ非表示*/
div[data-testid="DMDrawer"] {
display: none;
}「通常表示」と「Twitter実況モード」の切り替え方法
画面右上の「S」をクリックして、ポップアップメニューの「twitter.com」のボタンをOFFにすれば通常表示、ONにすれば「Twitter実況モード」に変わります
通常表示
Twitter実況モード
ナポリタン寿司さんの「Twitterの横幅を広げるCSS」について
今回、私の方では「画像と引用ツイートを非表示にするCSS」と（表示フォントサイズ別の）「いいねやRTなどの表示領域を非表示にするCSS」を加えているのですが、これに加えて「ナポリタン寿司」さんの「【Stylebot】Twitterの横幅を広げるCSS。画面を有効活用！」というCSSも同時に使わせて頂いております
ナポリタン寿司さんの方でもTwitter関連の様々なCSSやTwitter用の拡張機能を公開されているので、併せてご覧ください
TwitterのCSSの解析の仕方（技術的参考情報）
下記は一般ユーザーには関係の無い話になります
「CSSで挙動を変えている」という事は、Twitter側がデザイン変更などでCSSを変更した場合に対応できなくなる可能性が高いです。こちらでもある程度追従するつもりですが1人の作業では時間的に足りない事も十二分に想定できる為「同じ解析をできる人を増やしたい」意味で、参考に「今回のCSS上書きが何をしているのか？」の技術的解説をしておきたいと思います
１、まずTwitterを表示して、画像か引用ツイートのあるツイートの所を表示します。
２、「F12」キーを押してデベロッパーモードを表示します
３、デベロッパーモード画面の「選択」ツールバーを一度クリックして画像を選択します
４、そうすると選択された画像のHTML/CSSソースコードが表示されます
５、選択したHTMLソースの行を少し上に辿っていくと、style=”padding-bottom: 52.356%;”を含む行が見つかります。これを見て「なんかこの辺で表示領域のサイズ調整してるっぽい」と当たりをつけます（間違ってる事も多々ありますが、こういう作業を繰り返します）
６、style=”padding-bottom: 52.356%;を含む行のclassはclass=”r-1adg3ll r-13qz1uu”となっています。なのでこのクラスのどっちか？あるいは両方でpadding-bottomを上書きするか、そもそも表示自体をなしにしちゃえば消せるのでは？・・・と、当たりをつけます（これも間違ってるかもしれませんが根気よくこの作業を繰り返します）
７、r-1adg3llとr-13qz1uuの2つのクラスが怪しいと目星をつけたので、Stylebotのソースを表示して下記の様に書いてみます
.r-1adg3ll {
display: none;
}
８、あら？画像どころか表示が全部消えちゃいました！！
これは間違いでした
９、改めて再チャレンジ、今度は画像じゃなくて「引用ツイート」の方で見て見ましょう
１０、（途中何回か失敗した過程は省略して）「文字の下で、画像が表示されている領域のcss」ってr-1ests6dvから始まっているので、これらを一個ずつ消してみよう
１１、Stylebotで下記のコードを書いてみます
.r-1ets6dv {
display: none;
}１１、はい、正解！！引用ツイート消えましたー
（ちなみにこの方法で画像も消えてました）
１２、今回のCSSはこんな感じに作った物なので、今後Twitter側のデザインが変更されて挙動がおかしくなった場合は、（私の方でも調べるかもしれませんが）技術的に詳しい人or時間のある人は自分でも試してみてくださいー
（※）そして、結果を教えてください。私は飽きっぽいので「作ったら作りっぱなしで放置が基本」なので・・・
１３、以上、よろしくお願い致します
コメント