Skip to content

Instantly share code, notes, and snippets.

@yusukesaitoh
Created May 27, 2020 16:43
Show Gist options
  • Save yusukesaitoh/b93a47fca0166d4d04e96f0e4405c5a0 to your computer and use it in GitHub Desktop.
Save yusukesaitoh/b93a47fca0166d4d04e96f0e4405c5a0 to your computer and use it in GitHub Desktop.
Twitterのトレンドを見たくない、でも全く見ないとちょっと不安という時、右カラムのトレンドを控えめなトーンに調整するCSSです。各項目にコメントを付けているので、自分に必要なものを選んでコピペするとよさそう。
/* 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;
}
@yusukesaitoh
Copy link
Author

yusukesaitoh commented May 27, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment