PC版twitter.comからうざい広告・脳死トレンドなど余計な表示を抹消する方法

2341 ワード
Twitter Twitter テキストリンク

広告がうざい・トレンドを見るのがつらい

広告増えすぎワロタです。表示数どんどん増えている。
トレンド欄もひどい。コロナで皆疲れてるのがわかる。否応なく目に入る位置にあるから鬱陶しい。
(下記手順行っても見たくなったら「話題を検索」をクリックして横目にすることはできる。)

対応する環境

① Google ChromeやChrome拡張を使えるブラウザ
② ↑に加えてUser CSSなどユーザーCSSが使えるプラグイン。
https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb
オンオフし易いし・インターフェースがわかりやすい。

一応、Chromeに限らずユーザーCSSが使える環境ならなんでも大丈夫だと思う。
Safariなんかは下のコードを.cssの拡張子でテキスト保存して環境設定→詳細に食わせるだけ。

使うコード

/* 右部サイドバーを非表示 */
[data-testid="sidebarColumn"] {
    display: none !important;
}
/* 非表示にしたので全体幅も合わせて縮める */
/* これ書かないと タイムライン部が大きくなりすぎる */
main .r-rthrr5 {
    width: 700px;
}
/* DM/設定などの画面で2つ目のカラムが小さすぎ */
/* 中央列、右列それぞれにサイズを指定する */
/* DM画面の中央列が小さくなりすぎない数値(430px) */
main .r-rthrr5 .r-1ye8kvj:nth-last-child(2){
    width: calc(100% - 430px);
}
main .r-rthrr5 .r-1ye8kvj+.r-1ye8kvj {
    width: 430px;
}
/* タイムライン部分のサイズは100%なので上書き */
.r-1ye8kvj[data-testid="primaryColumn"],
.r-1ye8kvj[data-testid="primaryColumn"] .r-1ye8kvj {
    width: 100% !important;
    max-width: 100%;
}
/* 広告・おすすめ・トピックを非表示 */
[class$="css-1dbjc4n"][data-testid="placementTracking"],
[class$="css-1dbjc4n"][aria-label$="のツイート"] [data-testid="UserCell"],
[class$="css-1dbjc4n"] [aria-label="タイムライン: Carousel"] {
    height: 0 !important;
    overflow: hidden;
    margin-top: -1px;
    padding: 0
}

User CSSでの設定方法

① 上記リンクからUser CSSをインストール
② http://twitter.com/home にジャンプ
③ 右上のUser CSSのアイコン[CSS]←こんなやつ をクリック
⑤ 上のコードをコピペ
⑥ User CSSのアイコン[CSS]←こんなやつ をクリックして消す

ポイント

・最右部の表示は丸々消すコードになってます。
・twitter.comの仕様変更などで使えなくなる、またはもしくは表示がおかしくなるかも。変だと思うことがあったら「ON□」トグルボタンを押すとオンオフできます。
・700px、430pxの部分を調整すると画面幅を調節できます。
・殴り書きなんで、もっといいCSSがあったら教えてください。

進数、ビット演算ノート
C言語windows.hライブラリの常用関数(一)