ブラウザの拡張機能である“Stylus”（Chrome 版 / Firefox 版）を使って、ウェブサイトの見た目を変えることができます。この記事では、そのサンプルを紹介します。
Stylus 自体の使い方の解説は、こちらをご参照ください。
〈目次〉
Wikipedia
左サイドバーの「メインメニュー」を非表示にする
div.vector-main-menu-container{display:none}
Gmail
添付された画像の最大横幅を制限する
メールの本文内に添付された画像がGmailの画面上に表示されるとき、その画像の横幅の最大値を制限します。
img[data-bit="iit"]{max-width:50% !important} /* 50%にする場合 */
Yahoo! ニュース
コメント欄を非表示にする
div#articleCommentModule{display:none}
Cosense
相互リンクの末尾の矢印アイコンを非表示にする
Cosenseのページ同士が相互リンクになっているとき、相手のページへのリンクの末尾に、2本の矢印が自動で表示されるようです。これを非表示にします。
a.bidirectional-page-link{display:none}
Cosenseのページに掲載した画像をマウスでクリックして大きく表示したとき、画像の縦の長さを制限する
画像の縦の長さが、ウィンドウの高さよりも長いときに、はみ出ないようにするために使います。
max-heightの値として一応、100vhを採用していますが、それでも縦がはみ出る場合は、少し減らして90vhぐらいにするとよいです。
.full-content-modal .modal-body .full-content{max-height:100vh !important} /*画面の高さに合わせる場合: 100vh*/
ページタイトルの直下に横線をひく
.line-title{border-bottom:solid 1px #ccc} /* #cccにする場合 */
WorkFlowy
カーソルのある行に背景色をつける
div.name--focused div.content{background:#f7f8f9} /*#f7f8f9にする場合*/
適用例
（1行目にカーソルがある）
関連記事
同様の記事として、こちらもあります。
