現在地

UserCSS

ChromeのStylishで特定のドメイン以外にuser styleを適用する

作成者:mattz 作成日:水, 11/12/2014 - 14:25

こんなことをつぶやいた。まぁつぶやいたところで滅ぶはずもないので、Stylishの全てのページに適用する(適用先に何も設定しなければそうなる)styleとして、

*{
  font-family:inherit !important;
}
pre,code
{
  font-family:monospace !important;
}

と書いた。まぁ考慮漏れな部分は多々あるが、自分用でしかないので気づいた時に直せばよかろう。

書いたのだが、さすがに一部のサイトでは不具合、というか不都合があったので、適用先に正規表現に一致するURLとして

^(?!https?://(mattz\.xii\.jp|example\.com)/).*

と書いてみた。うまくいっているようなので、メモとしてエントリに残す。

※例なので自サイトのドメインとしているが実際は違う。イントラサイトとかなのでここには書けない。

え?Opera?使ってないし知らない。

livedoor Readerの表示を左右逆にするuserCSS

作成者:mattz 作成日:火, 04/19/2011 - 10:41

個人的に「右側にメニュー類」が好きなんですよね。Windowsのタスクバーも、Operaのタブバーも(今は使ってないけどパネル使うときはパネルも)全部右に配置してるし。
自己分析すると、日本語(以外の多くの言語もそうですが)はltr(左から右に書かれる)なので、多くの場合文章のかたまりはブロックの中の左側に寄ります。で、この時に左側がメニューだとごちゃごちゃしたものが目に入るのが気が散って嫌なんだと思います。

それなりに理由はあるんだと思うんですが、PC関係は左側にメニュー類が配置されているものが多いです。livedoor Readerもツリービュー?が左で、メインの表示領域が右という配置で、まぁ、特に何も考えずにこれまでずっと使ってきたんですが、昨夜急にそれが気になりだしてしまったのでuserCSSを書いてみました。

@charset 'utf-8';
/* 配置を逆に */
#left_container{
  float:right !important;
  width:250px !important;
  position:absolute !important;
  right:0 !important;
  left:auto !important;
}
#right_container{
  float:left !important;
  width:auto !important;
  position:absolute !important;
  right:250px !important;
  left:0 !important;
}
/* ツリービュー?のスクロールバーを右にする為に */
#subs_container{
  direction:ltr !important;
}

twicli(のようなページ)のuserスタイルシートの作り方

作成者:mattz 作成日:火, 03/08/2011 - 14:20

「twicli スタイルシート」みたいなフレーズで検索をしてくる人が結構多くて、特に何も考えずに、参考になればいいねぇ、とか思ってたんだけど、ふと 気づいた。

twicliは、ほとんどの要素をJavaScriptで描画しているので、普通に「ソースを見る」ってやっても、今見えている画面のどの部分がなんていう名前(要素 名とかclassとかidとか)なのか分からないから、そういう事を知りたいのかなぁって。

検索しても実際のCSSのサンプルはたくさん出てくるけど、↑みたいなことがまとまってるところはあまり見かけません。

最近はTwitterもそうですけど、そういうサイト増えてます。その手のサイトのuserスタイルシートをどうやって書くのか書いときますね。

実は難しいことは何も無いです。OperaだったらDragonflyとか、FirefoxだったらFirebugとか、Chromeだったらデベロッパーコンソールとか、IEだったら開発者ツールとか使いましょう。

それぞれのツールの使い方はご自分で調べてください。

終わり。

Togetter向けuser.jsバージョンアップ

作成者:mattz 作成日:水, 09/15/2010 - 20:25

2011/06/02 追記

2011/5末のリニューアルに伴い、リンク削除。

2010/04/16 追記

自分で使っていて見つけた不具合の対応だの、気に入らないところの調整だの追加したい機能だのがちょこちょこと出てくるので、結構頻繁にバージョンアップしています。で、本日現在の最新版。

http://mattz.xii.jp/sites/default/files/togetter_3_0_4.js

ちなみにバージョン2系の更新履歴はこんな感じ。

//   2.0.0 b1 2010/09/15 リリース
//   2.0.0 b2 2010/09/16 RT省略時のURLがリンクにならないのをとりあえず対応
//                       タイトルのNGワードフィルタ機能追加
//   2.0.0 b3 2010/09/16 まとめの時系列が逆転しているtweetにマークする機能追加
//   2.0.0    2010/09/22 まとめた人のIDでフィルタリングする機能追加
//   2.0.1    2010/10/01 リニューアル対応,
//                       設定キャンセルボタンの追加
//   2.0.2    2010/10/04 全体がRTであるtweet(意味があるというのもわかるが邪魔だ)を隠す機能を追加
//                       ついでにclip関係にバグがあったので修正
//   2.0.3    2010/10/05 サマリの省略方法の変更
//   2.0.4    2010/10/22 設定を開くボタンの表示位置を選べるようにした。
//   2.0.5    2010/11/29 はてなブックマークの変更に対応

ここから元々のの本文

Togetter関連の諸々を一つにまとめてみました」で公開しているtogetter.jsですが、色々思うところあって、バージョン2を作りました。

http://mattz.xii.jp/sites/default/files/togetter_2_0_0.js

2010/10/01リニューアル対応版
http://mattz.xii.jp/sites/default/files/togetter_2_0_1.js

2010/10/04 バグ修正&機能追加
hhttp://mattz.xii.jp/sites/default/files/togetter_2_0_2.js

バージョン1から変わったこと

ページャー機能の廃止
ネイティブなページャのみで十分であろうと判断。
各種設定をブラウザ上でできるように変更
ウィンドウ右上に常に黄緑色の■が表示されるようになりますが、これをクリックすると、設定変更できます。
localStorageチョーベンリ。
特にgreasemonkeyの人は、scriptを書き換えるというのは大変そうなので。
とはいえ、今回greasemonkeyとして機能するかどうかは全く検証してません。基本Opera用です。
Greasemonkey版も一応用意しました。動かない(Firefoxでは動くみたいですが、Chromeだとダメですね)とか文句言われても対応できませんので、自分で何とかしていただいて何とかしたら是非公開してください。
Greasemonkey版は諦めました。jQueryを読み込む処理の分、別版にせざるを得ないのに加えて、普段使いもしないFirefoxのために対応する気になれ ません。パブリックドメインなので、必要なら勝手になんとかしてください。
ID(スクリーンネーム)ごとに背景色を変更する機能の廃止
要らないよね?どうしても欲しい人がいたら追加しますけど。
思いっきりjQueryに依存
何かと便利なので。

バージョン2公開時からさらに変わったこと

まとめた人のIDによってフィルタリングする機能を追加
誰とはここには書きませんけど。
個別まとめページのページ上部のメニューにコメント欄へのリンクを追加
コメントが増えてるかどうか確認したくて再訪することが結構あるので。
まとめタイトルをNGワードでフィルタリングする機能
ないすみーとかないすゆーとかホント興味ないんです。
まとめの並び順が時間順じゃない時に強調する機能を追加
わざわざそういうまとめをする場合、何かしら意図があるはずなので。

おすすめのuserCSS

あと、個人的には、下のようなuser cssと組み合わせるといいと思っています。色々非表示にしてますが、表示したい項目があったら、適宜修正してください。

div.list_body span[class]{
  font-weight:normal !important;
  font-size:inherit !important;
  font-style:normal !important;
  color:inherit !important;
}
.favorite_box                 /* 誰がお気に入りしたかとか興味ない                     */
,.hatena-star-star-container  /* どれだけスターがついたかとか興味ない                 */
,.tag_box                     /* どんなタグが付いているかにも興味ない                 */
,.icon                        /* どれだけ気に入られてるかとか読まれてるかとか興味ない */
,.ticket_img                  /* 新着かどうかとか興味ない                             */
,.side_user_box               /* 最近ログインしたユーザとか一番興味ない               */
,.blogparts_box               /* BOTのつぶやきとか見る必要を感じない                  */
,#footer                      /* フッタも要らね                                       */
,.twitter_button              /* Tweetボタンイラネ                                    */
,.livedoor_button             /* Clipボタンイラネ                                     */
,.delicious_button            /* delciousボタンイラネ                                 */
,.hatena_button               /* はてなブックマークボタンイラネ                       */
,.followme_box                /* フォローする気もない                                 */
{
  display:none !important;
}
.info_description{
  display:none;
}
a.info_title
{
  background-image:none !important; /* 一覧画面のタイトルの下線だと思ったら画像かよ */
  font-size:11pt !important;
}

2010/09/22 追記

「まとめた人のIDによってフィルタリングする機能を追加」したバージョンを先ほど公開しました。
とりあえずこれでバージョン2としてはフィックスします。当面、バグ対応以外の修正は行いません。

2010/10/04 追記

つもりでしたが、機能追加しちゃいました。

Togetterにおける「編集者の手による過剰な装飾を利用した意識誘導」につられなくなるためのUser CSS

作成者:mattz 作成日:金, 03/26/2010 - 14:10

タイトルのまんま。

div.list_body span[class]{
  font-weight:normal !important;
  font-size:inherit !important;
  font-style:normal !important;
  color:inherit !important;
}

追記:今現在僕が適用しているTogetterのuserCSS

上記に加えて

.favorite_box                 /* 誰がお気に入りしたかとか興味ない                     */
,.profile_box                 /* 誰がまとめたかとか興味ない                           */
,.info_description            /* サマリ読むと予断が生じるから見ない                   */
,.info_box_left               /* 誰がまとめたかには興味がない                         */
,.hatena-star-star-container  /* どれだけスターがついたかとか興味ない                 */
,.tag_box                     /* どんなタグが付いているかにも興味ない                 */
,.icon                        /* どれだけ気に入られてるかとか読まれてるかとか興味ない */
,.side_list_box .twitter_icon /* 誰がまとめたかには興味がない                         */
,.ticket_img                  /* 新着かどうかとか興味ない                             */
,.side_user_box               /* 最近ログインしたユーザとか一番興味ない               */
,.blogparts_box               /* BOTのつぶやきとか見る必要を感じない                  */
,#footer                      /* フッタも要らね                                       */
{
  display:none !important;
}
a.info_title
{
  background-image:none !important; /* 一覧画面のタイトルの下線だと思ったら画像かよ */
}

こんな感じ。

読みやすくする、以外に、まとめ人の意図を極力読まないというのが意図するところ。故にまとめられたtweet群とそこについたコメント以外の情報は邪魔 なものとして原則として排除している。

私のtwicliの設定

作成者:mattz 作成日:金, 03/12/2010 - 12:03

「twitter NG」とか「twitter フィルタ」とかで検索してくる人が結構多いので、自分のtwicli設定晒し。NGにするパターンはお好きなように。他のクライアントの事なんか知らんがな。

Pickup Pattern

NG::RT/article:1
retweetなんて見なくていい。WPなブログにありがちなarticleは除外。いわゆる公式RTはフォローする時に非表示に設定するので、考慮しない。
NG::QT:1
QTなんて見なくていい。
NG::^\.:1
postの先頭に「.」があったらNG。知らん人宛のreplyなんて見なくていい。
NG::.+@:1
postの先頭以外に@があったらNG。知らん人宛のreplyなんて見なくていい。自分宛はちゃんと「Re」タブに入るから見えなくなっても気にしない。
NG::B!:1
TL上では他人のブックマークなんて見なくていい。
NG::tumblr\.com:1
TL上では他人のtumblrなんか見なくていい。
NG::nicovideo\.jp:1
NG::nico\.ms:1
ニコニコ嫌い。
NG::ったー:1
そんなに嫌いってわけでもないんだけど、流行ったときにそればっかりになるのが嫌い。

「NG」でPuckupしといて、user stylesheetで見えなくする。

他にもいくつかのbot系を別タブに隔離したりはしている。

user stylesheet:


/* フォント設定
   お好みでお好きなようにどうぞ */
*{font-size:9pt !important;font-family:"メイリオ" !important;}
/* 不要なものを非表示にするスタイル設定 */
a#pickup-NG, /* NGワード的なもの。PickupPatternとの組合せで */
.uname       /* TLにはScreenNameだけでいいので */
{display:none !important;}
/* アイコンの表示サイズが大きすぎるので小さく */
img.uicon
{width:16px;height:16px;}
/* 入力欄を最初から広げとく。
   Auto-resize fieldとPost length counterはオフが前提 */
#fst
{height:55px !important;font-size:smaller;}
/* それに合わせてTLの表示開始位置を下げる。
   環境に合わせて要微調整。 */
#menu
{top:55px !important;}
#tw,#re,#tw2
{top:79px !important;}
/* 自分のpostとか自分宛のpostの背景色濃すぎる */
.fromme
{background:#ddffee;}
.tome
{background:#eeeeff;}
/* 大きすぎる */
.status{font-size:smaller;}

少しでも参考になれば幸いです。

やる夫ブログのUserCSS

作成者:mattz 作成日:金, 06/12/2009 - 18:51

「やる夫ブログ UserCSS」というキーワードで検索してきた人がいたので作った。細部はかなり適当。適当な場所に保存して、拡張子をcssに変更したら、やる夫ブログを開いて、F12を押して、サイトごとの設定を編集... ってのを選んで

表示設定タブを選んで、

ユーザースタイルシートってところの右側の[選択...]ボタンを押してさっき保存したCSSをファイルを選んで、[OK]で完了。スクリーン ショットはこんな感じ。

左右のマージンとか詰める余地ありだけどこれ以上時間かけるのはアホくさいのでしない。余計な横スクロールバーが出なけりゃいいん だ、こんなのは。あ、他のエントリへのリンクとかは全然考慮してないので、どっちかというとRSSリーダで購読してる人向け。

僕自身がどういう時にUserCSSを書くのかってのは以前書いたことがあるので、どんな風に作るのかを 簡単に書いてみようかと思う。

Dragonfly起動!

消したい要素のID/Class名を調べるのに使う。なんかそういう目的のuser.jsもあった気がするのでそれでも可。"表示メニュー→スタイル→クラスとID"でもいい。ただ、Dragonflyだったら、あとで細かい調整はしやすい。

秀丸起動!

別にテキストエディタは何でもいいです。


@charset "utf-8";

と記入。まとめブログ系だと、AA対策でフォントをMSなんとかゴシック、みたいなフォントにしたいときがあるので、文字コードの指定は必須。どんな時でも書く ように癖つけるといい。

あとは消したい要素のIDやclass名、どちらもなければ、親要素とか調べて、


#left,
#right,
#footer,
#header,
.comment
{display:none !important;}

とかやるだけ。

消したくはないけど、幅広すぎるんだよね、っていう要素があるような場合には、その要素に対して、


#box1{width:auto !important;}

これくらい書けたらCSSファイルを保存して、さっきの要領でそのサイトのユーザCSSとして設定してやって表示してみる。うまくいってない箇所があったら、CSSファイルを編集して開いたまま上書き保存してOperaをリロード。納得いくまで「CSSファイルを編集して」以下を繰り返し。細かいCSSの書き方については説明する気もないので、どっかよそで勉強してきて。

とにかく、そんなに難しい話でもないので、CSSの勉強兼ねてやるとかいうのはありだと思う。そういう気もないなら諦めるか、検索してみるか、作ってくれそうな人をうまいこと誘導して作らせる(もちろん素直にお願いするのも可)とかしましょう。

僕がUserCSSを書く理由

作成者:mattz 作成日:水, 11/19/2008 - 11:07

momizineみたいに「汎用的に使えるUserCSS」は書かない(自分の環境で気持ちよければいいし、そもそも汎用的なものは書けない)ので、滅多に公開したりしま せんが、自分用のUserCSSは結構書いてます。どういうサイトに当たったときにUserCSSを書きたくなるか、という話。

再訪の可能性
当たり前っちゃ当たり前ですが、またここのコンテンツを読みたいと思わないと、書かない。全文配信してるブログの場合は、ブログ自体がどんなにみづらい スタイルでも、RSSリーダで読めばいいので、一々UserCSSなんて書かない。
横スクロールバー
僕にとって読みづらいページスタイルの1等賞が横スクロールバーの出るページ。隠れてる場所に何が書いてあるか、あるいはないかは全く関係がない。横スクロールバーが表示されること自体が気持ち悪くて仕方ないので。広告やアフェリエイトがたくさん表示されていても、横スクロールバーが出ないようなら、大体の 場合はそのまま読む。
アニメーション
横スクロールバーが出ない場合でも、アニメーションする広告やブログパーツの類が気になる場合。もちろん、まずはコンテンツブロックを試すのですが、ブ ロックしきれない場合は仕方がないのでCSSで消すことを考えます。
アニメーションじゃなければいいのかって言うと、いいです。とにかく視界の端でチラチラ動かれるのがイヤ。動かない広告なら表示したままでも大して気に なりません。
どこが本文なの?
本文領域よりサイドバー的なものの領域が広いとかあるいは幅的に同じくらいの場合も気になります。広告を見てもらうのは大事でしょうけどね。

まとめると、広告まで見てほしかったらまず本文を目立たせて読みやすくして下さい。広告がでしゃばればでしゃばるほど広告が目に入らな く、というか意図的に遮断するようになります。

今さらだけど理由を追加

アダルトなアフィリエイト
昼休みに職場で開いたりもするもので。

gihyo.jp用のUserCSS

作成者:mattz 作成日:火, 10/07/2008 - 14:59

momizineがいつまでたっても書いてくれないので書いた。リクエストはしていない。

#sub,#footer,#secondary,#header{
        display: none !important;
}
#wrapper,#primary,#main{
        width: 100% !important;
}
#content{
        margin:0 auto !important;
        width:80%;
}

ヘッダもフッタも右側のメニューも全部要らないのでばっさりとdisplay: none !important;。あと適当に幅調整して1カラム化。スクリーンショ ットとか載せるといいんだろうけど面倒くさいので省略。

<br>の連打をuser CSSで無効にする

作成者:mattz 作成日:木, 06/05/2008 - 00:46

このuser CSSを適用すると、ページによってはOperaがCPUを占有してしまって、強制終了する以外になくなってしまう場合があります。ご利用 は計画的に。僕が普段利用する範囲内では平気なんですけどね。

芸能人のブログにありがちな<br>の連打。あれをどうにかuser CSSで無効化できないものかと、ずーっと悩んでた。

br+br{display:none;}

とかやると、どういう訳か<br>が全部非表示になってしまう。

隣接兄弟 選択子は,E1 + E2という構文をもつ。ここで,E2を選択子の主体とする。E1及びE2が文書ツリーにおいて同じ親を共有し,E1の直後にE2がくる場合に,こ の選択子は一致する。

なんだから<br>に続く<br>だけが非表示になって一個目の<br>は有効なはずだろうとか思うのだが、理屈はともかくうまくいかない 。「9 視覚フォーマットモデル」を読みながら色々試してたら、どうやらうまくいった。

br{display:run-in;}
br+br{display:run-in;}

理屈はよく分からないが、とにかく<br>がいくつ続こうが一回だけ改行されて表示されるようになった。懸案一個解決(?)。

追記

Gmail2で適用させると表示がひどいことになりますので、お気をつけ下さい。

さらに追記と修正

Opera9.50を困らせるCSS発見」を受けて修正。Yahoo地図は確認してないけど、amazon.co.jpは平気だった。

またまた追記

br+br{display:run-in;}にしても駄目なところはありますね。僕が普段行くところでは問題ないですけど、このブログへのrefferrerにあ った、http://www.artisopensource.net/hacks/deliciouspoetry_web_biennial.php?de... っていうURLを開いたらなっちゃいました。ここもまたなんだかよくわからないものすごいページですが。開かない方がいいですよ。リンクもさせません。

またまたまた追記

このCSSのせいじゃないのかもしれない。よくわかんなくなってきた。

2009/12/25追記

このエントリはあくまで、UserCSSとしてOperaなどのユーザさんが自分用にWebページの見た目を調整するための方法として書いたもので す。

○○ブログは勝手に<br />を挿入しちゃうから僕のブログにも採用してみたよ、とか言ってる人を時々見かけますけど、この方法は現時点で もっともユーザ数が多いと思われるInternet Explorerでは無効ですし、そんな小細工に頼るより、そういう余計なことをしないブログシステムに乗り換え たらどうですかね?大きなお世話かもしれませんけど。