watir

デザインを変更

ふと気が向いて、メモログのデザインを変更してみました。３時間程度で終わらせるつもりが、結局一日半くらいかけてしまいました。

今回はsixapart-standardのHTML構造を動かさずに、JavascriptとCSSだけでデザインするという行為にチャレンジしてみました。画像の挿入もCSSで背景画像として入れるか、innerHTMLを使って入れています。トップナビゲーション部分もJavascriptで入れています。そんなわけで時間をかけたわりにディテールが全然できあがっていないのですが、そのうち頑張ります。

表示はMac Safari2.02とFireFox1.04で確認。Mac IEでは日付部分がうまく表示できないようです。Windowsは機会を見つけて確認していこうと思います。

またまたデザイン変更

気がついたら2ヶ月ぶりのエントリーになっていました。この2ヶ月の間にいろんなことがありましたが、それはまた追ってお話する機会があれば・・

それはさておき。またもやデザインを変更してみました。時間が足りなくなってしまったので、とりあえずインデックスページと個別アーカイブのみです。他のページにアクセスすると、ひどい状態になっています。また少しずつ戻していきます（その間にまたデザイン変更しているかもしれませんが）。

今回の変更では、下記の3つの試みを新たに行ってみました。声を大にして言うほどすごいことをしているわけではありませんが、目的をもって行う方が楽しいので。

1. 黄金律によるレイアウト：黄金律（5:8）を意識してレイアウトを決めました。全体の横幅が650pxで、メインカラムが400px、右カラムが250pxで5:8（1:1.6）となっています。また、右カラムのメニュー部分が90pxで、記事リストの部分が160pxとなっており、5:8に近い状態になっています。全体の横幅も、ディスプレイの縦と横を意識して5:8になるようにしているつもりですが、これはあまり意味がなかったかも。
2. structure firstなHTML：CSSを作る前に（できるかぎり理想的な）HTML構造を作ってしまって、そのあとにCSSを作成しながら調整していく、というアプローチをとってみました。当たり前といえば当たり前のアプローチですが、意識的に行うと少し違う（と思う）。無用なclass/idがなくなり、美しい構造になります。Movable Type(MT)の場合、mt-site.jsがname-email、comments-open、trackbacks-infoなどのidを使っているようで、ここで少しはまってしまいました。
3. CSS表記順の統一：これは単純に、プロパティをできるだけ50音順になるように並べたというだけです。フォント部分を独立させて表記したりなどはいつもの通り。

なお、いつものように表示の確認はMac SafariとFireFoxでのみ行っています。Windowsは会社でこっそりと昼休みにでも確認します。

デザインを変更

2週間ほど前に変更したばかりですがデザイン変更しました。といっても、バナー部分とナビゲーション部分しか変更していません。前回同様、sixapart-standardの構造を動かさないでcssとjavascriptだけでデザインしています。サイドバーの中味はそのうち変えるかもしれません。

前回同様、下記のリンクをクリックすると前回のデザインに切り替わります。そしてこれまた前回同様、下記のリンクはインデックスにある間だけ動きます。Windows IEでうまく動かない（元に戻すときにCSSが切り替わらない）のも前回同様です :-p

• Vicksburgにする
• Butterflyにする（前回のデザイン）
• 元に戻す

と、思ったら、Butterflyにはうまく切り替わらない。Javascriptを改良しないと無理のようです。はい。