小技チョコレート

ちょっとした小技を紹介するだけのブログです。

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

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

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


〈目次〉


Dynalist

行頭のバレットを消す

各行頭の点(バレット=黒丸)を消します。

a.Node-bullet{display:none}

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

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

なお、Dynalistに標準で備わっている機能だけを使ってバレットを消すこともできます。ただし、その機能を使うと行間が広がってしまうので、狭める処置が必要かもしれません。詳しくはこちらのリンク先をご覧ください。

画像の最大横幅を指定する

Dynalistに載せた画像の横幅の最大値を指定します。

img.node-displayed-image{max-width:300px}  /* 300pxにする場合 */

画像の最大縦幅を指定する

Dynalistに載せた画像の縦幅の最大値を指定します。

img.node-displayed-image{max-height:300px}  /* 300pxにする場合 */

Roam Research

CSSの例

Twitter(ツイート)の展開を避ける

Roam ResearchにツイートのURLを貼り付けると、このように展開されますが、この展開された部分を非表示にします。

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

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

CSS

twitter-widget, span.dont-focus-block button{display:none !important}
半角スペースがある位置で改行されるのを防ぐ

半角スペースがある位置で改行される場合があります。これを起こらないようにします。

適用前
f:id:ichbin:20200419150950p:plain
(行頭のほうにあるコロン:の直後に半角スペースがあり、ここで改行されてしまいます)

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

CSS

div.roam-article *{white-space:normal !important}
本文中に貼り付けた画像の横幅や縦の長さの最大値を指定する

横幅の最大値を指定する

div.react-resizable img{max-width:300px !important}  /* 300pxにする場合 */

縦の長さの最大値を指定する

div.react-resizable img{max-height:300px !important}  /* 300pxにする場合 */

適用先の指定の仕方

「次で始まるURL」を選んでhttps://roamresearch.com/#/app/(ユーザー名)とするか、
あるいは「ドメイン上のURL」を選んでroamresearch.comと指定します。

f:id:ichbin:20200419082443p:plain

はてなブログ

編集画面の「お題」を非表示にする

編集画面で本文欄の上に表示される「お題」部分を非表示にします。編集画面のURLがhttps://blog.hatena.ne.jpで始まっている場合のみ有効です。

f:id:ichbin:20191213182410p:plain
(背景がグレーの部分が「お題」)

CSS

div.promotion-bar{display:none}

適用先の指定
適用先は「正規表現に一致するURL」を選択し、その右側の入力欄に
https://blog\.hatena\.ne\.jp/.*/edit(\?entry=.*)?$
と入力。

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

TweetDeck

カラムの横幅を変える

デフォルトでは、TweetDeckのカラムの横幅は最大で350pxのようですが、それ以上に広げることもできます。

事前に、設定画面の"COLUMNS"のところで"Wide"を選択しておきます。

f:id:ichbin:20190826095942p:plain

CSS

html.dark .is-wide-columns .column{width:500px}  /* 500pxにする場合 */

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

適用後(横幅500pxの場合)
f:id:ichbin:20190826100538p:plain

引用されたツイートの本文の色を変える

div.quoted-tweet *{color:#fff}  /* #fffにする場合 */

コトバンクhttps://kotobank.jp

CSSの例

ダークテーマ

適用後のスクリーンショット f:id:ichbin:20190710113020p:plain
(記事ページ)

f:id:ichbin:20190710112241p:plain
コトバンク内での検索結果)

CSS

/*背景色と文字色*/
body, div#mainArea * {color: #ccc;background: #222}
a:link {color: #3E93C3 !important}
a:visited {color: #9760C3 !important}

/*コトバンク内検索の検索結果*/
div.gsc-result {border: none !important}

コンテンツが入る部分の横幅を狭める
#contentArea {width: 800px}   /* 800pxにする場合 */

本文をゴシック体にする
.dictype .ex section {font-family: sans-serif !important}

記事ページで本文のそばにある広告を非表示にする

スクリーンショット f:id:ichbin:20190710114232p:plain
(適用前)

f:id:ichbin:20190710114755p:plain
(適用後)

CSS

div.pc-iframe-ad {display: none}

適用先の指定の仕方

「次で始まるURL」を選択しhttps://kotobank.jp/と入力します。

f:id:ichbin:20190710112339p:plain

もしくは、「ドメイン上のURL」を選択しkotobank.jpと入力します。

Wikipedia

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

div.mwe-popups{display:none !important}

関連記事

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