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

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

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


〈目次〉


Twitter

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

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

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にする場合*/