web

日本語版tumblrとtombloo

いつからかそうなのか定かじゃないけど
tomblooの挙動がおかしくなって
テキストをreblogできなくなったり、
photoをreblogした時にreblog先の情報が消えてしまったりしてました。

こんな感じで
[image]tumblr

どうも原因はtumblrのダッシュボードが日本語化されて

XPath に title 属性を使っていて、それが日本語になったため

らしいです。

こちらで修正パッチが配布されてました。
Tumblr日本語ダッシュボード用Tomblooパッチ | 圧縮電子精神音楽浮遊構造体

はーこれはたすかる

うちの環境では直接右クリックからインストール出来ず
ダウンロードして
C:\Users\[ユーザー名]\AppData\Roaming\Mozilla\Firefox\Profiles\[プロファイル名]\tombloo\script
にぶっこんで
メニューの 「ツール」→「Tombloo」→「Tomblooのリロード」でインストールしました。

[image]パッチインストール後

それでは素敵なtumblr lifeを。

firefoxでmargin-bottomがmargin-top

[追記 / 20110323] コメント欄に別の対処法が2件あるよ

[image]firefox / 上にmarginが付いてh1との間に隙間があいてる

理由がわからないんだけど
Firefox(3.6.15のみ確認)でmmargin-bottomがmargin-topになるのです。

スクリーンショット

chrome

こうなって欲しい
[image]chrome / h1と#primaryに隙間は開かない

IE8

こうなって欲しい
[image]IE8 / chromeと同じ

Firefox

なのにこうなる
[image]firefox / 上にmarginが付いてh1との間に隙間があいてる

原因と解決法を考える

結論から先に書くと、上記の構成の場合
ulにdisplay:inline-block;を追加して意図した表示に出来た。

あれ、display:tableでも平気か?

Firefox

display追加するとこうなった。
[image]firefox / display:inlin-block;追加

けど理由が全くわからない。

どんな状況で発生するのか試してみると
liにposition:absolute;でも同じ現象が起きたので
浮動体に問題がありそうな感じ

多分Firefoxが間違ってるんだろうけど
firefoxの仕様が正しいのか他のブラウザーの仕様が正しいのか知りたい

ここら辺を理解できたら解決するのだろうか。。。?
Visual formatting model
Box model / 8.3.1 Collapsing margins

ulにborderを付けてもmargin-topみたいな隙間は消える
[image]border付けた
border使えない時はこれじゃダメだ。

rollover2.jsとoperaと色々復習

凄く滑らかなロールオーバーを超お手軽に実装できるrollover2.jsというものがあるんですが
クロスフェードするロールオーバー処理をお手軽に実装するJavaScript – KAZUMiX memo
クロスフェードするロールオーバー処理 動作サンプル – XHTML サンプル | KAZUMiX memo

これ、imgにvertical-align:bottom;や
vertical-align:top;を指定してある場合、
operaでpositionの基準点がうまくいってないような感じの
とんでもない表示になってて(v10.50以前は確認してないけど)

例 / positionの基準点がうまくいってない感じの表示
[image]左がfirefox、右がopera

今気づいたけど
aタグの中にrollover2.jsのロールオーバー対象になるimgだけが入っていると
おかしくなる。

aタグの中にimgの他に、テキストが入っているとおかしくならない。

蛇足 / imgにvertical-align:bottomしたい(してる)理由

ご存知vertical-alignの初期値はbaselineなので
アルファベットのg,j,p,q,yの下に飛び出る部分(ディセンダって名称らしい*1)の余白が確保され、テキストと並べた時にimgの下に隙間ができちゃう

この隙間を埋めるには、vertical-align:text-bottomを指定するのが定石みたいなんだけど
operaだとテキストの位置がズレてたので(10.50以降?)、
いつしかbottomで指定するようになって
しばらくしてbottomを指定するようになった理由を失念してました。

[image]text-bottomとbottom
今確認してみたらbottomも表示が変だった><;;;なんだこれ。

とりあえず
vertical-align:text-bottomを指定しとけば
operaでクリック出来なくなるくらい表示が崩れる事はないのかな?

ここから先は失敗を含む試行錯誤メモ

続きを読む

li内のaをdisplay:blockした時IE6でmargin-bottomぽいところが広がる

liの中のaタグにdisplay:blockを指定して
クリック出来る部分を広げた時
IE6で下marginが広がってしまった。

みた感じaタグのmargin-bottomが拡張されている風だけど
marginを0にしても消えない。

どうもこれは、hasLayoutがtrueじゃないから起こるみたいで
普段はaタグにwidthを指定してるから発生してなかった。
(widthに値が入ってればhasLayoutがtrueになる)

今回は_zoom:1を追加して対処。

他にhasLayoutをtrueにするには
hasLayout Property (A, ABBR, ACRONYM, …)

CSS property Value
display

inline-block
height

any value
float

left or right

position absolute
width any value
-ms-writing-mode tb-rl

zoom any value

デザインの前段階、サイトの構造とか。

頭の中のメモ、混乱しているのでアホな事書いているかもしれません。

サイトのデザインを始める前の情報をまとめるのが、本当に鬼門。
そもそも実生活でモノや情報を管理するのが苦手な人間なので、センスはアテにならない。
よってテクニックで補いたい(しかし困ったことにテクニックで補おうとしても相当ハードルが高い)。

(準備) > 設計 > 構築

情報を分類

膨大なデータ群から、必要な情報を簡単に取り出せるように。

階層、継承、属性、価値
ツリーとヒエラルキーの違いってなんだ?
混ぜて使えるのか?使った方がいいのか

例えば、本を
文庫 / 実用書 / コミック
みたいなカテゴリーで棚に分類しておいても
新刊だけを別に集めたら
同じものが分散しちゃうけどそうゆうものなのかしら。
どのグループにも属する場合の分け方はどうするんだろう。

分類の基準

以下のページにいいことが書いてあった。

LATCH – 5つの情報の整理棚 – モジログ

LATCH – 5つの情報の整理棚

1. Location (位置)
2. Alphabet (アルファベット)
3. Time (時間)
4. Category (分野)
5. Hierarchy (階層)

情報を分類する方法はこの5つしかない、とワーマンは言っている。

その他資料メモ

IAなんか怖くない~中小規模案件で考える情報アーキテクチャの第一歩~
WCAN 2010 Summer Session-1: IA

雑感

絶対的に完璧な法則が存在するんだろうなって漠然と思っていたけど
そんなのがあればユーザーテストなんて必要ないわけで
そんな都合の良いものは無いですよね。

IE6 CSS Fixer

ie6fixer – onderhond.com
普通のcssからIE6用のcssを吐き出してくれるサービス、現在バージョン0.95。

例えば

IE6だと左右のmarginが40pxになってしまう以下の記述

これをie6 css fixerで変換させると
(select your master stylesheetのpaste your complete master stylesheetを選択してgive me my ie6 fixesをクリック)

なんてcssを吐き出してくれる。

これを保存してコンディショナルコメントでie6だけ読み込むようにすれば対策完了。

でもって、最初からdisplay:inline;が付けてる場合は、新たにdisplay:inline;を吐き出さないのかな?と試してみたけどdisplay:inline;を吐き出してた。

というか、

を変換すると

を吐き出してた。
むむむ?

メモ / サイト内検索機能を追加するには

サイト内検索(全文検索)には、大きく分けてgrep型インデックス型というのがあるみたい。

ちょっと調べてみたところ、それぞれの特徴は大体こんな感じ?

種類 grep型 インデックス型
イケてるとこ 設置が簡単 検索が高速
イケてないとこ 検索対象が増えると速度低下 設置検索用ファイルを作成するので容量が増える
なんか敷居が高い

無料で公開されてるインデックス型全文検索

他にもあるけど

参考:全文検索 – Wikipedia