watir

デザインを変更

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

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

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

スタイルシート変更

特に言うほどのことではないのですが、CSSを変更してみました。他のテンプレートはいじらずに、CSSのみ変更。けっこう変更したつもりなのですが、前回のデザインと比較してみるとそこまで変わってないですね。フォントのサイズが大きくなっているので、少し読みやすくなったかも。

黄金比によるWebレイアウト

「Balance in Design 美しく見せるデザインの原則」に触発され、「黄金比によるWebレイアウト」を実践してみました。黄金比とは「最も美しい比」と呼ばれている比率で、具体的には5:8（1:1.618…)の縦横比をさします。バランスが良く安定した形で、人工物のみならず自然物にも美しいと感じるものの多くに黄金比が存在するそうです。

さて実践。最初に全体のレイアウトから。縦幅を800pxに想定して、そこから横幅を計算してみました。800pxを長辺とすると、短辺は1.6で割って500px。しかし横幅500pxだとなんとなく狭い感じがしたので、800pxを2で割って、短辺を400pxとした2つの黄金長方形として考えることにしました。400pxを短辺とすると、長辺は1.6をかけて640px。最終的に微調整をして横幅を650pxとしてみました。

次に横幅650pxを5:8に分けて、メインカラムを400px、サイドバーカラムを250pxとしてみました。厳密には5:8ではありませんが、10px単位でレイアウトを分けた方が楽なので。サイドバーカラムに250pxも必要ないように感じたので、250pxをさらに160pxと90pxに分割。

次にロゴを入れる箇所を作るために、縦幅400pxを150pxと250pxに分けて、上の5の部分にロゴを入れることにしました。最初はページ全体の上をロゴ部分にしようと思っていましたが、最終的にはサイドバーカラムの上だけをロゴ部分にしました。

そして下記のデザインが完成しました。少しメインカラムが狭いようにも感じますが、まあまあのできばえ。横幅760px、縦幅を950px（475+475）ぐらいでレイアウトしても良いかもしれませんね。これだと逆に縦に長くなりますが。

参考

• Wikipedia - 黄金比

またまたデザイン変更

気がついたら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を改良しないと無理のようです。はい。

Javascriptでデザインを切り替える（実験中）

あけましておめでとうございます。本年もよろしくお願いいたします。

元旦早々ですが、Javascriptでデザインを切り替える実験をしています。Javascriptの練習も兼ねているので、既成のスクリプトは使わずに自分で考えて作成してみてます。できたものは下記のようなもの。リンクをクリックするとMovable Type 3.2のデフォルトデザインであるVicksburgに変わります。ただしトップページにしかJavascriptを埋め込んでいない都合上、トップページでしか動作しません。

• Vicksburgにする
• 元に戻す

（Cookieなどで）変更情報を保存していないため、ページを遷移したりリロードすると元の状態に戻ります。

なおMac Safari & FireFoxでしか動作確認していません。
今使っているデザインには「butterfly」という名前が一応つけられています。