ブラウザの拡張機能“Stylus”の使用例

ウェブブラウザの拡張機能（アドオン）である“Stylus”（Chrome版 / Firefox版）を使って、ウェブサイトの見た目を変えることができます。この記事では、そのサンプルを紹介します。

Stylus自体の使い方の解説は、下記の記事をご覧ください。

---

〈目次〉

---

Twitter

PCブラウザ版で左側のサイドバーをスクロールするためのスクロールバーを消す

ただし、これを適用すると、サイドバーにおいて画面外にはみ出している部分は見えなくなります。

header[role=banner] div{overflow-y:hidden}

適用前

適用後

タイムラインに表示されているツイートのフォントサイズを変える

.TweetTextSize{font-size: 15px !important}   /* 15pxにする場合 */

Web版のTwitterで「＃ 話題を検索」・「トレンド」・「おすすめユーザー」・「フッター」を非表示にする

下記の各タイトルにて「新UI」とあるものは、2019年1月頃から使えるようになった、Web版のTwitterの新しいUI（これまたはこれ）において適用するCSSであることを示しています。
「旧UI」は、それ以前からあるUI（これ）を指しています。

「話題を検索」を非表示にする（新UI）
画面の左上のほうにある「＃ 話題を検索」を非表示にします。

a[aria-label="調べたいものを検索"]{display:none}

「トレンド」を非表示にする（新UI）
タイムラインの右側に表示される「トレンド」を消します（スクリーンショット）。

div[aria-label="タイムライン: トレンド"]{display:none}

「トレンド」を非表示にする（旧UI）

div.Trends{display:none !important}

おすすめユーザー」を非表示にする（新UI）

aside[aria-label="おすすめユーザー"]{display:none}

「おすすめユーザー」を非表示にする（旧UI）

div.wtf-module{display:none !important}

「フッター」を非表示にする（新UI）
フッターとは、これのことです。

nav[aria-label="フッター"]{display:none}

「フッター」を非表示にする（旧UI）

div.Footer{display:none !important}

「トレンド」欄内の広告を消す（旧UI）

「トレンド」欄の中の、このような広告部分が消えます。

li.promoted-trend{display:none}

左下のアカウント表示を消す

Web版のTwitterで左下にある、アカウント名の表示部分（クリックするとアカウント切り替えのメニューになる部分）を非表示にします。

div[data-testid=SideNav_AccountSwitcher_Button]{display:none}

「○○さんがフォローしています」をPCのブラウザにおいて非表示にする

別の記事で解説しています。

サイドバー内の“Twitter Blue”を非表示にする

（この“Twitter Blue”を非表示にします）

a[href="/i/twitter_blue_sign_up"] {
    display: none;
}

DuckDuckGoの検索結果の横幅を変える

DuckDuckGoの検索結果が表示される部分の横幅は、設定画面の「外見」のタブの「ページ幅」のところで3段階に変えられますが、3つのどれを選んでも、幅が狭すぎたり広すぎたりしているかもしれません。

（DuckDuckGoの設定画面）

Stylusで次のようにCSSを適用すれば、望み通りの横幅を指定できます。この例は750pxにする場合です。

.c-info, .c-base, .c-icon, .c-list, .c-product, .c-detail, .zci__main.has-aux, .zci__main--answer, .results--main, .zcm-wrap--header{max-width:750px}

（適用前：設定画面で「普通」を選択した状態）

（適用後）

Evernote Web

Evernote Webで外部リンクにマウスカーソルを合わせたときのポップアップを非表示にする

div#gwt-debug-FloatingLinkBar-root{display:none !important}

Wikipediaのダークテーマ

不完全なところはありますが、おおむね使えるかなと思います（※最終更新：2019/01/23）。

li.selected, li.new, li.collapsible,li#ca-nstab-user,li#ca-talk, div.boilerplate, div.afd, div.vfd, div.xfd-closed, .toccolours, table.infobox td{background-image:none !important;background-color:#333 !important;border:none !important}
div#template-documentation, div.template-documentation{background-color:#333 !important}
.toccolours{border:solid 1px #ddd !important}
div.boilerplate, div.afd, div.vfd, div.xfd-closed{border:solid 1px #ddd}
.VectorTabs ul{background-image:none !important;border:none !important}
/*div#content{border-top-width:1px !important}*/
body, div#content, div#mw-page-base,div#toc,table.infobox,h1,h2,h3,h4,h5,h6,h7{background:#333;color:#ddd}
a:link{color:#3E93C3 !important}
a:visited{color:#9760C3/*#883EC3*/ !important}
a.new{color:#ba0000 !important}
table.ambox, .referencetooltip li,div.catlinks,table.nowraplinks tbody,div.navbox,div.thumbinner,table.tmbox,tabletmbox-content,table.plainlinks,table.wpb-outside{background-color:#333}
.referencetooltip li{border:solid 1px #ddd}
cite:target, li:target{background-color:#333 !important;border:solid 2px #def}

Dynalist

フォントを変える

特にDynalistをFirefoxで開いたときに、Dynalistの設定画面でフォントをsans-serif系（メイリオなど）に変えても、表示はserif系（明朝体系）のままであることがあります。その際は下記のようにするとフォントを変えられます。

*{font-family:sans-serif}  /*sans-serifにする場合*/

背景色を変える

ヘッダーとサイドバーの背景色は変わりません。

div.main-container{background-color:#ddd}  /* #dddにする場合 */

適用例

ヘッダーとサイドバーの背景色を変える

設定画面でテーマとして“Dark”を選択したときの本文部分の背景色（#181818）をヘッダーとサイドバーにも当てはめる場合の例で示します。

/*ヘッダー*/
.AppHeader {
    box-shadow: none;   /* 影を消す */
    background: #181818;   /* #181818 にする場合*/
}

/*サイドバー*/
.is-desktop .LeftPaneSlidebarContainer {
    box-shadow: none;   /* 影を消す */
}
.is-desktop .LeftPaneContainer-nav {
    background: #181818;   /* #181818 にする場合*/
}
.is-desktop .LeftPaneContainer-navItem {
    background: #181818;
}

適用前

適用後

マウスでクリックした行／マウスカーソルがある行の背景色を変える

div.is-hovering{background-color:#ccc}  /*#cccにする場合*/

選択した文字列の背景色を変える

::selection{background-color:#0000ff !important}  /* #0000ffにする場合 */

ドキュメントペイン（サイドバー内）で各ドキュメントの行頭にあるアイコンを隠す

.DocumentItem-icon.pane-item-icon{display:none}

.DocumentItem-header.pane-item-header{padding-left:0}   /* アイコンが消えた部分の余白を切り詰め、ドキュメントタイトルを左端に寄せたい場合は、この行も加える */

ブックマークペイン（サイドバー内）で各ブックマークの行頭にあるアイコンを隠す

.BookmarkItem-icon.pane-item-icon{display: none}

行頭の縦線を消す

下記の画像のb, cの行のように、ある項目の下位項目である行の行頭に縦線が表示されますが、これを消します。

div.Node-children{border-left:none}

Gmail

フォントサイズを変える

body *{font-size:14px !important}  /* 14pxにする場合 */

note（note.mu）

Serif（明朝体系）のテキストもSans-serif（ゴシック系）で表示する

.body-wrapper p{font-family:sans-serif !important}

関連記事

同様の記事として、こちらもあります。