VERSIONFIVE Renewal!

画像 : VERSIONFIVE リニューアル

versionfive.jpに移転してから2年と3ヶ月。まだ完全ではありませんが、やっっと、リニューアルできました!

一番はじめのカンプを作ったのが2007年8月で、気に入らなくなって作り直しては寝かせ、を繰り返していたのと、これまで利用させていただいていたVicunaがとても使い心地のよいテンプレートでしたので、記事を書くだけでこれまでのそのそとやってきてしまいました・・・。

まだ月別アーカイブページと404ページ、検索結果用のテンプレート、そしてプロダクトページができていないのですが、とりあえず公開してみました。3月中に完成させますが、不具合などあればぜひコメントやTwitter等でお知らせいただければと思います。
今後ともこのサイトよろしくお願いします!

続きに技術的な話など。

今風な海外っぽいの

なんとなくこんなことをコンセプトにしていたと思います。そして、下記のようなビジュアルを目指してひたすら作ってはお蔵入り、を繰り返していたらこのデザインに落ち着いていった感じです。

  • やっぱり空、雲の要素はいれたい
  • (最近流行の)MacのUIっぽいデザインと質感
  • 海外でありそうな雰囲気

レイアウトについてはずげー色々考えたのですが、あまり覚えてないしめんどうなので省略。

エントリータイプのアイコンは、PICOLさんのアイコンを使って一部手直しして使っています。エントリ個別ページのソーシャルサービスのアイコンは、Paul Robert LloydさんのSocial Media Iconsを。はてなブックマークとLivedoorクリップのアイコンは用意されていなかったので雰囲気に合うように作ってみました。ついでにGoogle バズのも。よかったらご自由にお使い下さい。

アイコン : はてなブックマーク アイコン : Livedoorクリップ アイコン : Google バズ

HTML5, CSS3でリニューアル

この時期に個人サイトをリニューアルするなら勉強も含めてHTML5でしょ、ということで(7度ほど作り直して)このデザインに固まってから、昨年の8月くらいからHTML5で作ってきました。ソース自体は基本的に単なるブログのHTML5化なのであまり面白い要素はないかもしれません[1]。はじめにHTML5で組みだしてから、footer要素aside要素の解釈が変わったりして何度か書き換えたりしました。

また、装飾程度ですがCSS3のプロパティも使っています。border-radiusとかtext-shadowくらいですが。パンくずリストにはWebfontsを実験的に使ってます。
JavaScriptに関しては、タブやアコーディオンなデザインをやってみたかったので、jQueryのプラグインyuga.js(カスタマイズしていますが)などを使って実装しています。

さようならInternet Explorer 6

今回は、可読性がある程度確保できるくらいにして、なるべくid, classを使わないようにしています。代わりに、使ってみたかった子セレクタ、隣接セレクタをおもいきり使っています。つまり、当サイトをIE6で見ると激しく崩れます。そりゃあもう恐ろしいくらいに。本来は代替のデザインを充てるべきなのでしょうが、うちのサイトを見に来る人で今更IE6ってのもなぁ、とか、いっそ能動的にIE6で見れないようにしてもいいんじゃないかなぁと、と思って、IE用のCSSにzoom: 1%;と書いておきました[2]

動作確認は、Firefox3-, Safari3-, Opera10, IE7-8あたりで。ロールオーバーには、after疑似要素でのCSSロールオーバーを使っています。IE7はafter疑似要素が使えないため、一部のみの動作になっています。IE8はかなり優秀ですね。

JavaScriptオフでもなんとか動くよ

これをプログレッシブ・エンハンスメントというのかわかりませんが、JavaScriptでも同じような動作ができるようにCSSで必死に組んでみました。笑 ここが一番試行錯誤したところかもしれません。できればここにCSS Animationを組み込んで、まったく同じ動作ができるようにしたいですね。

まとめると、古いブラウザ気にせずに勉強したかったことを自由にやってみたサイト、になってます。IE6のこと考えないだけホント楽だし楽しいなぁ[3]。この際ついでにIE7もいなくなってくれればどれほどか幸せになれるか。

気になったところは今後ちょこちょこ直していきたいと思っています。次はearthwards正式版リリースだ!

  1. ただ、WordPressのエディタがsection要素を認識してくれないので、しばらく本文部分ではdiv.sectionで書いています。。 [back]
  2. とある方のTwitterのつぶやきを使わせてもらったのですが。笑 [back]
  3. 明日IE6の葬儀が執り行われるそうですね [back]

「VERSIONFIVE Renewal!」への2件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA