Stylusでブラウザ版Twitterの見た目の変更

公式Twitterの画面はごちゃごちゃしているので、ユーザーCSSを記述して見た目を変更して使用しています。

こんな感じ

Firefox,Chrome,Edgeで使用できます。PC版SafariでもユーザーCSSを指定すると適用できます。

ついでに最近実装されたインプレッション数も非表示にしています。

続きを読む

Stylusの導入(Firefox,Chrome,Edge)

Firefox

こちらからダウンロードします

Stylus https://addons.mozilla.org/ja/firefox/addon/styl-us/

Chrome,Edge

Edgeの場合まず右上の「…」をクリック→「拡張機能」→左下の「他のストアからの拡張機能を許可」をオンにします。

Chrome,Edge共に以下からダウンロードします

Stylus　https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=ja

Stylusに記述

Twitterを開いた状態で右上の拡張機能アイコンからStylusをクリック、「次のスタイルを書く：」の部分をクリックして以下のうち使用したい部分を記述します。

/*右カラムを非表示*/
div[data-testid="sidebarColumn"]{display:none !important;}

/*メインカラム幅*/
*[data-testid="primaryColumn"],.r-1ye8kvj{max-width:750px !important;}

/*メニューとメインカラムの間のマージン*/
main > div > div > div > div{margin-left:0 !important;}

/*メニューの文字サイズ*/
.css-901oao{font-size:14px !important;font-weight:normal !important;}

/*鳥を消す*/
h1[role*="heading"]{display:none !important;}

/*左のメニューのツイートボタンの色　display:noneで消せる*/
header a[aria-label="ツイートする"]{background-color:#000 !important;}

/*背景色　適当な色へ*/
html{background-color:#eee !important;}
header{background-color:#eee !important;}
main{background-color:#eee !important;}

/*左下のDM欄消去*/
[data-testid="DMDrawer"]{display:none;}

/*インプレッション数非表示*/
a[href*="analytics"]{display:none;}

下のURL部分を「次で始まるURL」を「https://twitter.com/」にしてTwitterのどのページにも反映されるようにします

PC版Safari

Safari の場合は「環境設定」–「詳細」–「スタイルシート」で上記のテキストを適当な名前.cssで保存して指定すると適用できます。

CSS,Twitter