広告がうざい・トレンドを見るのがつらい
広告増えすぎワロタです。表示数どんどん増えている。広告は仕方ない部分もあるけど、目に毒なものも多くてしんどいです。
トレンド欄もひどい。否応なく目に入る位置にあるから鬱陶しい。
※ 下記手順行っても見たくなったら「話題を検索」をクリックして横目にすることはできる。
対応する環境
① 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があったら教えてください。