Created
May 27, 2020 16:43
-
-
Save yusukesaitoh/b93a47fca0166d4d04e96f0e4405c5a0 to your computer and use it in GitHub Desktop.
Twitterのトレンドを見たくない、でも全く見ないとちょっと不安という時、右カラムのトレンドを控えめなトーンに調整するCSSです。各項目にコメントを付けているので、自分に必要なものを選んでコピペするとよさそう。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Macでフォントがメイリオになるのを回避する */ | |
.r-1tl8opc { | |
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; | |
} | |
/* サイドバーのブロック見出しfontを控えめに */ | |
div[data-testid=sidebarColumn] div.r-1vr29t4 { | |
font-size: 1rem; | |
font-weight: 400; | |
} | |
/* サイドバーのブロック見出し文字色を控えめに(3テーマ分) */ | |
div[data-testid=sidebarColumn] div.r-1u4rsef div.r-1vr29t4 { | |
color: rgb(101, 119, 134); | |
} | |
div[data-testid=sidebarColumn] div.r-1uaug3w div.r-1vr29t4 { | |
color: rgb(136, 153, 166); | |
} | |
div[data-testid=sidebarColumn] div.r-1ysxnx4 div.r-1vr29t4 { | |
color: rgb(110, 118, 125) | |
} | |
/* サイドバーのブロック背景色を透明に(3テーマ分) */ | |
div[data-testid=sidebarColumn] div.r-1u4rsef, | |
div[data-testid=sidebarColumn] div.r-1uaug3w, | |
div[data-testid=sidebarColumn] div.r-1ysxnx4 { | |
background: transparent; | |
} | |
/* サイドバーのブロックのボーダーを消す(おすすめユーザーを隠したときに線が残るのを回避、3テーマ分) */ | |
div[data-testid=sidebarColumn] .r-9cbz99, | |
div[data-testid=sidebarColumn] .r-1uhd6vh, | |
div[data-testid=sidebarColumn] .r-k0dy70 { | |
border: none; | |
} | |
/* トレンド、ニュース行のタイトルfontを控えめに */ | |
div[data-testid=sidebarColumn] div.r-vw2c0b { | |
font-size: 0.875rem; | |
font-weight: 400; | |
} | |
/* ニュース行のメタ情報を隠す*/ | |
div[data-testid=sidebarColumn] a div.r-1wbh5a2 { | |
display: none; | |
} | |
/* ニュース行のサムネイル画像を隠す */ | |
div[data-testid=sidebarColumn] > div > div > div > div > div.css-1dbjc4n > div div > div > a > div.r-t23y2h { | |
display: none; | |
} | |
/* トレンドを行ごと隠す */ | |
div[data-testid=sidebarColumn] div[data-testid="trend"] { | |
display: none; | |
} | |
/* トレンド行は表示する場合、件数などを隠す */ | |
div[data-testid=sidebarColumn] div[data-testid="trend"] > div > div:nth-last-child(2), | |
div[data-testid=sidebarColumn] div[data-testid="trend"] > div > div:nth-last-child(3):not(.r-vw2c0b) { | |
display: none; | |
} | |
/* トレンド行は表示する場合、メタ情報を隠す */ | |
div[data-testid=sidebarColumn] div[data-testid="trend"] > div > div.r-1wbh5a2 { | |
display: none; | |
} | |
/* トレンド一覧へのリンク(さらに表示)を隠す */ | |
div[data-testid=sidebarColumn] a[href="/explore/tabs/for-you"] { | |
display: none; | |
} | |
/* おすすめユーザーをブロックごと隠す */ | |
div[data-testid=sidebarColumn] aside[role="complementary"] { | |
display: none; | |
} | |
/* おすすめユーザーのブロックは表示する場合、行を隠す */ | |
div[data-testid=sidebarColumn] div[data-testid="UserCell"] { | |
display: none; | |
} | |
/* おすすめユーザーの行を隠したときのブロック高さを調整 */ | |
div[data-testid=sidebarColumn] div.r-1bro5k0 { | |
min-height: auto; | |
} | |
/* 行間のボーダーを消す */ | |
div[data-testid=sidebarColumn] div.r-qklmqi { | |
border-bottom: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
CSSを追加する拡張機能の例
Stylus
https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne
https://addons.mozilla.org/ja/firefox/addon/styl-us/