HOME/💭BLOG/「Stylus」でTwitter, YouTube, Instagramのサイドバーを非表示にする

「Stylus」でTwitter, YouTube, Instagramのサイドバーを非表示にする

2021/6/22 22:232023/1/19 12:47

Created

2021/06/23

Category

Geek

Publish

slug

permalink

blog/

やあ〜やんぐたかだよ。

今回もChrome拡張を用いた合理化のお時間です。

💭

目次

はじめに Twitterのサイドバーを非表示にする YouTubeの関連動画を非表示にする Instagramのサイドバーを非表示にする

はじめに

サイトごとにCSSを上書きできるChrome拡張機能「stylus」を使います。

Redesign the web with Stylus, a user styles manager. Stylus allows you to easily install themes and skins for many popular sites.

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

👇

前のブログでは、フォント変更を行いました

「Stylus」でChromeの閲覧環境のフォントを変更する

「Stylus」でChromeの閲覧環境のフォントを変更する2021/6/23 0:572022/6/12 23:12

Twitterのサイドバーを非表示にする

CSS

Twitterは謎のclassがたくさんついていらっしゃいますが、data-testidとclassどっちでやるのが良いでしょうか〜。

YouTubeの関連動画を非表示にする

CSS

単純にサイドバーを非表示に。関連動画を見えなくして、没入感を向上させました。

なぜか、デフォルト表示の動画プレイヤーのサイズがサイドバーに干渉しているみたいなので、「Theater Mode for YouTube」をインストール。常時シアターモードにすることで、無理やり解決しました。

Theater Mode for YouTube™ (large player view)

Force YouTube to open its player in the theater mode (full-width mode) even if you are logged-out

https://chrome.google.com/webstore/detail/theater-mode-for-youtube/dgognhgbpdoeidccnbfhohblklhbbomh

Instagramのサイドバーを非表示にする

CSS

インスタのカスタマイズ例はネットに落ちていなかったので、自分でclass探してやってみました。

💭

インスタのサイドバーが森羅万象の中で一番無駄なので、効果覿面でした〜。

Twitterでシェア

HOME/💭BLOG/「Stylus」でTwitter, YouTube, Instagramのサイドバーを非表示にする