はい。見た目変えた。
ちゃんと出来上がってからにしよかなーと思ってたんだけど、出来上がるか死ぬかでいうと死ぬほうが確率高そうなんでね、とりあえずねとりあえず出した。
まぁ相変わらずのレイアウト。ほんと全然変わってないね。CSS3 Media Queriesでのレイアウト変化する感じもほとんど同じ。そのくせ、HTML/CSSはほとんど書き換えた。CSSは無駄に肥大した。
はじめはGridレイアウトにしようとして自作Grid CSSとか書いてたんだけど、途中でなんかハッとなって今まで通りのレイアウトに戻った。以前とはサイズやらは違うけども。Gridレイアウトはいつもトライしてみるんだけど、結局なんかダメなとことか出てきちゃってあは〜んってなっちゃう。

Postに引っ付いたなんたらほんたらボタン系は全部「Share」に突っ込んだ。あんまりボタン類は押されてる感じがなかったのと、見た目がゴミゴミするのと、読み込み等に無駄にリソース持ってかれちゃうのがアレだったのでこうなった。まぁこの部分もまだ中途半端なのでもうちょっと作り込みたい。
あぁ、「Share」を押すと下になんたらほんたらボタンがダァァと出ます。はてなスターもボタンじゃないけどこっちです。

あとはなんだろ…。なんだろ…。あれっ…ぼく…何やってたんだろう…。
あ、左下にぼくのプロフィール画像が出てくるのが気持ち悪かったので、ここは早急にどうにかしようと思う。Devってる時はうさぎの画像にしてたから、こういうインシデントを想定できていなかった。ぼくはうさぎでも碧いうさぎでもなかった。

もう飽きてきてるのでいろいろとこのままにしておくかもしれない(正直なぼく)。

Read More

基本的にWebのもの作る時はMacで作ったあと、VMWare Fusion上のWindows XPのIEでチェック、問題があれば修正って流れでやってる(みんなも？)。
で、Windows上でたまにIE以外のブラウザもチェックしたりするんだけど、なんかおかしいの出たのでメモっとく。

Windows版のGoogle Chromeで見た、このサイトのFooter。
backgroundに-webkit-gradientを使ってるんだけど、見事におかしなことになってる。リンク要素にマウスオーバーするとその要素のみ、backgroundが出てくる。謎。Windows上のGoogle Chromeのみでの現象。VMへのメモリ割当が少ない(300MB程)のが悪かったりするのかな？

Windows版Safariでフォントにアンチエイリアス掛けるとLucida Grandeがなんかおかしくなる。
右上の「Search」のところ。フォントのディセンダが通常のWindowsのフォントレンダリング時と比べて大きくなっている。Safariが自前で持ってるLucida Grandeのフォントの問題なのかな。ちなみに通常のフォントレンダリングはこんなん↓

他にもスクリーンショットは取ってないけど、Safari/Chromeでinput type=”search”のデザインがなんかおかしかった。少なくともMac上のSafari/Chromeとは全く違うものになってる。ので、Windows上ではinput type=”search”は使わないようにした。
box-shadowもなんか違う感じだった。

Firefoxはこういうとこ優秀だなーと思う。

ちなみに、問題の解決はしてない。ほったらかしー。

なんか飽きてきたので、見た目変えました。数日前。

今回は簡素な造りになってるんだけど、ここに到るまで随分時間が掛かった。ほぼ出来上がりのものを4、5回作り直した…。最初に考えていたものとは全く違うものになってしまったけど、シンプルになったからこれでよし…かな…。まぁ当初考えてた「ワイド画面が主流やねんから、横をもっと有効利用せなアカンな！」とは全く逆方向に行っちゃってるんだけど。むしろ縦が狭くなった。なにこれ。なにやってんのよ。

前のテーマファイルを使って作り直したんだけど、コードは随分と少なくなった。削ってくばっかり。JSON読み込んでうんたらほんたらとかなくなったしね。css/jsはほとんど書き直し。jsは今もちょこちょこ追加・修正中。
使ってるライブラリ等は、jQuery, uuAltCSS, dynamic gradient backgroundと、YUI Reset/Fonts CSS(現時点)。IEでの表示にはuuAltCSSに頼りっきり。ほんとすごいなぁこれ。非IEではCSSGradientが使えない環境の場合、dynamic gradient backgroundを使ってグラデーションさせてる。CanvasのtoDataURL使ってbackground-imageに突っ込んでるくさいから違和感無いね。生成の負荷も軽いっぽいし。
今回もインターフェースには画像ファイルを使わずにCanvasで(ほぼ無いけど)。SVG使おかなと思ったけど、そもそも画像をあんまり使わないし、CanvasだったらuuAltCSSにuuCanvas入ってるから、別途SVGのIE向けライブラリ(SIEとか)読み込まなくて済むからね。
あ、全部uuAltCSSでやればいいのかなぁ。

それと、やっとAutopagerizeに対応させた。以前気持ち悪いとぼやいてたrel=”next”だとかの件はSITEINFOで回避。

あとは、Footerなんとかしよ。

もうひとつ、一年くらい前に作って放置(開発環境に)したままのiPhone用テーマもビシっとさせてこっちに持ってこよ。またApplicationCacheとか使お。つかiPhoneのSafariで、metaに何か書いたらorientationしないモードみたいになんないかなぁ、そろそろ。あと、position:fixed;とかー。そしたらもっとSafariが活きてくると思うんだけどなー(Flash対応よりも)。

久しぶりすぎて、うまくパスが描けない。

デザイン変えたときにほったらかしになってたArchivesとTagsを追加。

全部Javascriptだけでやったので、ブラウザがJavascriptに対応してなかったり切ってたりしてると、存在そのものが見えないです。というか、このサイトJavascript切ってるといろいろ見えないです＞＜ トップページの縦にズルンッとスライドするやつとかね。WordPressにJSON吐かせて自由自在ー。

今までだと、Javascript切っててもある程度見られるように作ったりしてたし、それが当たり前なんだとおもうけど、最近はこうやってバッサリ切り落とした作りでいっちゃうね。まぁコンテンツじゃないから問題なし。

ということで、ArchivesとかTagsとか押してみるといいよ。
とりあえず押してみるのよ、それでダメだったら引いてみよう。最初から待ちのスタンスじゃやっぱダメだよね。うん。はい。

追記 090421:
jQueryのfancyboxプラグインも、Archives & Tagsで使ってるやつに変えた。なので、pngfixなjsも使わなくなった(でも、スクリーンショットとかで透過png使うとき用にcss書かなあかんな)。でもまぁこれでインターフェース周りで使う画像が全てなくなった。ちょうきもちいい。

それと、マウスオーバー時にズームしますよアイコンも追加。Closeアイコンも。このへんのアイコンはcanvasで。IEでの表示はuupaa-excanvas.jsに助けてもらってます。
あ、CloseアイコンはMacとそれ以外のOSで表示位置を変えてみました。MacのUIだとウィンドウを閉じるボタンは左側にあるので。まぁWebのUIとOSのUIをごっちゃに考える必要は全くないんだけど、モノは試しってことで。

まだまだ気に入らない部分が山ほどあるので、ちょいちょい修正・追加ちゅう。

見た目変えました。

当然、毎度の通り作ってる途中です。
やっぱりバックは白がいいわ。モノクロームがいい。落ちつくというよりは安心するね。

とりあえず、現状ArchivesとかTagsとかがないので早めになんとかしたいなと。

cssでHelvetica Neue Lightを使うときのメモと、いろいろやってて気付いたこと。

まぁまず使う時の書き方。

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;

これ以外の書き方だとうまくいかなかった。font-familyの”Helvetica Neue”を取るとFirefoxだとダメで、”Helvetica Neue Light”を取るとOperaがダメ。font-weight:lighter;だとSafariでの表示がLightにならなかった。
と、各ブラウザで動作がバラバラになってて、結局上の書き方でなんとかうまくいった。でも、上の書き方でHelvetica Neue UltraLightを使おうとするとFirefoxだけダメだった（font weightは100ね）。これはFirefoxのバグなのかなぁ…。

気付いたこと（間違ってたら叱ってください）

• Firefoxはフォントのファミリーネームにしか対応していない
• SafariとOperaはフォントのフルネームも対応してる
• Operaはfont-familyをフルネームで指定されたとき、font-weightを無視する
• Safari(4は)はfont-familyをフルネームで指定されていても、font-weightが機能する
• OperaもSafariもfont-familyをファミリーネームで指定すると、レギュラー以下のweightにできない

というような感じ。検証ブラウザのバージョンが全部Beta版（Firefox3.1b2, Safari4Beta, Opera10a）なんであてにならないかも。

追記:
Safari3だとPostScriptネームで指定しなきゃダメだったので修正。で、Safari3はfont-weight無視するわ。無視じゃなかった。指定したスタイルよりも細いのだと無視されて、太いのだとOKだった。なにそれ…。
だから、font-family:”HelveticaNeue-Bold”;とかやっちゃうとweight変えられないけど、HelveticaNeue-UltraLightを指定しとくとweight変更可能。違った。UltraLight指定でもLight指定でもBoldにはできるってだけだった。UltraLight指定でLightとかRegularとかにはできない。
PostScriptネーム指定の動きはSafari3も4も同じっぽい。

PostScriptネームでfont-family指定できるのはSafariだけっぽい。cssはフルネームを先に書いた方がいいかも。

Safari…。

Firefox3.0.6とOpera9はBeta/Alphaと同じっぽい。

結論: これはめんどい。IEとかChromeとかの検証してないし…。windowsってdfontファイルに対応してたっけ？

ブラウザのフォント周りの処理って結構バラバラ。font-sizeなんか、Mac版のFirefoxのみ小数点以下のサイズ表示可能とかだし。letter-spacingもね。emとか%で組んでると結構差が出てきていつも困る。

[参考: Pixelmatrix Design - Advanced Web Typography, Helvetica Neue Light – Guillermo Esteves]

追記2:
Chromeで確認（というかHelvetica Neue入ってないから意味ないんだけど）したら、ブラウザの標準フォントで表示された（MSPゴシックかな。ClearType効いてなかったし）。Chromeはこういう状況（font-familyに指定したフォントがない場合）だと親要素からfont-familyが継承されないのかな。なので、またちょっと修正。

追記3:
Firefox3.1b3でHelvetica Neue Lightにitalicをかけると、UltraLightのitalicが表示される。Firefox3.0.7ではちゃんとLightのitalicが表示されるので、3.1b3のバグかなぁ。3.5が出る時には直ってるといいなぁ(3.6a1preでは修正されてる)(3.5b4で修正された)。

追記4:
Mac版のGoogle Chrome(自前ビルド版(090407))でも上記の書き方でOKだった。WebkitだからSafariと同じような動きなのかな。

変えてばっかりだけど、また変えよっかな。

だって飽きちゃったんだもん。二週間もあったら飽きるには十分すぎる。