Lucky bag::blog: 個人的に気に入ってるユーザースタイルシート
今んとこ、ガチで不動のレギュラーメンバーな自分のユーザースタイルシートを晒してみる。userstyles.org で見つけたやつとか、自分で書いたやつとか。ちなみに、ユーザースタイルシートの管理は Firefox の 拡張 Stylish で。 livedoor Reader 用 各記事タイトルの下にある"元記事"って部分を URI に置き換えて表示 @-moz-document domain("reader.livedoor.com") { div.item_info { text-indent: -3em; } div.item_info a { visibility: hidden; } div.item_info a::after { visibility: visible; content: attr(href); } } Gmail 用 迷惑メールの未読数を見えなくしてボールド
line-height の値には単位なしが良いとされる理由
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
Fasterfox の先読みをブロックする方法 - lucky bag
自サイトのアクセスログ見てて、同時刻に複数ページへすんげぇ勢いでアクセスしている Firefox の UA 名なんか見つけると、Firefox を高速化する機能拡張 Fasterfox 使ってんだろうなとか思うわけで、まぁここら辺のことはかなり前に最速な人が取り上げてたりする。 今までこの Fasterfox のリンク先読み機能に対して、サイト側の方ではどうにも出来なかったんだけど、Fasterfox のバージョンが 1.0.3 になってから robots.txt を読むようになったらしく、下記の2行を robots.txt に記述すれば先読みをブロックできる。 User-agent: Fasterfox Disallow: / つう訳で、サーバに負荷をかけられたくねぇって人や、ログに余計なノイズを残すなやって人はやってみると幸せになれるかも知れないですぜ ！
Lucky bag::blog: CSS だけで Mac OS X の Dock 風ナビゲーション
Paul Armstrong Designs - Weblog - CSS マウスオーバーした時にグニュって拡大する Mac OS X の Dock っぽい動きを CSS だけで実現させるってアイデア。このギミックがユーザビリティ的にどうかは置いておくとして、隣接セレクタを使ってフォントのサイズを段階的に変えるってのは面白いなぁ。試しに自分でもサンプルを作ってみた。ちなみに動作するブラウザがかなり限定されしまい、 隣接セレクタ未対応の IE はもちろん、Opera や Safari でもうまく動作しない。まぁほぼ Gecko オンリーって感じ。 対応ブラウザ Firefox 等の Gecko 系 Internet Explorer 7 beta 2 テキストをズーム CSS だけで Mac OS X の Dock 風ナビゲーションのサンプル その 1 li { font-size: 1em
Lucky bag::blog: CSS の習得度レベル 5
あらゆる言語がそうであるように、プレゼンテーション言語である CSS にも習得度の段階がある。自分が思うレベル 5 を挙げててみた。とか、それらしく始めてみたけど実はかなりネタ気味な内容。ここ最近のあまりの忙しさに現実逃避で思いつくまま書き連ねてみただけ。当然の事ながら、この内容が万人に当てはまるわきゃないですよ ;-P CSS 習得度レベル 1 色とか簡単に変えられるらしい事を知っている CSS を使うのはフォントサイズの指定くらい CSS を使うメリットが良く分からない レイアウトには table 要素を使えば良いと思う まず、何から覚えれば良いのか分からない CSS 習得度レベル 2 外部 CSS ファイルのメリットを知っている ある特定の要素にスタイルを適用するには (X)HTML の方に ID かクラスを割り当ててから CSS で指定する CSS ハックでブラウザごとに指定を振り
web2.0 なソーシャルレコメンダーサービス「Riffs」 - lucky bag
Riffs: Your Social Recommender - Ratings, Rants, Raves, and Reviews あらゆる物をレコメンドして tag をつけてレビューして rate して共有できる、web2.0 なソーシャルレコメンダーサービス「Riffs」ってのが登場したみたいで、ちょこっと見てみたけど結構面白そう。Firefox のロゴやアイコンをデザインした Jon Hicks が関わっているんだけど、彼らしいデザインになってるなぁ。 レコメンドされたものは、Riffrs と呼ばれるユーザがレビューや評価をする。レコメンドされている物の詳細情報は誰でも edit できたり、簡単なチャット機能なんかもついてたりする。もちろん RSS が用意されていて、注目しているものは最新の情報を受け取ることも出来るみたい。自分の感覚に近い Riffrs をお気に入りとして、その
Lucky bag::blog: del.icio.us を使いやすくする Firefox の機能拡張
ソーシャルブックマーク del.icio.us のトップページをログアウトした状態で見てみると、なんかいい感じに洗練されてきてる。そんで、何下に help ページを覗いたら、Firefox extension ってのが追加されていた。 インストールすることで、del.icio.us を使う上で便利な機能が付加される。ツールバーには自分の del.icio.us ページへのボタンと、今見ているページを del.icio.us にポストするボタンが追加される。んで、メニューには del.icio.us の各種メニューが追加。 あと、右クリックのメニューにも「Tag This Page...」が追加される。これが、リンクを右クリックした際には「Tag This Link...」に変わる。つか、これが良いかも。Bloglines とかでフィード見てて、気になったものがあったらそのまま右クリックから
Lucky bag::blog: Firefox で開いているタブを Expos
ここ最近のマックの UI では Exposé が最強って思ってるんだけど、その機能を Firefox のタブで再現できる foXpose がいい感じ。 ネットで何か調べもんをしていると、Firefox のタブを余裕で 10 個以上開くなんて事がある。タブが増えればそれだけタブ幅が狭くなってくるわけで、そうなってくると当然ページタイトルが判別できなくなって、どれがどれか分かんなくなってくる。そんな時 foXpose をインストールしてれば、ステータスバーにある foXpose ボタンで今開いている全てのページをサムネール化、目的のページを選択っつうまさに Exposé な機能。スバラシス！ Ctrl（command) + Shift + X のショートカットも用意されているんだけど、Web Developer Extension 入れてると「ページの縮小」とバッティングしちゃうんで、Web
del.icio.us の help ページと Tag rolls - lucky bag
ソーシャルブックマークの del.icio.us が、またまた微妙に変わってたりする。ページ上部が Breadcrumb shortcuts というナビゲーションになってて、ここに直接 tag を入力する事が可能になった。これによって、tag 一覧から探してクリックしなくても、目的の tag を入力してダイレクトにアクセスできる。 んでもって、今回一番変わったのが、help ページが作られたこと。今までは about ページってのがあったんだけど、それを一新して help ページとして充実した形に変化した。API の説明から del.icio.us の使い方まで、かなり細かく説明がされている。 そんな help ページで見つけた、面白そうなもんが Blog Integration 欄にある Tag rolls ってやつ。自分の tag 一覧を自サイトに表示するためのスクリプトを生成すること
Google をカスタマイズできる Firefox の機能拡張 - lucky bag
Google の検索画面を見ない日は無いってのは、ちと大げさかも知れないけど、それだけ Google の使用頻度は高い。Firefox では Greasemonkey を使って Google を Remix ってのがあるけど、Greasemonkey を使いたくない人は CustomizeGoogle と言う機能拡張をインストールしたら、少し幸せになれるかも知れない。 CustomizeGoogle は Firefox の拡張機能です。この拡張機能は Google の検索結果に他の情報 (Yahoo, Ask Jeeves, MSN 等のリンク) を追加し、余計な情報 (広告やスパム) を取り除くことが可能です。これらの機能はすべてあなたの任意で使用できます。 CustomizeGoogle をインストールすることで、下記のような事が設定できる。（もちろん、これが全てではない） 通常Goo
Lucky bag::blog: dt と dd を横並び
定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく） dl_sample01.html float を使った方法 margin を使った方法 position を使った方法 <dl> <dt>foo</dt> <dd>bar</dd> <dt>foo</dt> <dd>bar</dd> </dl> ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt
iTunes ミュージックビデオをダウンロードする方法
iTunes ミュージックストア上のミュージックビデオをローカルに落とす方法ってのを試してみた。 How-To: Download music videos from iTunes ミュージックストアの左メニューに『ミュージックビデオ』メニューがあるんだけど、日本のミュージックストアにはまだまだビデオが揃ってない。一方、米国の方とかだと今日現在で 596 本あったりするんで、そっちで試してみた。 ミュージックストアの左メニューから『Music Videos』を選択する。 登録されているビデオがサムネールで表示されるんで、落としたいビデオを選択する。 small もしくは Large 上で右クリック -> "iTunes ミュージックストア URL をコピー" 「.:UNEASYsilence:. - iTunes Music Videos」へアクセスし、URL をペーストして "submi
Firefox で閲覧中の画面を簡単に画像に保存できる機能拡張 - lucky bag
blog.tokyoace4.com - Firefoxで表示画面をpngにするextention (2005年9月 5日 17:53) screen grab! こりゃ便利だ。 とてつもなく便利だ。感動した。... 続きを読む 脳無しの呟き - Screen grab! (Firefox Extension) (2005年9月 5日 20:10) 『Firefox で閲覧中の画面を簡単に画像に保存できる機能拡張』（Lucky bag::blog）で知ったのだが、これはスゴイ。仕事でサイトのスクリーンショッ... 続きを読む Happy Hour - 続：WEBキャプチャツール (2005年9月 5日 20:13) ちょーどタイムリーな記事はけーん。 Firefox で閲覧中の画面を簡単に画像に保存できる機能拡張 FireworksのExtensionにもあるそうです。 素... 続きを読
Lucky bag::blog: 画面内を測ることが出来る Firefox の機能拡張
ブラウザの画面内をメジャーで測れる Firefox の機能拡張「MeasureIt」は、それほど使用頻度が高いもんではないけど、あったら便利な小物。 Firefox にインストール後、「ツールバーのカスタマイズ」からツールバー上に「MeasureIt」のアイコンをドラッグ。 使用する際は、「MeasureIt」ボタンを押し、任意の場所でドラッグすればメジャーがピクセル数とともに表示される。一度測った測定領域を移動させたい場合は、ドラッグ、もしくは Alt + 矢印キーで 1px 単位、Ctrl + Shift + 矢印キーで 5px 単位での移動が可能。抜け出すためには、「MeasureIt」ボタンを再押下するか Esc キーを押せば良い。ちょっと残念な点は、メジャーのドラッグを途中でやめてしまうと、そこから広げたり縮めたりの調整が出来ないとこかなぁ。
訪問済みリンクを一工夫する - lucky bag
リンクの色によって、訪問済みなのか否かの判別を出来るようにするってのは、ユーザビリティ的には必要なことだとは思う。そう言った意味では、拙サイトなんかは全くもって許し難い設計な訳だけど、まぁそれは置いておく。んでもって、ただ色を変えるだけではなく、画像を使ってもうちっと視覚的に分かりやすくするのもありなんじゃないのかなぁって思ってみた。そして、サンプルを作ってみた。 visited_link_sample.html サンプル内のリンクが既に訪問済みであれば画像がチェックマークに変わるはず。CSS は下記のような感じで、a 要素に対してそれぞれ a:link、a:hover、a:visited で一つの背景画像の位置を変えることで見せ方を変えている。 li a { padding-left: 25px; line-height:180%; background:URL(mark.png) no
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Lucky bag::blog: CSS だけでフォトギャラリーのサンプル