先日新UIになったGoogle リーダーは、カラーリングがシンプルになったり、リスト行間や文字が大きく読みやすくなるなどの変更が施されています。 しかし、このUIでは色あい的に見にくい、コンパクトなノートPCでは画面内に収まり切らないなどの意見も出ているようです。 このUIの評価は人それぞれかと思いますが、とりあえず細かな部分を調整したいという方も多いと思います。 userstyles.orgには、こうした要望を持った方のためにすでに新Google Reader用のユーザースタイルが大量にアップされています。 そこで今回は、そんな新Google Reader向けのStylish用ユーザースタイルをいくつかまとめてご紹介したいと思います。 1．Google Reader fix 2011 light theme 余白部分を若干詰めて記事表示スペースなどを拡大します。 2．Old styled

本日 Google リーダーに新しいデザインが適用されました。配色もだいぶ変わったようですが余白がたっぷりとってあって一覧性に乏しいのが気になったので userContent.css で調整してみました。 userContent.css 適用後 CSS @-moz-document url-prefix("http://www.google.com/reader/view/"), url-prefix("https://www.google.com/reader/view/") { #top-bar { overflow: hidden; height: 30px!important; } .jfk-textinput { height: 20px!important; } .jfk-button { height: 22px!important; line-height: 22px!im

While I was coding the Elemin Theme (a responsive WordPress theme that I recently designed), one of the challenges that I faced was to make the embedded videos elastic. Using the max-width:100% and height:auto trick works with native HTML5 video tag, but it doesn’t work with embed code using iframe or object tag. After hours of experimenting and Googling, I finally found a trick on how to achieve

Web Performance Best Practices 下記、ウェブページのパフォーマンスを最適化するポイントをまとめたものです。 キャッシュの最適化 往復遅延時間を減らす HTTPリクエストを減らす ロードサイズを減らす レンダリングの最適化 関連書籍 1. Optimize caching キャッシュの最適化 ブラウザのキャッシュを活用 JavaScriptやCSSファイルや画像などのスタティックなリソースは、HTTPヘッダを使用してキャッシュをロードするようにします。 アドバイス スタティックなリソースは全て、積極的にキャッシュにセットします。 時々更新するリソースのキャッシュには、ファイルパスにフィンガープリントを埋め込みます。 IEでも確実にキャッシュされるように、Varyヘッダは削除します。 URLを自動生成している場合は、Fxのディスクキャッシュで使用している8文字のラ

手元のスタイルシートをフロートやネガティブマージンなどIE6のバグを回避する記述を自動生成するオンラインサービス「ie6fixer」を紹介します。 ie6fixer IE6に対応したスタイルシートを生成する方法は、以下の手順です。 「master stylesheet」の欄に、スタイルシートを入力。 「Give me my ie6 fixes」ボタンをクリック。 以上で、IE6のバグに対応したスタイルシートが生成。 IE6のバグに対応している箇所は、現在のところ下記の通りです。 「min-height」は、「height」に変更。 「float」は、「display:inline;」を追加。 「position:relative;」は、「zoom:1;」を追加。 ネガティブマージンは、「position:relative; zoom:1;」を追加。 「overflow:hidden;」は、

What does Styleneat do exactly? It organizes and standardizes your CSS - selectors, sub-selectors and properties - in a structure that makes it easier to define page areas and see how they relate to each other. So, for example, it turns this: #id1 { property: value; } #id1 .class1 { property: value; } #id1 .class1 a { property: value; property2: value2; property3: value3; } #id1 .class1 a span { p

Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に

最近のバージョンアップでかなり目障りになってきた Google Reader の余計なメニューを消す Stylish 用ユーザスタイルシートです。私の場合「スター付きアイテム」だけ残しています。 @-moz-document url-prefix(https://www.google.com/reader), url-prefix(http://www.google.com/reader) { #overview-selector, /*ホーム*/ #reading-list-selector, /*すべてのアイテム*/ /*#star-selector, /*スター付きアイテム*/ #trends-selector, /*トレンド*/ #your-items-tree-container,/*コンテンツ*/ #friends-tree-container, /*友だちの共有アイテム*/

2008年09月17日 Firefoxで『感動した！』ってアドオン１５個 WEBの仕事をしていると、様々なアプリを駆使して作業をこなすという事が多いのですが、わざわざアプリを立ち上げなくてもよい、Firefoxのアドオンがこれだ。 ◆IE Tab ■IE Tab :: Firefox Add-ons もはやIEは確認用でしかない！IEをFirefoxで確認するアドオン ◆Style Sheet Chooser II ■Style Sheet Chooser II :: Firefox Add-ons スタイルシートを切り替える場合に使える。 ◆CSSViewer ■CSSViewer :: Firefox Add-ons マウスオーバで指定した箇所のCSSのパラメータを確認できる。 ◆CSS validator ■CSS validator CSSのW3Cチェック。すんごい厳しいコーディ