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

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

Stylus自体の使い方の解説は、こちらをご参照ください。


〈目次〉


Twitter

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

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

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

ご注意:2019年1月頃から使えるようになった、Web版のTwitterの新しいUI(これ)においては、この設定は正しく動作しないと思います。

「トレンド」を非表示にする

div.Trends{display:none !important}

「おすすめユーザー」を非表示にする

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

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

f:id:ichbin:20181211131425p:plain

div.Footer{display:none !important}

3つとも非表示にすると、Twitterのホームはこのような見た目になります。

f:id:ichbin:20181211131215p:plain

「トレンド」欄内の広告を消す

ご注意:2019年1月頃から使えるようになった、Web版のTwitterの新しいUI(これ)においては、この設定は正しく動作しないと思います。

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

f:id:ichbin:20190311100659p:plain

li.promoted-trend{display:none}

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

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

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

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

f:id:ichbin:20190127091908p:plain
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にする場合 */

適用例
f:id:ichbin:20190302212831p:plain

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

設定画面でテーマとして“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;
}

適用前
f:id:ichbin:20190302221354p:plain

適用後
f:id:ichbin:20190302221421p:plain

選択行の背景色を変える

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

Gmail

フォントサイズを変える

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

note(note.mu)

明朝体のテキストもSans-serifで表示する

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

コトバンク

本文のフォントを変える

.dictype .ex section{font-family:sans-serif !important}  /* sans-serifに変える場合 */

*1:「次で始まるURL」を選び、右側の入力欄にhttps://twitter.com/と入力するのも可です。