2008.9.28 12：53 追記 ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★ 公式サイトを開設しました。デモ動画、マニュアル付きダウンロード・パッケージをご用意しております。当エントリより下記の公式ページより情報を得られる事を強く推奨いたします。 http://zamamin.org/labs/black-out ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★ _________________ここから下は古い情報▼__________________________________________________ 今、自分のブログをスクラッチしているので、こちらで。→2008/9/28 スクラッチ完了！BLACK-OUT.CSS公式ページ 作りました 【black-out.css】 2008.9.13 23：30 追記wmtg.netドメイン失効に伴い、z
Firefoxの拡張であるStylishを使用すると、再起動なしでスタイルシートを適用してWebページだけでなくFirefoxのインターフェースも変更することが出来る。 この動作がわかれば、Foxdieのようなサブスキンを内蔵したテーマで、再起動なしにサブスキンを試すことが出きると考え、その動作の仕組みを探ってみた。 とりあえず、タブの高さを40pxにするスタイルをStylishに書く。 @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); tab.tabbrowser-tab { height: 40px; } DOM Inspectorで調べると「プレビュー(W)」ボタンは「chrome://stylish/content/edit.js」の「doPreview関数」を呼び出している
StylishとはFirefoxの拡張のひとつで、ユーザースタイルシートの作成と管理を助けてくれるもの。 userstyles.orgには大量のユーザースタイルシートが投稿されていて、Stylishを導入しているなら現在開いているサイトのユーザースタイルシートが無いか確認したりすることができる。 このStylishを使って去年あたりから細々とユーザースタイルシートを投稿してきたので、ここらで自分流のスタイルシートの書き方とかについていろいろまとめてみようと思った。 なお、一度でも使ったことがあるなら分かるが、かなり偏執的なレイアウトにしてしまうので、合わない人にはとことん合わないということを注意しておきたい。 どのようなサイトに向けて作成するか 基本的には訪問頻度と文章を読む上でのレイアウトの酷さ。レイアウトの酷さには以下の点が挙げられる。 無駄にデカいサイトロゴ サイドバーが多い サイド
先日TRANSさんで紹介されていたデバッグCSS、Firefxの拡張「Stylish」を使えば便利だと思うのですよ。 以前書いたFx拡張まとめでも挙げているように、Stylishはユーザースタイルシートの編集・管理をする拡張です。 デバッグ用CSS「Diagnostic Styling」とそのサンプルコード - TRANS [hatena] http://d.hatena.ne.jp/aratako0/20080119/p1 サイトのチェックをするたびにデバッグCSSを追記するのもちょっと面倒ですよね？ Stylishに登録しておいてチェックの時だけ有効にすれば、制作済みのファイルを汚すこともなくとても便利です。自分はこの方法でチェックをやっています。Web制作者なら大抵Firefoxをインストールされていると思うので、試しにやってみてはどうでしょう。（以下はWindowsでの手順で
Firefox Tip: Wrap Firefox's Bookmarks Toolbar で、Firefox のブックマークツールバーを多段表示するユーザスタイルシートが紹介されています。 /* Multi-row bookmarks toolbar */ #bookmarks-ptf {display: block;} #bookmarks-ptf toolbarseparator {display: inline;} 先日紹介したブックマークツールバーを自動的に隠すスタイルシートとあわせて使うと効果がありそうです。なお、Web Developerを自動的に隠す - Go my wayでも紹介されてる通り、自動的に隠すのはブックマークツールバーに限らず使えそうです。 ちなみに、私は、ツールバーを出し入れするときに、コンテンツがガクガクするのが気になるので導入をあきらめました。クイック検
Firefox Tip: Auto-Hide Your Firefox Bookmarks Toolbar より、久しぶりにクールなユーザースタイル発見。 以下のコードを、userChrome.css か Stylish に入れておくと、ブックマークツールバーを自動的に隠すことができます。Firefox 3 のナイトリーでも動作します。 /* Pop-up bookmarks toolbar */ #PersonalToolbar {display: none;} #navigator-toolbox:hover > #PersonalToolbar {display: -moz-box;} ブックマークツールバーを多段表示する - えむもじら
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document url-prefix("http://www.tumblr.com/dashboard") { #followers a:visited{display:none} } 最速廃人研究会に書いてあるGreasemonkeyスクリプトをCSSにしただけ tumblr内でまわってたユーザースタイルシート勝手にメモり /* friends非表示 */ ul#friends{ display:none; } /* ReBlogされた画像が白くならないように */ ol#posts li.dim div.post_container { opacity: 1.00 !important; } /* ReBlogされたものもReBlog出来るように */ ol#posts li.d
del.icio.usのタグを束ねる機能「bundle」はとても便利です．ボクはタグを探しやすくするためにややムリをしながら「タグは英単語で！」としています．タグを日本語でつけてしまうと目視で探すのがとても困難になりますよね．さらに，「a」で始まるタグはbundle「A」にまとめ，他のアルファベットについても同じように管理するとさらに探しやすくなります．多くのdel.icio.usユーザの方々がbundleを上手に使っているのを見て，ボクも真似しています． june29’s bookmarks on del.icio.us しかしbundleは手動で設定するため，新しいタグが現れるたびにbundleの設定を更新しなければなりません．そしてタグが増えてくると，bundleに含まれていないタグを目で探すのが非常に困難になります．これはdel.icio.usのCSSが良くないからでしょう．そこで
ユーザースタイルシートとは 従来，Webページのデザインはページ制作者のみが行なってきました．このため，自分の環境では不都合があったり自分にとって好ましくないデザインの場合でもデザインを変更して読みやすく・見やすくすることはできませんでした． しかし，ユーザースタイルシートの登場により，大げさに言えばユーザー（閲覧者）がページのデザインを行なうことが可能になりました．ユーザースタイルシートに対応したWebブラウザ，例えば，Internet ExplorerやFirefox，Opera等を利用している場合，自分の都合に合わせてページを読む・見ることが出来ます．ここではFirefoxやSeaMonkey（Mozilla）等のGeckoブラウザの機能をフルに使ったユーザースタイルシートの実例を紹介します． World Wide Webは，見る側が好きなように見ることが出来る今までにないタイプのメ
Firefox 1.5 Beta 1よりURLやドメインなどでCSSルールを切り分けることが可能になりました。これによりuserContent.cssがとてもいじりやすくなった(あるサイト向けにテキトウに書いても他のサイトに誤爆しなくなった)ので、userChrome.cssと同じくガリガリいじると楽しいようなそうでもないような感じです。 _blankなリンクのカーソルを変更 a[target="_blank"] { cursor: alias !important; } cursor: crosshair !important;とかやってる人が多いことと思われますが、1.5 Beta 1から先取りサポートされたaliasにするとより直観的に把握できるようになると思います。 View Page Sourceのフォントを固定する body#viewsource * { font-family
今回はurl-prefix()を使った奴とか書いてみたり。いろいろやってたらuserContent.cssが2000行超えたりしましたが、特にページの表示が遅くなるとかいう感じは無いので、いくらでもCSSルールを書いて良さそう。限界はあるでしょうがね。 @-moz-documentとurl-prefix()を組み合わせて使えばURLの先頭一致でルールの適用を制限できたりします。具体的には、 @-moz-document url-prefix(http://www.example.com/~foobar/) { body { font-size: 100% !important; } p { line-height: 1.5 !important; } } とか、こんな感じで"http://www.example.com/~foobar/"で始まるURLのページだけに適用されるブロックを作成
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
