「twicli スタイルシート」みたいなフレーズで検索をしてくる人が結構多くて、特に何も考えずに、参考になればいいねぇ、とか思ってたんだけど、ふと 気づいた。
twicliは、ほとんどの要素をJavaScriptで描画しているので、普通に「ソースを見る」ってやっても、今見えている画面のどの部分がなんていう名前(要素 名とかclassとかidとか)なのか分からないから、そういう事を知りたいのかなぁって。
検索しても実際のCSSのサンプルはたくさん出てくるけど、↑みたいなことがまとまってるところはあまり見かけません。
最近はTwitterもそうですけど、そういうサイト増えてます。その手のサイトのuserスタイルシートをどうやって書くのか書いときますね。
実は難しいことは何も無いです。OperaだったらDragonflyとか、FirefoxだったらFirebugとか、Chromeだったらデベロッパーコンソールとか、IEだったら開発者ツールとか使いましょう。
それぞれのツールの使い方はご自分で調べてください。
終わり。
読むのが大変なHTMLを読みやすくする魔法を教えましょう。
http://dev.opera.com/articles/view/opera-developer-tools/
ここのDOM Snapshotっつーブックマークレットを使います。というか、Dragonfly使えや、ってことで今は隠されちゃったみたいですが、ブックマークレッ ト自体は今でも使えます。これを使うと、表示中のページのまさに“DOM snapshot”が整形して表示されます。
javascript:(function(){var ele=document.documentElement.appendChild(document.createElementNS('http://www.w3.org/1999/xhtml','script'));ele.onload = function(){this.parentNode.removeChild(this);liveSource.open();};ele.src='http://devfiles.myopera.com/articles/59/liveSource.js';})()
User CSSやuser.js書くのに便利です。ちなみにサジェスト中の「候補がだーっと出た状態」のhtmlも取得できます。まぁ、Dragonflyが大は小を兼ねてはいるのですが、ちと大げさなんですよね。
不安な人は上記のブックマークレットに含まれるjsファイルを自分の管理下に置いてしまったらいいと思います。
「やる夫ブログ 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の勉強兼ねてやるとかいうのはありだと思う。そういう気もないなら諦めるか、検索してみるか、作ってくれそうな人をうまいこと誘導して作らせる(もちろん素直にお願いするのも可)とかしましょう。
以前、Dragonfly使うならメニュー追加するといいよって書いたことがあって、Opera 10 β1(build 1551)でもメニュー追加してみたんだわ。
で、色々眺めてて気がついた。
ウィンドウサイズの関係で若干切れちゃってるけど、Color Blind Testってのがあるのね。選択すると新しいタブが開いて、今開いてる画面の下にこんなのが追加された画面になる。
下の方の余白がなんでこんなに広いのかよく分からないのだけど、それはおいといて、表示されているそれぞれのボタン。これは実際にやってみて欲しいんですが、表示中のページの色が変わって見えるはず。
はてなのカラースターがリリースされたとき、id:tomoyaのこのエントリが結構注目を集めた けど、んじゃ、実際俺が作るこのページは色弱の人にはどんな感じに見えてんのよ、ってのを実際に確認できるツールです。
全ての人に使いやすいようにってのは、実際には難しいかもしれないけど、[Protanopia]：[Deuteranopia]：[Tritanopia]の3つのボタンを押してみるくらいのことはしてみてもいいんじゃないかな。
The 'Debug Menu' and the new weekly
Dragonflyを使ってて、ツール→詳細ツール→開発用ツールって呼び出すのめんどくさいよ、とか言ってる人は、早くここに行って真ん中へんにあるHow To Install
のところのJust click here to download the Menu.
ってのをポチっとやって下さいね？約束だよ？