Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2020-05-25

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

広告増えすぎワロタです。表示数どんどん増えている。広告は仕方ない部分もあるけど、目に毒なものも多くてしんどいです。
トレンド欄もひどい。否応なく目に入る位置にあるから鬱陶しい。
※ 下記手順行っても見たくなったら「話題を検索」をクリックして横目にすることはできる。

対応する環境

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

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

使うコード

/* カラムの大きさを宣言,値は任意で設定可能 */
/* --full-width→全体の幅 */
/* --third-colmn-width→DM/設定などの画面で3つ目のカラムの幅 */
:root {
  --full-width: 700px;
  --third-colmn-width: 430px;
}
/* 右部サイドバーを非表示 */
[data-testid="sidebarColumn"] {
    display: none !important;
}
/*右部サイドバーを非表示にしたので、中央カラム部分が大きくなりすぎる */
/* 全体幅を調整する */
main .r-rthrr5,
main .r-113js5t {
    width: var(--full-width);
}
/* 全体幅を調整することによってDM/設定などの画面で2つ目のカラムが小さくなる */
/* 中央列、右列それぞれにサイズを指定する */
main .r-rthrr5 .r-1ye8kvj:nth-last-child(2),
main .r-113js5t .r-1ye8kvj:nth-last-child(2){
    width: calc(100% - var(--third-colmn-width));
}
main .r-rthrr5 .r-1ye8kvj+.r-1ye8kvj,
main .r-113js5t .r-1ye8kvj+.r-1ye8kvj {
    width: var(--third-colmn-width);
}
/* タイムライン部分のサイズは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
}
/* プロフページ内[プロモーションする]ボタンを非表示に */
a[href$="quick_promote_web/intro"] {
  display: none;
}
/* 認証済み組織ボタンを非表示に */
a[aria-label="認証済み組織"] {
  display: none;
}

User CSSでの設定方法

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

ポイント

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

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?